瀏覽器緩存看這一篇就夠了

tinysun1234 發布于2019-08-06 13:42 / 2126人閱讀

摘要：瀏覽器緩存作為性能優化的重要一環，對于前端而言，重要性不言而喻。根據瀏覽器發送的修改時間和服務端的修改時間進行比對，一致的話代表資源沒有改變，服務端返回正文為空的響應，讓瀏覽器中緩存中讀取資源，這就大大減小了請求的消耗。

瀏覽器緩存作為性能優化的重要一環，對于前端而言，重要性不言而喻。以前總是一知半解的，所以這次好好整理總結了一下。

1、緩存機制

首先我們來總體感知一下它的匹配流程，如下：

瀏覽器發送請求前，根據請求頭的expires和cache-control判斷是否命中（包括是否過期）強緩存策略，如果命中，直接從緩存獲取資源，并不會發送請求。如果沒有命中，則進入下一步。

沒有命中強緩存規則，瀏覽器會發送請求，根據請求頭的last-modified和etag判斷是否命中協商緩存，如果命中，直接從緩存獲取資源。如果沒有命中，則進入下一步。

如果前兩步都沒有命中，則直接從服務端獲取資源。

2、強緩存

強緩存：不會向服務器發送請求，直接從緩存中讀取資源。

2.1 強緩存原理

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

第一次請求，不存在緩存結果和緩存標識，直接向服務器發送請求

存在緩存標識和緩存結果，但是已經失效，強制緩存是啊比，則使用協商緩存（暫不分析）

存在該緩存結果和緩存標識，且該結果尚未失效，強制緩存生效，直接返回該結果

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

2.1.1、 Expires

緩存過期時間，用來指定資源到期的時間，是服務器端的具體的時間點。也就是說，Expires=max-age + 請求時間，需要和Last-modified結合使用。Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。

Expires 是 HTTP/1 的產物，受限于本地時間，如果修改了本地時間，可能會造成緩存失效。

2.1.2、 Cache-Control

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

public：所有內容都將被緩存（客戶端和代理服務器都可緩存）

private：所有內容只有客戶端可以緩存，Cache-Control的默認取值

no-cache：客戶端緩存內容，但是是否使用緩存則需要經過協商緩存來驗證決定

no-store：所有內容都不會被緩存，即不使用強制緩存，也不使用協商緩存

max-age=xxx (xxx is numeric)：緩存內容將在xxx秒后失效

需要注意的是，no-cache這個名字有一點誤導。設置了no-cache之后，并不是說瀏覽器就不再緩存數據，只是瀏覽器在使用緩存數據時，需要先確認一下數據是否還跟服務器保持一致，也就是協商緩存。而no-store才表示不會被緩存，即不使用強制緩存，也不使用協商緩存

2.1.3、設置

強緩存需要服務端設置expires和cache-control。
nginx代碼參考，設置了一年的緩存時間：

location ~ .*.(ico|svg|ttf|eot|woff)(.*) {
  proxy_cache               pnc;
  proxy_cache_valid         200 304 1y;
  proxy_cache_valid         any 1m;
  proxy_cache_lock          on;
  proxy_cache_lock_timeout  5s;
  proxy_cache_use_stale     updating error timeout invalid_header http_500 http_502;
  expires                   1y;
}

瀏覽器的緩存存放在哪里，如何在瀏覽器中判斷強制緩存是否生效？這就是下面我們要講到的from disk cache和from memory cache。

2.2、from disk cache和from memory cache

細心地同學在開發的時候應該注意到了Chrome的網絡請求的Size會出現三種情況from disk cache(磁盤緩存)、from memory cache(內存緩存)、以及資源大小數值。

狀態	類型	說明
200	form memory cache	不請求網絡資源，資源在內存當中，一般腳本、字體、圖片會存在內存當中
200	form disk ceche	不請求網絡資源，在磁盤當中，一般非腳本會存在內存當中，如css等
200	資源大小數值	從服務器下載最新資源
304	報文大小	請求服務端發現資源沒有更新，使用本地資源

瀏覽器讀取緩存的順序為memory –> disk。
以訪問https://github.com/xiangxingchen/blog為例
我們第一次訪問時https://github.com/xiangxingchen/blog

關閉標簽頁，再此打開https://github.com/xiangxingchen/blog時

F5刷新時

簡單的對比一下

3、協商緩存

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

協商緩存生效，返回304和Not Modified

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

3.1、Last-Modified和If-Modified-Since

瀏覽器首先發送一個請求，讓服務端在response header中返回請求的資源上次更新時間，就是last-modified，瀏覽器會緩存下這個時間。

