一篇文章理解Web緩存

zlyBear 發布于2019-08-23 10:30 / 931人閱讀

摘要：的數據將一直保存在瀏覽器內，直到用戶清除瀏覽器緩存數據為止。它也是一個被標準廢棄的功能，主要是通過文件來標注要被緩存的靜態文件清單。盡管也有文件，但是與應用緩存卻完全不同。另外，用來控制緩存的使用。

最近把前端緩存重新整理了一下，從整體的層面上把前端所有能用的緩存方案梳理了一遍。同時，對于http緩存，使用了表格的方案，使得原先晦澀難記的特性變得清晰明了。特記錄于此，若有什么欠缺，也望不吝指出。

1. 前端緩存概述

前端緩存主要是分為HTTP緩存和瀏覽器緩存。其中HTTP緩存是在HTTP請求傳輸時用到的緩存，主要在服務器代碼上設置；而瀏覽器緩存則主要由前端開發在前端js上進行設置。下面會分別具體描述。

2. 前端緩存分類 2.1 HTTP緩存

整體流程：HTTP緩存都是從第二次請求開始的。
第一次請求資源時，服務器返回資源，并在respone header頭中回傳資源的緩存參數；第二次請求時，瀏覽器判斷這些請求參數，擊中強緩存就直接200，否則就把請求參數加到request header頭中傳給服務器，看是否擊中協商緩存，擊中則返回304，否則服務器會返回新的資源。

HTTP緩存分為強緩存和協議緩存，它們的區別如下：

 200 from disk or 200 from memory :
強緩存的200也有兩種情況：200 from disk和200 from memory。現在我沒有找到明確的文檔來描述這種區別的發生條件。知乎這個問題中提到了一些情景，可以自行取用。

2.1.1 強緩存

2.1.2 協商緩存

協商緩存都是成對出現的。

2.1.3 最佳優化策略-消滅304

最佳優化策略：因為協商緩存本身也有http請求的損耗，所以最佳優化策略是要盡可能的將靜態文件存儲為較長的時間，多利用強緩存而不是協商緩存，即消滅304。

但是給文件設置一個很長的Cacha-Control也會帶來其他的問題，最主要的問題是靜態內容更新時，用戶不能及時獲得更新的內容。這時候就要使用hash的方法對文件進行命名，通過每次更新不同的靜態文件名來消除強緩存的影響。

Hash命名：
http://xxx.com/main.5eas34fa.js
http://xxx.com/main.js?5eas34fa
http://xxx.com/5eas34fa/main.js

2.2 瀏覽器緩存 2.2.1 本地存儲小容量

Cookie主要用于用戶信息的存儲，Cookie的內容可以自動在請求的時候被傳遞給服務器。
LocalStorage的數據將一直保存在瀏覽器內，直到用戶清除瀏覽器緩存數據為止。
SessionStorage的其他屬性同LocalStorage，只不過它的生命周期同標簽頁的生命周期，當標簽頁被關閉時，SessionStorage也會被清除。

2.2.2 本地存儲大容量

WebSql和IndexDB主要用在前端有大容量存儲需求的頁面上，例如，在線編輯瀏覽器或者網頁郵箱。

2.2.3 應用緩存與PWA

應用緩存全稱為Offline Web Application，它的緩存內容被存在瀏覽器的Application Cache中。它也是一個被W3C標準廢棄的功能，主要是通過manifest文件來標注要被緩存的靜態文件清單。但是在緩存靜態文件的同時，也會默認緩存html文件。這導致頁面的更新只能通過manifest文件中的版本號來決定。而且，即使我們更新了version，用戶的第一次訪問還是會訪問到老的頁面，只有下一次再訪問才能訪問到新的頁面。所以，應用緩存只適合那種常年不變化的靜態網站。如此的不方便，也是被廢棄的重要原因。

PWA全稱是漸進式網絡應用，主要目標是實現web網站的APP式功能和展示。盡管PWA也有manifest文件，但是與應用緩存卻完全不同。不同于manifest簡單的將文件通過是否緩存進行分類，PWA用manifest構建了自己的APP骨架。另外，PWA用Service Worker來控制緩存的使用。這一塊的內容較多，在這里就不詳細展開了。

2.2.4 往返緩存

往返緩存又稱為BFCache，是瀏覽器在前進后退按鈕上為了提升歷史頁面的渲染速度的一種策略。BFCache會緩存所有的DOM結構，但是問題在于，一些頁面開始時進行的上報或者請求可能會被影響。這個問題現在主要會出現在微信h5的開發中。

去除BFCache有多種方法，但不是本文的重點，想了解的同學可以看《瀏覽器往返緩存（Back/Forward cache）問題的分析與解決》

總結

本文梳理了前端所有可能涉及的緩存，希望能從整體層面建立起系統的緩存知識體系。限于篇幅，每一部分的描述都比較簡略，僅起到拋磚引玉之用。如有錯誤，還望指出。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96399.html

一篇文章理解Web緩存

摘要：的數據將一直保存在瀏覽器內，直到用戶清除瀏覽器緩存數據為止。它也是一個被標準廢棄的功能，主要是通過文件來標注要被緩存的靜態文件清單。盡管也有文件，但是與應用緩存卻完全不同。另外，用來控制緩存的使用。最近把前端緩存重新整理了一下，從整體的層面上把前端所有能用的緩存方案梳理了一遍。同時，對于http緩存，使用了表格的方案，使得原先晦澀難記的特性變得清晰明了。特記錄于此，若有什么欠缺，也望...

tangr206 2019-08-06 13:35 評論0 收藏0
[譯]理解Service Workers

摘要：而一個文件名表明將只捕獲在下的請求。包含請求主體其被包含在對象中。該方法將首先緩存響應但隨后在后臺網絡請求。被用來提供響應針對請求。一旦這個異步操作完成后操作將終止。翻譯：jsdt原文標題：Understanding Service Workers原文鏈接：http://blog.88mph.io/2017/07/...聲明：轉載請指明出處。在網絡早期,很難想象在用戶離線的時候一個...

luxixing 2019-08-20 18:58 評論0 收藏0
徹底理解從輸入URL與頁面展現

摘要：五瀏覽器繪制網頁繪制過程主要是結構與樣式的結合，以及行為動態效果的展現。之后會寫系列文章，歡迎圍觀主要參考文章基礎進階詳解與編碼前端面試題從到頁面展現，這之中發生了什么圖解流程概述：地址欄輸入URL ——> 域名解析 ——> 服務器處理請求 ——> 瀏覽器處理響應 ——> 瀏覽器繪制網頁一.地址欄輸入URL 認識URL showImg(https://segmentfault....

abson 2019-08-21 11:41 評論0 收藏0
前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
前端基礎

摘要：談起閉包，它可是兩個核心技術之一異步基于打造前端持續集成開發環境本文將以一個標準的項目為例，完全拋棄傳統的前端項目開發部署方式，基于容器技術打造一個精簡的前端持續集成的開發環境。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老鳥，不論是面試求職，還是日...

graf 2019-08-21 18:38 評論0 收藏0