Web應(yīng)用的前端資源（如JavaScript文件、CSS樣式表等）更新后，用戶的瀏覽器可能仍使用緩存的舊版本，這可能導(dǎo)致應(yīng)用運行錯誤或顯示不正確。因此，通知用戶刷新網(wǎng)頁以加載最新版本的資源是至關(guān)重要的。

使用版本哈希標記文件

為了確保用戶總是加載最新的文件，可以在文件名中加入版本哈希值。

1. 自動生成哈希值

在構(gòu)建過程中，使用工具（如Webpack）自動為文件名添加哈希值。

// Webpack配置示例
output: {
    filename: '[name].[contenthash].js',
}

2. HTML引用更新

確保HTML文件引用帶有哈希值的最新文件。

<script src="bundle.2e8ebe5e.js"></script>

實現(xiàn)前端輪詢檢查更新

通過在客戶端使用JavaScript定期輪詢服務(wù)器檢查更新，可以在檢測到新版本時提示用戶刷新。

1. 創(chuàng)建更新檢查接口

在服務(wù)器端創(chuàng)建一個API接口，返回當前的應(yīng)用版本。

# Flask示例
@app.route('/version')
def version():
    return jsonify(version='1.0.2')

2. 前端輪詢邏輯

使用JavaScript定期請求更新檢查接口，并與當前版本比較。

const currentVersion='1.0.1';

setInterval(()=> {
  fetch('/version')
    .then(response=> response.json())
    .then(data=> {
      if (data.version !==currentVersion) {
        alert('A new version is available. Please refresh the page.');
      }
    });
}, 60000); // 每60秒檢查一次

利用WebSockets進行實時更新通知

WebSockets允許服務(wù)器主動向客戶端發(fā)送消息，這適用于實時通知用戶刷新頁面。

1. 建立WebSocket連接

在前端建立一個WebSocket連接，監(jiān)聽服務(wù)器的消息。

const socket=new WebSocket('wss://your-server.com/updates');

socket.onmessage=function(event) {
  alert('A new version is available. Please refresh the page.');
};

2. 服務(wù)器端發(fā)送更新通知

在服務(wù)器端檢測到新版本時，通過WebSocket發(fā)送消息給所有連接的客戶端。

# 假設(shè)使用Python的WebSocket庫
def notify_clients():
    for client in clients:
        client.send('New version available')

使用Service Workers實現(xiàn)后臺更新

Service Workers可以攔截網(wǎng)絡(luò)請求并實現(xiàn)資源的緩存管理，適用于在后臺更新資源。

1. 注冊Service Worker

在主JavaScript文件中注冊Service Worker。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

2. 編寫Service Worker

在Service Worker中，攔截請求并實現(xiàn)資源的緩存策略。

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 返回緩存中的資源或發(fā)起網(wǎng)絡(luò)請求
      })
  );
});

結(jié)論

有效地通知用戶前端更新是確保Web應(yīng)用正常運行的關(guān)鍵。通過版本哈希標記、定期輪詢、WebSocket實時通知或Service Workers，開發(fā)者可以確保用戶總是使用最新的應(yīng)用版本。每種方法都有其適用場景，開發(fā)者可以根據(jù)自己的需要選擇最合適的實現(xiàn)方式。

、認識網(wǎng)頁

我們?nèi)粘Ｒ姷降木W(wǎng)頁主要由文字、圖像和超鏈接等元素構(gòu)成。當然，除了這些元素，網(wǎng)頁中還可以包含音頻、視頻以及Flash等。

代碼是如何形成網(wǎng)頁的呢? 那就需要瀏覽器引擎進行解析渲染了。

二、常見瀏覽器介紹

瀏覽器是網(wǎng)頁運行的平臺，常用的瀏覽器有：

• IE
• 火狐（Firefox）
• 谷歌（Chrome）
• Edge
• Safari
• Opera

2.1 瀏覽器占有的市場份額

根據(jù)市場調(diào)查機構(gòu) Statcounter 最新公布的數(shù)據(jù)，2023 年 11 月全球桌面瀏覽器市場份額排名前三名分別是谷歌 Chrome（62.06%）、蘋果 Safari（13.3%）和 Edge 瀏覽器（5.5%）。雖然 Edge 瀏覽器在全球范圍內(nèi)均有分布，但其份額仍無法超過 Safari 瀏覽器。與上月相比，Chrome 的份額下降了 0.25 個百分點，Safari 的份額增加了 0.07 個百分點。Firefox 在該月的全球份額達到 3.24%，相比上月增長了 0.22 個百分點。