然后瀏覽器再下次請求中，request header中帶上if-modified-since:[保存的last-modified的值]。根據瀏覽器發送的修改時間和服務端的修改時間進行比對，一致的話代表資源沒有改變，服務端返回正文為空的響應，讓瀏覽器中緩存中讀取資源，這就大大減小了請求的消耗。

由于last-modified依賴的是保存的絕對時間，還是會出現誤差的情況：

保存的時間是以秒為單位的，1秒內多次修改是無法捕捉到的；

各機器讀取到的時間不一致，就有出現誤差的可能性。為了改善這個問題，提出了使用etag。

3.2、ETag和If-None-Match

etag是http協議提供的若干機制中的一種Web緩存驗證機制，并且允許客戶端進行緩存協商。生成etag常用的方法包括對資源內容使用抗碰撞散列函數，使用最近修改的時間戳的哈希值，甚至只是一個版本號。和last-modified一樣.

瀏覽器會先發送一個請求得到etag的值，然后再下一次請求在request header中帶上if-none-match:[保存的etag的值]。

通過發送的etag的值和服務端重新生成的etag的值進行比對，如果一致代表資源沒有改變，服務端返回正文為空的響應，告訴瀏覽器從緩存中讀取資源。

etag能夠解決last-modified的一些缺點，但是etag每次服務端生成都需要進行讀寫操作，而last-modified只需要讀取操作，從這方面來看，etag的消耗是更大的。

二者對比

精確度上：Etag要優于Last-Modified。

優先級上：服務器校驗優先考慮Etag。

性能上：Etag要遜于Last-Modified

4、用戶行為對瀏覽器緩存的影響

打開網頁，地址欄輸入地址：查找 disk cache 中是否有匹配。如有則使用；如沒有則發送網絡請求。

普通刷新 (F5)：因為 TAB 并沒有關閉，因此 memory cache 是可用的，會被優先使用(如果匹配的話)。其次才是 disk cache。

強制刷新 (Ctrl + F5)：瀏覽器不使用緩存，因此發送的請求頭部均帶有 Cache-control:no-cache(為了兼容，還帶了 Pragma:no-cache),服務器直接返回 200 和最新內容。

5、總結

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎star對作者也是一種鼓勵。

GPU云服務器云服務器深度學習看這一篇篇就夠瀏覽器緩存清除瀏覽器緩存

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

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

Spring Boot 2.x（十四）：整合Redis，看這一篇就夠了

摘要：豐富的特性還支持通知過期等等特性。到這個就說明測試通過了。主要針對方法配置，能夠根據方法的請求參數對其進行緩存，常用于查詢操作主要針對方法配置，能夠根據方法的請求參數對其進行緩存，常用于修改操作清空緩存，主要用于刪除操作。 [TOC] Redis簡介 Redis 是一個開源的使用 ANSI C 語言編寫、遵守 BSD 協議、支持網絡、可基于內存亦可持久化的日志型、Key-Value 數...

Miracle 2019-08-19 10:24 評論0 收藏0
JSON入門看這一篇就夠了

摘要：采用完全獨立于任何程序語言的文本格式，使成為理想的數據交換語言為什么需要提到，我們就應該和來進行對比。也是一種存儲和交換文本信息的手段。那么好在哪里呢比更小更快，更易解析。使用的時候，也支持將轉成但是，我們不一定使用框架來做開發呀。什么是JSON JSON：JavaScript Object Notation 【JavaScript 對象表示法】 JSON 是存儲和交換文本信息的語法...

gplane 2019-08-16 11:04 評論0 收藏0
Scrapy詳解爬蟲框架入門看這一篇就夠了！

摘要：目錄前言架構安裝第一個爬蟲爬取有道翻譯創建項目創建創建解析運行爬蟲爬取單詞釋義下載單詞語音文件前言學習有一段時間了，當時想要獲取一下百度漢字的解析，又不想一個個漢字去搜，復制粘貼太費勁，考慮到爬蟲的便利性，這篇文章是介紹一個爬蟲框架，目錄前言架構安裝第一個爬蟲：爬取有道翻譯創建項目創建Item 創建Spider 解析運行爬蟲-爬取單詞釋義下載單詞語音文件 ...

lordharrd 2019-07-31 11:29 評論0 收藏0
Python字符串的格式化，看這一篇就夠了

摘要：相信很多人在格式化字符串的時候都用的語法，提出一種更先進的格式化方法并成為的標準用來替換舊的格式化語法，從開始已經實現了這一方法其它解釋器未考證。 showImg(https://segmentfault.com/img/remote/1460000018650325); 相信很多人在格式化字符串的時候都用%s % v的語法，PEP 3101 提出一種更先進的格式化方法 str.for...

BDEEFE 2019-07-31 10:13 評論0 收藏0