一篇文章理解前端緩存

RichardXG 發布于2019-08-02 10:19 / 3278人閱讀

摘要：說起前端緩存，這真是一個百看百懂，百懂百忘的重災區。作為一個前端開發，我們一般不控制緩存，它對我們來說是透明的。名字解析工欲善其事必先利其器，在分析整個緩存流程之前，先明確常見的緩存名詞。它是一個通用頭，能分別在請求報文和響應報文中使用。

說起前端緩存，這真是一個百看百懂，百懂百忘的重災區。每次看的時候都覺得自己懂了，但是過兩天又忘了。究其原因，緩存對前端來說很重要，但是控制權卻是在瀏覽器和服務器手上。作為一個前端開發，我們一般不控制緩存，它對我們來說是透明的。但是這不是我們忘記的理由。為了拯救我自己于水火之中，所以寫了這篇文章，期望于達到“一看就懂，至死不忘”的地步。

1. 名字解析

工欲善其事必先利其器，在分析整個緩存流程之前，先明確常見的緩存名詞。

1.1 Expires

Expires: HTTP 1.0的規范。用來告訴瀏覽器這個資源的過期時間。

例如： Expires:Sun, 29 Apr 2018 14:21:43 GMT

每次請求這個資源時，瀏覽器自動判斷是否超出了這個時間，如果沒有超出，就直接使用緩存(http status:200 from cache)，不發送請求。如果超出，看其他參數的情況。

缺點：由于Expires這個時間是服務器端的時間，如果客戶端的時間和服務器端的時間有誤差，那么Expires就沒什么用了。

1.2 Cache-Control

Cache-Control: HTTP 1.1規范。用來定義緩存的過期時間。

Expires有服務器時間和瀏覽器時間不統一的問題，所以HTTP 1.1新定義了Cache-Control。它是一個通用HTTP頭，能分別在請求報文和響應報文中使用。例如：

Cache-Control有很多值可以設置，在這里只介紹兩個最常用的。

Cache-Control: no-cache // 瀏覽器不緩存, 返回的結果要看其他參數的情況

Cache-Control: max-age=600 // 數字，秒，表示瀏覽器緩存10分鐘，這段時間內即使服務器資源有修改，瀏覽器也不會改變，這段時間內請求，http status是200 from cache

當Cache-Control和Expires同時存在時，Cache-Control會覆蓋Expires。可以這么記憶，HTTP 1.1的新生代比老的HTTP 1.0總要有更多的優勢。

缺點：沒有缺點。

1.3 ETag

ETag: HTTP 1.1規范。服務器通過算法計算出的資源唯一標志符（類同Md5碼）。

例如：ETag:"d9f096d1f708c35fdd9c78bd422883cc"

Expires和Cache-Control只決定了瀏覽器是否要發送請求到服務器，并沒有決定服務器是否要返回資源。決定服務器操作的是另外兩個HTTP頭，ETag和Last-Modified。

瀏覽器在第一次請求時會保留ETag的值，并在下一次請求時通過If-None-Match或If-Match兩個請求頭將ETag傳給服務器。服務器傳來的ETag跟自己的ETag是否一致，就能清楚的知道是否要給瀏覽器新的資源文件。如果兩者一致，則http response返回空響應(http status:304)，否則，返回新的資源(http status:200)

缺點：沒有缺點。

1.4 Last-Modified

Last-Modified: HTTP 1.1規范。表示資源在服務器上的最后修改時間。

例如：Last-Modified:Sat, 28 Apr 2018 03:08:34 GMT

瀏覽器在第一次請求時會保留Last-Modified的值，并在下一次請求時通過If-Modified-Since或If-Unmodified-Since兩個請求頭將Last-Modified傳給服務器。服務器比對兩個Last-Modified是否一致。如果兩者一致，則http response返回空響應(http status:304)，否則，返回新的資源(http status:200)

唔，這貨與ETag簡直一模一樣有沒有。真的是簡單的一塌糊涂呢，可惡……=_="Last-Modified和Etag都存在的情況，它們要都符合才能返回304。這也很好理解，都是HTTP1.1的小兄弟，大家權利要統一。

缺點：如果這個資源在服務器上被修改了，但是最后的內容卻沒有變。這時候Last-Modified就匹配不上了，相當于多返回了一個相同的資源文件，浪費了流量。

2. 緩存判斷順序

上面已經說過以下三條規則：

Expires和Cache-Control決定了瀏覽器是否要發送請求到服務器，ETag和Last-Modified決定了服務器是要返回304+空內容還是新的資源文件

Expires和Cache-Control同時存在時，Cache-Control會覆蓋Expires

ETag和Last-Modified同時存在時，兩者都要滿足才會返回304

所以，緩存判斷順序可以簡單的理解為：

 1. 先判斷Cache-Control，在Cache-Control的max-age之內，直接返回200 from cache
 2. 沒有Cache-Control再判斷Expires，再Expires之內，直接返回200 from cache
 3. Cache-Control=no-cache或者不符合Expires，瀏覽器向服務器發送請求
 4. 服務器同時判斷ETag和Last-Modified，都一致，返回304，有任何一個不一致，返回200

3. 總結

弄清楚它們的關系之后，是不是賊簡單，媽媽再也不用擔心我的緩存啦！好冷的笑話（手動滑稽臉）

參考文檔

《淺談瀏覽器http的緩存機制》

GPU云服務器云服務器怎么理解前端工程師免費云緩存試用一年云緩存一年多少錢篇文章

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

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

一篇文章理解Web緩存

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

tangr206 2019-08-06 13:35 評論0 收藏0
一篇文章理解Web緩存

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

zlyBear 2019-08-23 10:30 評論0 收藏0
一篇文章理解前端緩存

摘要：說起前端緩存，這真是一個百看百懂，百懂百忘的重災區。作為一個前端開發，我們一般不控制緩存，它對我們來說是透明的。名字解析工欲善其事必先利其器，在分析整個緩存流程之前，先明確常見的緩存名詞。它是一個通用頭，能分別在請求報文和響應報文中使用。說起前端緩存，這真是一個百看百懂，百懂百忘的重災區。每次看的時候都覺得自己懂了，但是過兩天又忘了。究其原因，緩存對前端來說很重要，但是控制權卻是在瀏...

Scliang 2019-08-26 11:51 評論0 收藏0
一篇文章理解前端緩存

摘要：說起前端緩存，這真是一個百看百懂，百懂百忘的重災區。作為一個前端開發，我們一般不控制緩存，它對我們來說是透明的。名字解析工欲善其事必先利其器，在分析整個緩存流程之前，先明確常見的緩存名詞。它是一個通用頭，能分別在請求報文和響應報文中使用。說起前端緩存，這真是一個百看百懂，百懂百忘的重災區。每次看的時候都覺得自己懂了，但是過兩天又忘了。究其原因，緩存對前端來說很重要，但是控制權卻是在瀏...

yiliang 2019-08-06 13:31 評論0 收藏0
前端基礎

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

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