瀏覽器快取的解決方案

摘要：瀏覽器快取的解決方案，包括傳統前端和現代前端。

前言：本文只針對檔案請求（html、css、js）進行分析，但不涉及json資料請求。

（1）當瀏覽器向伺服器發起請求，如果請求正常，狀態是200。

（2）瀏覽器接收到請求結果後，如果會根據響應頭設定的快取規則，把請求結果存起來。

（3）當瀏覽器再次發起相同的請求的時候，瀏覽器會先向伺服器比對檔案，只對比最後修改時間，如果最後修改時間變化就重新獲取請求結果，此時狀態是200；如果最後修改時間沒有變化則從快取讀，此時狀態是304。

（4）304狀態是比較理想的快取使用方案，但是往往來說，瀏覽器會走另一條粗暴的路線，即不進行時間比對，直接從快取讀，此時狀態是200已快取。

（200）> （304） > （200已快取）

（10ms）>（5ms）> （0ms）

（1）按f5重新整理：

（2）按ctrl+f5強制重新整理：

（3）手動清除瀏覽器所有快取：

瀏覽器只從快取讀取，此時狀態是200已快取。

綜上所述，需要清快取的情況是第4點，其次是第1點的後半段。

（1）css、js

這兩種資源是由html指定呼叫的，只要html裡指定的css、js鏈結變化了，瀏覽器就會載入新的css、js。

傳統前端的方案是手動加版本號

現代前端的方案是自動加版本號

chunk-4a91bce9.b219889e.css

這種方案依賴於webpack、gulp等打包工具，打包結果自帶了hash值，這些hash值是根據檔案的最後修改時間生成的，如果檔案沒改過，名字就不會變化，這種方案控制快取更為精確。

（2）html

在css、js加上版本控制之後，已經能避開大多數情況下的快取，但由於css、js是由html指定呼叫的，所以說，如果html被快取了，瀏覽器依舊會去呼叫舊的css、js。其中，上文「瀏覽器的重新整理」第4點就會走這條路線。

傳統前端，在後端給需要的html加上響應頭

response.addheader("cache-control", "no-cache, no-store");

現代前端，在nginx給index.html加上響應頭

location = /index.html {

add_header cache-control "no-cache, no-store";

減少網路頻寬消耗降低伺服器壓力減少網路延遲，加快頁面開啟速度新鮮度過期機制也就是快取副本有效期。校驗值驗證機制資源的實體標籤etag entitytag 1 使用htmlmeta標籤web開發者可以在html頁面的節點中加入標籤，如下事實上這種禁用快取的形式用處很有限 a.僅有ie才...

瀏覽器快取問題為什麼使用快取 1 減少網路頻寬消耗 2 降低伺服器壓力 3 減少網路延遲，加快頁面開啟速度瀏覽器端的快取規則新鮮度過期機制也就是快取副本有效期。校驗值驗證機制資源的實體標籤etag entitytag 舉個栗子解決方法 1 使用htmlmeta標籤 web開發者可以在...