前端web：瀏覽器靜態資源快取策略

GeekQiaQia發表於2019-04-19
前端Web瀏覽器快取

瀏覽器靜態資源快取策略

瀏覽器其實提供了兩種控制策略，分別是強制快取和協商快取

強制快取

  • 強制快取:就是強制使用瀏覽器快取下來的資源;

    • 在指定的一段時間內用自己快取的檔案就行，不需要再次發出請求。

    • 具體的實現就是在該次請求的返回頭部(Response Headers)加上一個欄位,標識這段不需要請求的時間有多長，這個欄位在http1.0是Expires，在http1.1是Cache-Control，倆欄位同時存在的話1.1優先順序肯定大於1.0;

協商快取

  • 協商快取:就是瀏覽器和伺服器需要協商一下才能確定是用瀏覽器快取的還是用伺服器的。

    • 具體的實現就是在該次請求的返回頭部(Response Headers)加上一個欄位,標識這個檔案的版本，這個欄位在http1.0是Last-Modified，在http1.1是Etag，倆欄位同時存在的話1.1優先順序肯定大於1.0;

    • 如果強制快取和協商快取的欄位同時存在，強制快取優先。

兩種快取策略的優缺點比較：

  • 強制快取的缺點：就是可能在強制的這段時間裡伺服器檔案更新了，那瀏覽器就讀不到最新的資源了；
  • 協商快取的缺點：就是每次都要發個請求去問伺服器資源是否更新，可能造成不必要的時間和流量浪費；

Issue:是否有折中的解決方案？

答：新增檔案指紋並且進行檔名關聯
複製程式碼

在html中引用新增了檔案指紋的檔案

一般訪問網頁的入口檔案都是html(後端模板檔案也可視為html)，這個策略：
- 是對html永遠不進行快取，始終使用服務端的最新版，
複製程式碼

  • 瀏覽器在渲染該html時會去載入裡面引用到的資原始檔

  • 將每個資原始檔的都設定為強制快取，並且設定成超長過期時間，那檔案發生修改瀏覽器如何獲取最新版本的檔案呢？

  • 很簡單，比如說一張圖片發生了修改，那麼這張圖片的檔案指紋就會改變，隨之涉及所有資原始檔都會發生級聯改變，引用了這張圖片的樣式表css檔案也會改變(因為這張圖片名字變了)，而引用了該樣式表的入口檔案html隨之也會改變(因為樣式表名字變了)，而使用者再次訪問該入口html檔案時，自然就會去載入這些改變了名字的”新檔案”。

  • 這樣就完美了，實現檔案沒變動的時候就用本地快取的，檔案發生變動了就用伺服器那邊最新的，始終保持最新最快。

    參考

伺服器端靜態資源快取策略：nginx靜態資源快取策略配置

相關文章