瀏覽器緩存的解決方案 ——IT唐伯虎 摘要：瀏覽器緩存的解決方案，包括傳統前端和現代前端。 前言：本文只針對文件請求（html、css、js）進行分析，但不涉及json數據請求。 瀏覽器的狀態 （1）當瀏覽器向伺服器發起請求，如果請求正常，狀態是200。 （2）瀏覽器接收到請求結果後，如果會根據響應 ...
瀏覽器緩存的解決方案
——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";
}