在桌面端瀏覽器市場中，Chrome 繼續(xù)穩(wěn)居第一，市場份額為 62.06%，盡管有所下降但也屬于正常波動范圍。Safari 以 13.3% 的份額緊隨其后，在全球范圍內(nèi)享有較高的知名度。Edge 的市場份額從上月的 11.8% 下降到 11.23%，仍然保持著良好的增長趨勢。

此外，F(xiàn)irefox 的全球份額也有所上升，達到 6.69%，與其他瀏覽器相比表現(xiàn)強勁。Opera、360 安全瀏覽器、IE 等其他瀏覽器也在全球范圍內(nèi)占有一定的市場份額。

總體而言，在桌面瀏覽器市場上，Chrome 繼續(xù)保持著領(lǐng)先地位，而 Safari 和 Edge 則在市場上展開了激烈的競爭。預(yù)計在未來幾個月內(nèi)，這些產(chǎn)品將繼續(xù)保持穩(wěn)定的增長態(tài)勢，并且會繼續(xù)影響著用戶的使用習慣和技術(shù)趨勢。

2.2 瀏覽器內(nèi)核（理解）

瀏覽器內(nèi)核又可以分成兩部分：【渲染引擎】(layout engineer 或者 Rendering Engine) 和 【JS 引擎】。

• 渲染引擎：它負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。
• JS 引擎：解析 Javascript 語言，執(zhí)行 javascript語言來實現(xiàn)網(wǎng)頁的動態(tài)效果。

2.3 常見的渲染引擎

內(nèi)核通常只指渲染引擎：

最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來【JS 引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎】。有一個網(wǎng)頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內(nèi)核的種類很多，如加上沒什么人使用的非商業(yè)的免費內(nèi)核，可能會有10多種，但是常見的瀏覽器內(nèi)核可以分這四種：Trident、Gecko、Blink、Webkit。

（1）Trident(IE內(nèi)核)

Trident [?tra?dn:t]：n. 三叉戟

國內(nèi)很多的雙核瀏覽器的其中一核便是 Trident，美其名曰 "兼容模式"。

代表： IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等（這些國產(chǎn)瀏覽器都是雙內(nèi)核）。

Window10 發(fā)布后，IE 將其內(nèi)置瀏覽器命名為 Edge，Edge 最顯著的特點就是新內(nèi)核 EdgeHTML。

（2）Gecko(firefox)

Gecko [?geko?] n. 壁虎

Gecko(Firefox 內(nèi)核)： Mozilla FireFox(火狐瀏覽器) 采用該(渲染引擎)，Gecko 的特點是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。 可惜這幾年已經(jīng)沒落了， 比如 打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。

（3）webkit(Safari)

Safari 是蘋果公司開發(fā)的瀏覽器，所用瀏覽器內(nèi)核(渲染引擎)的名稱是大名鼎鼎的開源引擎 WebKit。

現(xiàn)在很多人錯誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）。

代表瀏覽器：傲游瀏覽器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 4.4之前的默認瀏覽器

（4）Chromium/Bink(chrome)

Blink [bi?k] n. 架子；長凳

在 Chromium 項目中研發(fā) Blink 渲染引擎，內(nèi)置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支, 也是開源的。 （大名鼎鼎的 V8 是 Chrome 的 JS 引擎）

大部分國產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。

（5）Presto(Opera)

