認識瀏覽器快取

瀏覽器快取，也就是客戶端快取,既是網頁效能優化裡面靜態資源相關優化的一大利器，也是無數web開發人員在工作過程不可避免的一大問題。瀏覽器快取分為：強快取和協商快取

（1）原理：

1.瀏覽器載入資源時，先根據這個資源的http header中的cache-control判斷是否命中強快取，如果命中，瀏覽器直接從快取中讀取資源，根本不會向伺服器傳送請求；

2.當強快取沒有命中的時候，瀏覽器則會傳送乙個請求到伺服器，通過資源的http header中的 last-modified 和if-modified-since來判斷資源是否命中協商快取，如果命中，伺服器將會將這個請求返回，但不會返回這個資源的資料，而是告訴客服端可以從快取中載入這個資源；

3.如果資源也沒有命中協商快取的話，瀏覽器直接從伺服器端載入資源資料

（2）共同點與區別：

1.共同點：如果命中，都從客戶端快取中載入這個資源，而不從伺服器端載入；

2.區別：強快取不發請求到伺服器，協商快取發請求到伺服器；

（3）強快取原理

命中強快取，chrome裡的network裡面 status是200，且size會顯示為from disk/memory cache,cache control :max-age:315360000 單位秒，也就是10年

1.瀏覽器第一次跟伺服器請求乙個資源，伺服器在返回這個資源的同時，在respone的header加上cache-control的header

2.瀏覽器接收到這個資源後，會把這個資源連同所有的resoponse header快取下來

3.瀏覽器再次請求這個資源時，會從快取中尋找，找到後，根據它第一次請求時間和cache control設定的有效期，計算乙個過期時間。再拿這個過期時間跟當前請求時間比較，如果當前請求時間在過期時間之前，就能命中快取。否則，就不行。

（4）協商快取原理

如果協商快取命中，請求響應返回的http狀態為304並且會顯示乙個not modified的字串。協商快取是利用的是【last-modified，if-modified-since】

1.瀏覽器第一次跟伺服器請求乙個資源，伺服器在返回這個資源的同時，在respone的header加上last-modified的header，這個header表示這個資源在伺服器上的最後修改時間；

2.瀏覽器再次跟伺服器請求這個資源時，在request的header上加上if-modified-since的header，這個header的值就是上一次請求時返回的last-modified的值；

3.伺服器再次收到資源請求時，根據瀏覽器傳過來if-modified-since和資源在伺服器上的last-modified是否有變化，如果沒有變化則返回304 not modified，但是不會返回資源內容；如果有變化，就正常返回資源內容。

（5）清除客戶端快取的方法

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

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

3.如果用的是chrome，可以f12在network那裡把快取給禁掉 disable cache

4. 給資源加上乙個動態的引數，css/index.css?v=2017032901