瀏覽器快取的解決方案
摘要：瀏覽器快取的解決方案，包括傳統前端和現代前端，
前言：本文只針對檔案請求（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="https://www.cnblogs.com/liangweiping/p/css/style.css?v=${code}">
<script src="https://www.cnblogs.com/liangweiping/p/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";
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/176539.html
標籤：JavaScript
下一篇：vue-生命周期