Presto ['pr?sto] adj. 迅速的

Presto 是挪威產(chǎn)瀏覽器 opera 的 "前任" 內(nèi)核(渲染引擎)，為何說是 "前任"，因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。

了解一點：

移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。

目前移動設(shè)備瀏覽器上常用的內(nèi)核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit，Android 4.4 之前的 Android 系統(tǒng)瀏覽器內(nèi)核是 WebKit，Android4.4 系統(tǒng)瀏覽器切換到了Chromium，內(nèi)核是 Webkit 的分支 Blink，Windows Phone 8 系統(tǒng)瀏覽器內(nèi)核是 Trident。

三、Web標準（重點）

通過了解以上瀏覽器的內(nèi)核不同，我們知道他們工作原理、解析肯定不同，顯示就會有差別。

由于不同的瀏覽器解析出來的效果可能不一致，開發(fā)中通常需要為同個界面做多版本的開發(fā)。

3.1 Web 標準的好處

1、讓Web的發(fā)展前景更廣闊

2、內(nèi)容能被更廣泛的設(shè)備訪問

3、更容易被搜尋引擎搜索

4、降低網(wǎng)站流量費用

5、使網(wǎng)站更易于維護

6、提高頁面瀏覽速度

3.2 Web 標準構(gòu)成

Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。主要包括結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三個方面。

• 結(jié)構(gòu)標準：用于對網(wǎng)頁元素進行整理和分類，主要包括XML和XHTML兩個部分（我們主要學習XHTML）。
• 樣式標準：用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
• 行為標準：是指網(wǎng)頁模型的定義及交互的編寫，主要包括 W3C標準(BOM、DOM) 和 ECMAScript 兩個部分

理想狀態(tài)下，我們的源碼由3部分組成： .HTML 文件(定義結(jié)構(gòu)) .css 文件(定義樣式) .js 文件(定義行為)

這樣代碼的結(jié)構(gòu)清晰，好維護

打個比方：

HTML 中，通過 JavaScript 來獲取當前元素的高度通常使用以下屬性：

var element = document.getElementById("yourElementId"); // 獲取元素var height = element.offsetHeight; // 獲取元素高度（包括padding、border，但不包括margin）

如果你想獲取元素的 CSS 定義的高度（不包括 padding 和 border），可以使用 style.height，但這只能獲取到直接寫在元素行內(nèi)樣式中的高度，而不是計算后的實際高度或 CSS 樣式表中定義的高度：

var heightInStyle = element.style.height; // 只獲取行內(nèi)樣式設(shè)置的高度

在 React 中獲取當前元素的高度方式與 JavaScript 相似，但是你需要確保在 DOM 更新后獲取元素高度。可以使用 ref 來訪問實際 DOM 節(jié)點并獲取其高度：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  useEffect(() => {    if (elementRef.current) {      // 在這里，elementRef.current.clientHeight 獲取元素的內(nèi)容區(qū)域高度（不包括padding和border）      // elementRef.current.offsetHeight 獲取元素的實際渲染高度（包括padding和border，但不包括margin）      console.log('Element height:', elementRef.current.offsetHeight);
    }
  }, []); // 確保此useEffect只在組件掛載后執(zhí)行一次  return (    <div ref={elementRef}>
      {/* 你的組件內(nèi)容 */}    </div>
  );
}export default YourComponent;

在上述代碼中，useRef 創(chuàng)建了一個可變的引用對象，它可以用來保存任何可變值，包括 DOM 節(jié)點。然后通過將這個 ref 對象賦給元素的 ref 屬性，React 會將對應(yīng)的 DOM 節(jié)點保存到這個 ref 對象的 .current 屬性上，這樣我們就可以在回調(diào)函數(shù)或者其他適當?shù)牡胤皆L問到該 DOM 節(jié)點，并獲取其高度了。

如果要在圖片加載完成后獲取包含圖片的元素高度，可以監(jiān)聽圖片的 load 事件。在 React 中，你可以在組件內(nèi)創(chuàng)建一個圖片引用，并在 useEffect 中監(jiān)聽圖片加載完成：

import React, { useRef, useEffect } from 'react';function YourComponent() {  const elementRef = useRef(null);  const imgRef = useRef(null);  useEffect(() => {    const handleImageLoad = () => {      if (elementRef.current) {        console.log('Element height after image load:', elementRef.current.offsetHeight);
      }
    };    // 如果img已經(jīng)存在于DOM中，則立即觸發(fā)handleImageLoad    // 否則，在img加載完成后觸發(fā)handleImageLoad    if (imgRef.current && imgRef.current.complete) {      handleImageLoad();
    } else {
      imgRef.current.onload = handleImageLoad;
    }    // 可以選擇在組件卸載時清除事件監(jiān)聽，避免內(nèi)存泄漏    return () => {
      imgRef.current.onload = null;
    };
  }, []); // 確保此useEffect只在組件掛載后執(zhí)行一次  return (    <div ref={elementRef}>      <img src="your-image-source.jpg" ref={imgRef} alt="Your Image" />
      {/* 其他內(nèi)容 */}    </div>
  );
}export default YourComponent;

這樣，當圖片加載完成后，就會觸發(fā) handleImageLoad 函數(shù)，從而獲取到包含圖片的元素的實際高度。

如果圖片是服務(wù)端渲染的，并且你無法直接在 img 標簽上添加 ref，你可以考慮監(jiān)聽整個組件的 onLoad 事件來判斷圖片是否加載完成。由于 React 在瀏覽器中重新渲染時會保留 DOM 節(jié)點（除非有更改），所以可以通過檢查元素的 offsetHeight 是否有變化來判斷圖片是否加載完畢。