前端緩存問題

1、前言

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

        緩存能夠說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略能夠縮短網頁請求資源的距離，減小延遲，而且因爲緩存文件能夠重複利用，還能夠減小帶寬，下降網絡負荷。

        對於一個數據請求來講，能夠分爲發起網絡請求、後端處理、瀏覽器響應三個步驟。瀏覽器緩存能夠幫助咱們在第一和第三步驟中優化性能。好比說直接使用緩存而不發起請求，或者發起了請求但後端存儲的數據和前端一致，那麼就沒有必要再將數據回傳回來，這樣就減小了響應數據。

 

緩存類型圖解

2、緩存過程分析

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

 

 

由上圖咱們能夠知道：

        瀏覽器每次發起請求，都會先在瀏覽器緩存中查找該請求的結果以及緩存標識

        瀏覽器每次拿到返回的請求結果都會將該結果和緩存標識存入瀏覽器緩存中

三 強制緩存

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

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

 

 

②存在該緩存結果和緩存標識，但該結果已失效，強制緩存失效，則使用協商緩存，以下圖

 

 

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

 

 

那麼強制緩存的緩存規則是什麼？

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

Expires

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

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

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生效。

瞭解強制緩存的過程後，咱們進行下一步思考：瀏覽器的緩存存放在哪裏，如何在瀏覽器中判斷強制緩存是否生效？

 

 

        這裏咱們以博客的請求爲例，狀態碼爲灰色的請求則表明使用了強制緩存，請求對應的Size值則表明該緩存存放的位置，分別爲from memory cache 和 from disk cache。那麼from memory cache 和 from disk cache又分別表明的是什麼呢？何時會使用from disk cache，何時會使用from memory cache呢？

from memory cache表明使用內存中的緩存，from disk cache則表明使用的是硬盤中的緩存，瀏覽器讀取緩存的順序爲memory –> disk –> 服務器請求。

那麼接下來咱們一塊兒詳細分析一下緩存讀取問題，這裏仍讓以個人博客爲例進行分析：

首次訪問頁面

 

 

關閉博客的標籤頁，從新打開頁面

 

 

刷新頁面

 

 

內存緩存(from memory cache)：內存緩存具備兩個特色，分別是速度快和時間限制。

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

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

四 協商緩存

        協商緩存就是強制緩存失效後，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程，主要有如下兩種狀況：

①協商緩存生效，返回304，以下

 

 

②協商緩存失效，返回200和請求結果結果，以下

 

 

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

Last-Modified / If-Modified-Since

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

 

 

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

 

 

Etag / If-None-Match

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

 

 

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

 

 

注：Etag / If-None-Match優先級高於Last-Modified / If-Modified-Since，同時存在則只有Etag / If-None-Match生效。對於協商緩存，使用 Ctrl+F5強制刷新可使得緩存無效。可是對於強緩存，在未過時時，必須更新資源路徑才能發起新的請求（更改了路徑至關因而另外一個資源了，這也是前端工程化中經常使用到的技巧）。

總結

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

 

 

五 瀏覽器緩存

5.1 本地存儲小容量

Cookie主要用於用戶信息的存儲，Cookie的內容能夠自動在請求的時候被傳遞給服務器。

LocalStorage的數據將一直保存在瀏覽器內，直到用戶清除瀏覽器緩存數據爲止。

SessionStorage的其餘屬性同LocalStorage，只不過它的生命週期同標籤頁的生命週期，當標籤頁被關閉時，SessionStorage也會被清除。

 

 

5.2 本地存儲大容量

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

 

 

5.3 往返緩存

        往返緩存又稱爲BFCache，是瀏覽器在前進後退按鈕上爲了提高歷史頁面的渲染速度的一種策略。該策略具體表現爲，當用戶前往新頁面時，將當前頁面的瀏覽器DOM狀態保存到bfcache中；當用戶點擊後退按鈕的時候，將頁面直接從bfcache中加載，節省了網絡請求的時間。

做者：Tmasz 連接：https://www.jianshu.com/p/256d0873c398 來源：簡書 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。