瀏覽器快取淺談（強快取與協商快取的認知）

        談到快取時，大家想到的可能有瀏覽器快取、CDN快取、伺服器快取等，而瀏覽器快取則是與我們前端開發最密切相關的，有時為了考慮使用者體驗以及網站效能優化，通常我們會考慮在瀏覽器快取上做一定的優化，下面就談談我對瀏覽器快取的基本認知。

我們通常所說的瀏覽器快取，通常分為強快取和協商快取兩種：

1.強快取和協商快取

①瀏覽器在載入資源的時候會根據這個資源的一些http header判斷它是否命中強快取。如果命中了強快取，瀏覽器就直接從快取中載入這個資源，連請求都不會傳送到網頁所在的伺服器。

②當強快取沒有命中時，瀏覽器會傳送一個請求到伺服器，伺服器端依據資源的另一些http header驗證是否命中協商快取。若命中，伺服器將這個請求返回，但不會返回這個資源的資料，而是告訴客戶端可以直接從快取中載入這個資源，於是瀏覽器就自己從自己的快取中載入這個資源。

③當協商快取沒有命中的時候，瀏覽器直接從伺服器載入資源資料。

2.1 強快取的原理

命中強快取後http狀態碼： 200

network裡面的size顯示from cache

http1.0：Expires

http2.0：Cache-Control

上面這兩個header可以只啟用一個或者兩個都使用。兩個同時存在時Cache-control的優先順序高於Expires

2.2 強快取的管理

可以通過兩種方式設定強快取：

① 通過程式碼的方式，在web伺服器返回的響應中新增Expires和Cache-control Header

② 通過配置web伺服器的方式，讓web伺服器在響應資源的時候統一新增Expires和Cache-control Header

2.3 由於在開發的時候不會專門去配置強快取，而瀏覽器又預設會快取圖片、css和js等靜態資源，所以開發環境下經常會因為強快取導致資源沒有及時更新而看不到最新的效果，解決這個問題的方法有很多，常用的有以下幾種：

① ctrl+F5

② 使用瀏覽器的隱私模式開發

③ 如果用的是chrome瀏覽器的話，可以f12在network裡面把快取禁掉。

④ 給資源加上一個動態的引數，例如時間戳

⑥ 如果ajax請求存在快取 可以在請求的位址列追加隨機數或者時間戳

⑦ 動態設定iframe時也可能會出現快取問題，也可以在src後面動態新增時間戳或者隨機數解決

2.4 強快取的應用

① 強快取是前端效能優化最有利的工具。對於有大量今天資源的網站，一定要利用強快取，提高響應速度。

通常做法：將靜態資源全部配置一個超時時間超長的Expires或Cache-Control。

3.1 協商快取的原理

協商快取狀態碼： 304 （Not Modified）

會顯示資源的大小

從瀏覽器快取中載入資源，但是會和web伺服器通訊，web伺服器返回告知其在瀏覽器快取中載入資源。

① 瀏覽器第一次跟伺服器請求一個資源的時候，伺服器在返回這個資源的同時，在response的header上加上Last-Modified的header

② 瀏覽器再次請求這個資源的時候，請求頭上加上If-Modified-Since的header，這個header的值就是上一次請求返回時的Last-Modified的值

③伺服器再次收到資源請求時，根據瀏覽器傳過來If-Modified-Since和資源在伺服器上的最後修改時間判斷資源是否有變化，如果沒有變化則返回304 Not Modified，但是不會返回資源內容；如果有變化，就正常返回資源內容。當伺服器返回304 Not Modified的響應時，response header中不會再新增Last-Modified的header，因為既然資源沒有變化，那麼Last-Modified也就不會改變，

3.2 協商快取的管理

強快取由於不發請求到伺服器，所以不知道資源的更新，協商快取會發請求到伺服器，伺服器知道支援的更新。大部分的web伺服器都預設開啟協商快取。

1）當ctrl+f5強制重新整理網頁時，直接從伺服器載入，跳過強快取和協商快取；

2）當f5重新整理網頁時，跳過強快取，但是會檢查協商快取；