前端效能優化有很多方式，今天我們主要學習下關於瀏覽器快取的一些知識。

客戶端快取：

session

localStorage (需要注意安全問題，防篡改)

cookie (資料儲存儘量不要使用這種方式存放，請求時會增加頭部重量)

圖片採用wbp 格式，佔用體積小。

瀏覽器快取

作用：

1. 減少冗餘的資料傳輸
2. 減少伺服器負擔
3. 加快客戶端載入網頁的速度

當客戶端向瀏覽器傳送請求的時候，如果沒有快取則直接請求伺服器。如果有則根據快取狀態來是否從快取中獲取對應的檔案。

• 強制快取

利用Expires和Cache-Control兩個欄位來控制

expires:是快取過期時間（即資源過期時間），是個絕對值。所以如果客戶端更改時間，會導致快取混亂。所以http:1.1增加了cache-control：max-age 欄位,它是一個相對的時間。

Cache-Control與Expires可以在服務端配置同時啟用，同時啟用的時候Cache-Control優先順序高。

Control:max-age=3600，代表著資源的有效期是3600秒

1. no-cache：不使用本地快取。需要使用快取協商，先與伺服器確認返回的響應是否被更改，如果之前的響應中存在ETag，那麼請求的時候會與服務端驗證，如果資源未被更改，則可以避免重新下載。
2. no-store：直接禁止遊覽器快取資料，每次使用者請求該資源，都會向伺服器傳送一個請求，每次都會下載完整的資源。
3. public：可以被所有的使用者快取，包括終端使用者和CDN等中間代理伺服器。
4. private：只能被終端使用者的瀏覽器快取，不允許CDN等中繼快取伺服器對其快取。
    

• 協商快取

普通重新整理會啟動弱快取（即協商快取），忽略強快取。

      協商快取涉及到兩組header 欄位。

    Etag和If-None-Match

    Last-Modified和If-Modified-Since

• Etag和If-None-Match

他們返回的是一個校驗碼，是個hash值。Etag能夠保證資源都是唯一的，是客戶端請求伺服器的時候伺服器返回的。如果

資源變化了Etag 也會發生變化。當再次請求伺服器的時候服務器根據瀏覽器上送的If-None-Match（之前伺服器返回的etag值）值來判斷是否命中快取。

• Last-Modified和If-Modified-Since

瀏覽器第一次請求一個資源的時候，伺服器返回的header中會加上Last-Modify，Last-modify是一個時間標識該資源的最後修改時間，例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。

當瀏覽器再次請求該資源時，request的請求頭中會包含If-Modify-Since，該值為快取之前返回的Last-Modify。伺服器收到If-Modify-Since後，根據資源的最後修改時間判斷是否命中快取。

如果命中快取，則返回304，並且不會返回資源內容，並且不會返回Last-Modify。

Last-Modified與ETag是可以一起使用的，服務器會優先驗證ETag，一致的情況下，才會繼續比對Last-Modified，最後才決定是否返回304。

Etag的優勢：

HTTP1.1中Etag的出現主要是為了解決幾個Last-Modified比較難解決的問題：

• 一些檔案也許會週期性的更改，但是他的內容並不改變(僅僅改變的修改時間)，這個時候我們並不希望客戶端認為這個檔案被修改了，而重新GET；
• 某些檔案修改非常頻繁，比如在秒以下的時間內進行修改，(比方說1s內修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)；
• 某些伺服器不能精確的得到檔案的最後修改時間。