前端更新后如何告知用戶刷新網頁？

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

使用版本哈希標記文件

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

1. 自動生成哈希值

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

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

2. HTML引用更新

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

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

實現前端輪詢檢查更新

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

1. 創建更新檢查接口

在服務器端創建一個API接口，返回當前的應用版本。

# 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允許服務器主動向客戶端發送消息，這適用于實時通知用戶刷新頁面。

1. 建立WebSocket連接

在前端建立一個WebSocket連接，監聽服務器的消息。

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

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

2. 服務器端發送更新通知

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

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

使用Service Workers實現后臺更新

Service Workers可以攔截網絡請求并實現資源的緩存管理，適用于在后臺更新資源。

1. 注冊Service Worker

在主JavaScript文件中注冊Service Worker。

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

2. 編寫Service Worker

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

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

結論

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

、認識網頁

我們日常見到的網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。

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

二、常見瀏覽器介紹

瀏覽器是網頁運行的平臺，常用的瀏覽器有：

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

2.1 瀏覽器占有的市場份額

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

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

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

總體而言，在桌面瀏覽器市場上，Chrome 繼續保持著領先地位，而 Safari 和 Edge 則在市場上展開了激烈的競爭。預計在未來幾個月內，這些產品將繼續保持穩定的增長態勢，并且會繼續影響著用戶的使用習慣和技術趨勢。

2.2 瀏覽器內核（理解）

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

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

2.3 常見的渲染引擎

內核通常只指渲染引擎：

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

（1）Trident(IE內核)

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

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

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

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

（2）Gecko(firefox)

Gecko [?geko?] n. 壁虎

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

（3）webkit(Safari)

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

現在很多人錯誤地把 webkit 叫做 chrome內核（即使 chrome內核已經是 blink 了）。

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

（4）Chromium/Bink(chrome)

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

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

大部分國產瀏覽器最新版都采用Blink內核。

（5）Presto(Opera)

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

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

了解一點：

移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。

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

三、Web標準（重點）

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

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

3.1 Web 標準的好處

1、讓Web的發展前景更廣闊

2、內容能被更廣泛的設備訪問

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

4、降低網站流量費用

5、使網站更易于維護

6、提高頁面瀏覽速度

3.2 Web 標準構成

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

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

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

這樣代碼的結構清晰，好維護

打個比方：

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

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

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

var heightInStyle = element.style.height; // 只獲取行內樣式設置的高度

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

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

在上述代碼中，useRef 創建了一個可變的引用對象，它可以用來保存任何可變值，包括 DOM 節點。然后通過將這個 ref 對象賦給元素的 ref 屬性，React 會將對應的 DOM 節點保存到這個 ref 對象的 .current 屬性上，這樣我們就可以在回調函數或者其他適當的地方訪問到該 DOM 節點，并獲取其高度了。

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

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已經存在于DOM中，則立即觸發handleImageLoad    // 否則，在img加載完成后觸發handleImageLoad    if (imgRef.current && imgRef.current.complete) {      handleImageLoad();
    } else {
      imgRef.current.onload = handleImageLoad;
    }    // 可以選擇在組件卸載時清除事件監聽，避免內存泄漏    return () => {
      imgRef.current.onload = null;
    };
  }, []); // 確保此useEffect只在組件掛載后執行一次  return (    <div ref={elementRef}>      <img src="your-image-source.jpg" ref={imgRef} alt="Your Image" />
      {/* 其他內容 */}    </div>
  );
}export default YourComponent;

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

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

在線咨詢

上一篇：打包之后文件、圖片、背景圖資源不存在或者路徑錯誤的問
下一篇：HTML基礎篇-17HTML之視頻播放

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商