瀏覽器快取的解決方案

                                          ——IT唐伯虎

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

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

瀏覽器的狀態

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

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

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

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

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

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

瀏覽器的重新整理

（1）按F5重新整理：

從快取讀取檔案，然後將這些檔案向伺服器對比，如果最後修改時間變化就重新下載，此時狀態是200，如果沒變就從快取讀，此時狀態是304，這是隻理想情況，有些時候，只從快取讀取，狀態是200已快取。

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

強制刪除當前頁面的所有快取，並且重新下載，此時狀態是200。

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

強制刪除瀏覽器的所有快取，訪問的時候重新下載，此時狀態是200。

（4）在頁面上點選連結、或者在位址列輸入、或者從瀏覽器書籤進入，等等的大多數途徑，

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

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

改進方案

（1）css、js

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

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

<link href="css/style.css?v=${code}">

<script src="js/front.js?v=${code}"></script>

${code}代表版本號，由freemarker或jsp進行賦值，如果版本號變化了，整個網站的所有css、js都會重新下載。

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

app.a7dec7ac.js

chunk-4a91bce9.b219889e.css

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

（2）html

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

html的檔名是跟瀏覽器的地址相關的。html檔名是什麼，使用者在瀏覽器就需要輸入什麼。所以說，不能給html檔案加上版本號。對於html檔案，我們採取禁用快取的方案：

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

response.addHeader("Cache-Control", "no-cache, no-store");

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

location = /index.html {

  add_header Cache-Control "no-cache, no-store";

}