捋一捋瀏覽器緩存

前言

在前端項目體驗中，判斷一個網站性能最直觀的就是網頁打開的速度，因此項目開發中在速度方面的性能優化最主要的就是使用緩存，對於一個數據請求來講，能夠分爲發起網絡請求、後端處理、瀏覽器響應三個步驟。瀏覽器緩存能夠幫助咱們在第一和第三步驟中優化性能。好比說直接使用緩存而不發起請求，或者發起了請求但後端存儲的數據和前端一致，那麼就沒有必要再將數據回傳回來，這樣就減小了響應數據。

1、什麼是瀏覽器緩存

Web緩存存在於服務器和客戶端之間。Web緩存密切注視着服務器-客戶端之間的通訊，監控請求，而且把請求輸出的內容（例如html頁面、 圖片和文件等靜態資源）存儲到電腦本地磁盤中；而後，若是下一個請求是相同的URL，則直接使用保存的副本，而不是再次請求源服務器。

2、緩存的優缺點

【1】優勢

• 減小網絡延遲，加快頁面打開速度--緩存比源服務器離客戶端更近，所以，從緩存請求內容比從源服務器所用時間更少，緩存的使用可以明顯加快頁面打開速度，達到更好的體驗。
• 下降服務器的壓力--給網絡資源設定有效期以後，用戶能夠重複使用本地的緩存，減小對源服務器的請求，間接下降服務器的壓力。同時，搜索引擎的爬蟲機器人也能根據過時機制下降爬取的頻率，也能有效下降服務器的壓力。
• 減小網絡帶寬損耗--不管對於網站運營者或者用戶，帶寬都表明着金錢,當Web緩存副本被使用時，只會產生極小的網絡流量，能夠有效的下降運營成本。

【2】缺點

• 若是處理不當，可能會致使服務端代碼更新了，可是用戶卻仍是老頁面。因此前端們要針對項目中各個資源的實際狀況，作出合理的緩存策略。

3、HTTP報文解析

瀏覽器的緩存機制也就是咱們說的HTTP緩存機制，其機制是根據HTTP報文的緩存標識進行的，因此在分析瀏覽器緩存機制以前，咱們先使用圖文簡單介紹一下HTTP報文，HTTP報文分爲兩種：

【1】HTTP請求(Request)報文：報文格式爲：請求行—請求頭—空行—請求報文主體(只有POST纔有報文主體)，以下圖
​
​

【2】HTTP響應(Response)報文：報文格式爲：狀態行—響應頭—空行—響應報文主體，以下圖
​
​

4、緩存過程分析

瀏覽器與服務器通訊的方式爲應答模式，便是：瀏覽器發起HTTP請求 – 服務器響應該請求。那麼瀏覽器第一次向服務器發起該請求後拿到請求結果，會根據響應報文中HTTP頭的緩存標識，決定是否緩存結果，是則將請求結果和緩存標識存入瀏覽器緩存中，簡單的過程以下圖：
​

由上圖咱們能夠知道：

• 瀏覽器每次發起請求，都會先在瀏覽器緩存中查找該請求的結果以及緩存標識
• 瀏覽器每次拿到返回的請求結果都會將該結果和緩存標識存入瀏覽器緩存中

以上兩點結論就是瀏覽器緩存機制的關鍵，他確保了每一個請求的緩存存入與讀取，只要咱們再理解瀏覽器緩存的使用規則，那麼全部的問題就迎刃而解了，本文也將圍繞着這點進行詳細分析。爲了方便你們理解，這裏咱們根據是否須要向服務器從新發起HTTP請求將緩存過程分爲兩個部分，分別是強制緩存和協商緩存 。

5、強制緩存

強制緩存就是向瀏覽器緩存查找該請求結果，並根據該結果的緩存規則來決定是否使用該緩存結果的過程，強制緩存的狀況主要有三種(暫不分析協商緩存過程)，以下：

【1】不存在該緩存結果和緩存標識，強制緩存失效，則直接向服務器發起請求（跟第一次發起請求一致），以下圖：
​

【2】存在該緩存結果和緩存標識，且該結果還沒有失效，強制緩存生效，直接返回該結果，以下圖
​

【3】存在該緩存結果和緩存標識，但該結果已失效，強制緩存失效，則使用協商緩存(暫不分析)，以下圖
​

6、強制緩存的緩存規則是什麼？

當瀏覽器向服務器發起請求時，服務器會將緩存規則放入HTTP響應報文的HTTP頭中和請求結果一塊兒返回給瀏覽器，控制強制緩存的字段分別是Expires和Cache-Control，其中Cache-Control優先級比Expires高。

【1】Expires

Expires是HTTP/1.0控制網頁緩存的字段，其值爲服務器返回該請求結果緩存的到期時間，即再次發起該請求時，若是客戶端的時間小於Expires的值時，直接使用緩存結果。

Q: Expires是HTTP/1.0的字段，可是如今瀏覽器默認使用的是HTTP/1.1，那麼在HTTP/1.1中網頁緩存仍是否由Expires控制？

到了HTTP/1.1，Expire已經被Cache-Control替代，緣由在於Expires控制緩存的原理是使用客戶端的時間與服務端返回的時間作對比，那麼若是客戶端與服務端的時間由於某些緣由（例如時區不一樣；客戶端和服務端有一方的時間不許確）發生偏差，那麼強制緩存則會直接失效，這樣的話強制緩存的存在則毫無心義，那麼Cache-Control又是如何控制的呢？

【2】Cache-Control

