前端測試同學測試過程中經常會聽開發同學說「應該是快取導致的，等會吧」，或者「有快取，清一下快取吧」。為了不被開發同學忽悠，最近查閱了一些關於瀏覽器快取的資料。接下來總結一下學習所得。
通過網路獲取內容速度慢且開銷大。較大的響應需要在客戶端和伺服器之間進行多次通訊，這也會延遲瀏覽器獲得和處理內容的時間，還會增加訪問者的流量。所以快取並且重複利用之前獲取的資源，對於前端效能是非常重要的部分。
每個瀏覽器都自帶了http快取實現功能。只需要保證每個伺服器響應都提供正確的http head。
pragma：可以在html檔案的head中設定（如下**），也可以在請求標頭檔案中設定-------主要用來禁用快取
expires: fri, 11 jun 2021 11:33:01 gmt當前時間在expires設定的時間之前時，都是用快取裡的時間注意：pragma的優先順序高於expires，也就是如果pragma設定了禁用快取，無論expires是否設定都視為無效
存在的問題：expires所定義的魂村時間是相對於伺服器上的時間而言的，如果客戶端上的時間和伺服器上的時間不一致，那設定快取就沒有什麼意義了。所以http1.1中有更好的快取方式。
cache-control是乙個通用的首部字段，它能分別在請求報文和響應報文中使用。優先順序：pragma>cache-control>expires.
作為請求首部時，cache-control的可選值為：
作為響應首部時，cache-control的可選值為：
cache-control允許自由組合，但是有些欄位是互斥的，比如no-cache不能和max-age、max-stale一起使用。
cache-control首部欄位是決定客戶端是否向伺服器端發起請求的，還是直接使用本地的快取。為了讓客戶端和伺服器之間實現快取檔案是否更新的驗證、提公升快取的復用率，http1.1新增了幾個首部字段。
last-modified-----客戶端從伺服器獲取的資源時，會降資源最後更改時間記錄在last-modified與資源一起獲得。
注意：傳遞標記最終修改時間的請求報文首部欄位有兩個：
a) if-modified-since-----這個字段告訴伺服器如果客戶端傳來的最後修改時間與伺服器一直，則返回304使用者訪問和重新整理瀏覽器的手段分為三類：b) if-unmodified-since-----若未與最後修改時間匹配，則返回412. 這裡有個問題，如果資源被修改了，但是內容未被修改過，因為最後修改時間未匹配上，還是會重新去伺服器請求，浪費資源。
2. etag-----為了解決資源被修改而內容未被修改過得情況，新增了此字段。它是乙個唯一識別符號。
格式：etag:
a573896f0f505c429da145a364aeeeac
客戶端在下一次請求時帶上該欄位去向伺服器請求，伺服器只需驗證etag的值是否一致。（注意：相同的內容即使資源被修改，etag的值不變）
1.輸入uri然後回車如下圖，伺服器返回狀態碼為200 ok （from disk cache），瀏覽器發現資源已經快取且未過期（通過etag或last-modified頭部欄位來判斷），直接使用了快取裡的資源（從date時間可以看出，之前請求並快取的時間）。
所以該請求的size是from disk cache，如下圖：
按f5和直接輸入uri回車不一樣，f5會讓瀏覽器發乙個http請求給伺服器，即使之前的響應中有expires頭部。瀏覽器通過if-modified-since欄位來判斷該資源是否已經被修改了，如果沒有被修改則返回304（not modified），這樣的響應資訊很小，網頁很快就重新整理完成了。
3. ctrl+f5
這種行為相當於要求瀏覽器從伺服器端重新獲取乙份新的資源，所以不光是要傳送請求給伺服器端，而且這個請求裡面的if-modified-since/if-none-match都要去掉，不允許伺服器返回304，而是返回200。具體請求頭見下圖：
大家也可以看到在ctrl+f5請求的資源的請求頭中，chrome瀏覽器是帶上了cache-control:no-cache的，保證資源一定不是從快取來的，而是從服務端重新獲取的。
快取 瀏覽器快取
瀏覽器快取 brower caching 是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存，當訪問者再次訪問同一頁面時，瀏覽器就可以直接從本地磁碟載入文件 1 瀏覽器第一次請求時，會發出一組 http 頭，用來指導瀏覽器如何進行快取。伺服器規定乙個資源是否要進行快取，主要由響應頭中的expires...
瀏覽器快取
1.為什麼使用瀏覽器快取 以前了解的動態指令碼加速，或者動態內容快取之類，他們的原理都是避免伺服器重複計算，結果仍保留在伺服器端，這樣獲取資料還得從伺服器檢索然後傳送到使用者瀏覽器，如果我們把這些結果放在瀏覽器中，就省去了伺服器的查詢和網路傳輸，瀏覽器快取很好的實現了這個功能 2.瀏覽器快取存放在哪...
瀏覽器快取
瀏覽器快取知識歸納 瀏覽器快取是提公升網頁效能的一大利器，但是，也是一把雙刃劍。利用的好網頁的效能會有大幅度提公升，伺服器的壓力也會減小。利用的不好，也會遇到很多的問題。本文結合瀏覽器快取的知識，結合真實案例進行分析，希望對讀者有所幫助。瀏覽器快取分類 瀏覽器快取分為強快取和協商快取，瀏覽器載入乙個...