?內(nèi)容出自前端性能優(yōu)化原理與實(shí)踐，我作為筆記簡單記錄下。
瀏覽器緩存機(jī)制有四個(gè)方面，
????Memory Cache
????Service Worker Cache
????HTTP Cache
????Push Cache
HTTP 緩存機(jī)制探秘
????HTTP 緩存分為強(qiáng)緩存和協(xié)商緩存。優(yōu)先級(jí)較高的是強(qiáng)緩存伐厌，在命中強(qiáng)緩存失敗的情況下，才會(huì)走協(xié)商緩存吹散。
強(qiáng)緩存的特征
????強(qiáng)緩存是利用 http 頭中的 Expires 和 Cache-Control 兩個(gè)字段來控制的弧械。瀏覽器會(huì)根據(jù)其中的 expires 和 cache-control 判斷目標(biāo)資源是否“命中”強(qiáng)緩存，若命中則直接從緩存中獲取資源空民，不會(huì)再與服務(wù)端發(fā)生通信刃唐。
命中強(qiáng)緩存的情況下，返回的 HTTP 狀態(tài)碼為 200 （如下圖）界轩。
強(qiáng)緩存的實(shí)現(xiàn)：從 expires 到 cache-control
實(shí)現(xiàn)強(qiáng)緩存画饥，過去我們一直用?expires 。
當(dāng)服務(wù)器返回響應(yīng)時(shí)浊猾，在 Response Headers 中將過期時(shí)間寫入 expires 字段。像這樣：
expires: Wed, 11 Sep 2019 16:12:18 GMT
????expires 是一個(gè)時(shí)間戳衔彻，試圖再次向服務(wù)器請(qǐng)求資源，瀏覽器就會(huì)先對(duì)比本地時(shí)間和 expires 的時(shí)間戳偷办，如果本地時(shí)間小于 expires 設(shè)定的過期時(shí)間艰额，那么就直接去緩存中取這個(gè)資源。
????expires 是有問題的椒涯，它最大的問題在于對(duì)“本地時(shí)間”的依賴祖搓。如果服務(wù)端和客戶端的時(shí)間設(shè)置可能不同狱意，或者我直接手動(dòng)去把客戶端的時(shí)間改掉，那么 expires 將無法達(dá)到我們的預(yù)期拯欧。
????考慮到 expires 的局限性详囤，HTTP1.1 新增了?Cache-Control?字段來完成 expires 的任務(wù)。
????給 Cache-Control 字段一個(gè)特寫：
cache-control: max-age=31536000
?????max-age 是 31536000 秒镐作，它意味著該資源在 31536000 秒以內(nèi)都是有效的
????Cache-Control 相對(duì)于 expires 更加準(zhǔn)確纬纪，它的優(yōu)先級(jí)也更高
協(xié)商緩存：瀏覽器與服務(wù)器合作之下的緩存策略
????協(xié)商緩存依賴于服務(wù)端與瀏覽器之間的通信。
????協(xié)商緩存機(jī)制下滑肉，瀏覽器需要向服務(wù)器去詢問緩存的相關(guān)信息，進(jìn)而判斷是重新發(fā)起請(qǐng)求摘仅、下載完整的響應(yīng)靶庙，還是從本地獲取緩存的資源。
????如果服務(wù)端提示緩存資源未改動(dòng)（Not Modified）娃属，資源會(huì)被重定向到瀏覽器緩存六荒，這種情況下網(wǎng)絡(luò)請(qǐng)求對(duì)應(yīng)的狀態(tài)碼是 304（如下圖）。
????協(xié)商緩存的實(shí)現(xiàn)：從 Last-Modified 到 Etag
????Last-Modified 是一個(gè)時(shí)間戳矾端，如果我們啟用了協(xié)商緩存掏击，它會(huì)在首次請(qǐng)求時(shí)隨著 Response Headers 返回：
????Last-Modified: Fri, 27 Oct 2017 06:35:57 GMT
????使用 Last-Modified 存在一些弊端，這其中最常見的就是這樣兩個(gè)場景：
????1.我們編輯了文件秩铆，但文件的內(nèi)容沒有改變砚亭。
? ? 2.當(dāng)我們修改文件的速度過快時(shí)（比如花了 100ms 完成了改動(dòng)），由于 If-Modified-Since 只能檢查到以秒為最小計(jì)量單位的時(shí)間差殴玛，所以它是感知不到這個(gè)改動(dòng)的
????這兩個(gè)場景其實(shí)指向了同一個(gè) bug——服務(wù)器并沒有正確感知文件的變化捅膘。為了解決這樣的問題，Etag 作為 Last-Modified 的補(bǔ)充出現(xiàn)了滚粟。
????Etag 是由服務(wù)器為每個(gè)資源生成的唯一的標(biāo)識(shí)字符串寻仗，這個(gè)標(biāo)識(shí)字符串是基于文件內(nèi)容編碼的
????Etag 在感知文件變化上比 Last-Modified 更加準(zhǔn)確，優(yōu)先級(jí)也更高凡壤。當(dāng) Etag 和 Last-Modified 同時(shí)存在時(shí)署尤，以 Etag 為準(zhǔn)。
MemoryCache
????MemoryCache亚侠，是指存在內(nèi)存中的緩存曹体。它是瀏覽器最先嘗試去命中的一種緩存。
其他緩存自行百度