在HTTP/1.1中，Cache-Control是最重要的規則，主要用於控制網頁緩存，主要取值爲：

• public：全部內容都將被緩存（客戶端和代理服務器均可緩存）
• private：全部內容只有客戶端能夠緩存，Cache-Control的默認取值
• no-cache：客戶端緩存內容，可是是否使用緩存則須要通過協商緩存來驗證決定
• no-store：全部內容都不會被緩存，即不使用強制緩存，也不使用協商緩存
• max-age=xxx (xxx is numeric)：緩存內容將在xxx秒後失效

接下來，咱們直接看一個例子，以下：
​

由上面的例子咱們能夠知道：

• HTTP響應報文中expires的時間值，是一個絕對值
• HTTP響應報文中Cache-Control爲max-age=600，是相對值

因爲Cache-Control的優先級比expires，那麼直接根據Cache-Control的值進行緩存，意思就是說在600秒內再次發起該請求，則會直接使用緩存結果，強制緩存生效。 注：在沒法肯定客戶端的時間是否與服務端的時間同步的狀況下，Cache-Control相比於expires是更好的選擇，因此同時存在時，只有Cache-Control生效。

7、瀏覽器的緩存存放在哪裏，如何在瀏覽器中判斷強制緩存是否生效？

​
在瀏覽器中的控制檯Network中狀態碼Status爲灰色的請求則表明使用了強制緩存，請求對應的Size值則表明該緩存存放的位置，size欄一般會有三種狀態，分別爲①from memory cache ②from disk cache ③資源自己的大小（eg: 16.4KB）

Q: 何時會使用from disk cache，何時會使用from memory cache呢？

• from memory cache：不訪問服務器，直接讀緩存，從內存中讀取緩存。此時的數據時緩存到內存中的，當kill進程後，也就是瀏覽器關閉之後，數據將不存在。
• from disk cache：不訪問服務器，直接讀緩存，從磁盤中讀取緩存，當kill進程時，數據仍是存在。

舉個栗子：
①訪問博客segmentfault.com/a/119000001… 返回200（從服務器獲取）

​

②關閉該博客的標籤頁，從新打開segmentfault.com/a/119000001… ，返回200(from disk cache）

​

③按F5刷新，返回200(from memory cache)

​

Q: 看到這裏可能有人小夥伴問了，最後一個步驟刷新的時候，不是同時存在着from disk cache和from memory cache嗎？

對於這個問題，咱們須要瞭解內存緩存(from memory cache)和硬盤緩存(from disk cache)，以下

①內存緩存(from memory cache)：內存緩存具備兩個特色，分別是快速讀取和時效性：

• 快速讀取：內存緩存會將編譯解析後的文件，直接存入該進程的內存中，佔據該進程必定的內存資源，以方便下次運行使用時的快速讀取。
• 時效性：一旦該進程關閉，則該進程的內存則會清空。

②硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，讀取緩存須要對該緩存存放的硬盤文件進行I/O操做，而後從新解析該緩存內容，讀取複雜，速度比內存緩存慢。

在瀏覽器中，瀏覽器會在js和圖片等文件解析執行後直接存入內存緩存中，那麼當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬盤文件中，因此每次渲染頁面都須要從硬盤讀取緩存(from disk cache)。

8、瀏覽器讀取緩存的順序（memory –> disk）

1. 先去內存看，若是有，直接加載
2. 若是內存沒有，擇取硬盤獲取，若是有直接加載
3. 若是硬盤也沒有，那麼就進行網絡請求
4. 加載到的資源緩存到硬盤和內存

9、協商緩存

協商緩存就是強制緩存失效後，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識判斷該資源是否進行了修改，再決定使用緩存資源仍是從新返回資源，主要有如下兩種狀況：

【1】協商緩存生效，返回304，以下
​

【2】協商緩存失效，返回200和請求結果結果，以下
​

一樣，協商緩存的標識也是在響應報文的HTTP頭中和請求結果一塊兒返回給瀏覽器的，控制協商緩存的字段分別有：Last-Modified / If-Modified-Since / Etag / If-None-Match，注：Etag / If-None-Match優先級高於Last-Modified / If-Modified-Since，同時存在則只有Etag / If-None-Match生效。

​

【1】Last-Modified：是服務器響應請求時，返回該資源文件在服務器最後被修改的時間

【2】If-Modified-Since：是客戶端再次發起該請求時，攜帶上次請求返回的Last-Modified值，經過此字段值告訴服務器該資源上次請求返回的最後被修改時間。服務器收到該請求，發現請求頭含有If-Modified-Since字段，則會根據If-Modified-Since的字段值與該資源在服務器的最後被修改時間作對比，若服務器的資源最後被修改時間大於If-Modified-Since的字段值，則從新返回資源，狀態碼爲200；不然則返回304，表明資源無更新，可繼續使用緩存文件

【3】Etag：是服務器響應請求時，返回當前資源文件的一個惟一標識(由服務器生成)

【4】If-None-Match：是客戶端再次發起該請求時，攜帶上次請求返回的惟一標識Etag值，經過此字段值告訴服務器該資源上次請求返回的惟一標識值。服務器收到該請求後，發現該請求頭中含有If-None-Match，則會根據If-None-Match的字段值與該資源在服務器的Etag值作對比，一致則返回304，表明資源無更新，繼續使用緩存文件；不一致則從新返回資源文件，狀態碼爲200

總結

強制緩存優先於協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那麼表明該請求的緩存失效，從新獲取請求結果，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存，主要流程程以下：

​