關(guān)于瀏覽器緩存最詳細(xì)解析

簡述

瀏覽器緩存即 http 緩存，將請求過的數(shù)據(jù)（html、css、js）存在瀏覽器（本地磁盤）中，當(dāng)再次訪問這些資源時可以從本地直接加載，減少服務(wù)端請求

服務(wù)端通過設(shè)置 http 響應(yīng)頭來決定緩存策略（緩存方式）

緩存流程

第一次請求需要的資源，服務(wù)器返回資源的同時在 response hearder 響應(yīng)頭中添加了緩存策略，告訴瀏覽器緩存規(guī)則（比如以何種方式緩存，緩存信息。。.。。.），此時就進(jìn)行緩存了

第二次如果是請求相同資源，那么就會檢查緩存里面是否有相應(yīng)資源，有的話直接取用，具體方式請看后續(xù)

緩存位置

先談?wù)劸彺娑紩嬖谀?，然后引出緩存方式進(jìn)一步說明

Service Worker

可以讓我們自由控制緩存哪些文件、如何匹配/讀取緩存，并且緩存是持續(xù)性的

離線緩存調(diào)用的就是 Service Worker

Memory Cache

內(nèi)存中的緩存，關(guān)閉頁面就會失效

Disk Cache

硬盤中的緩存

資源存進(jìn)硬盤的情況

大文件（大概率）

此時內(nèi)存利用率較高

Push Cache

推送緩存：以上三種緩存都沒命中時，才啟用

它只在會話（Session）中存在，會話結(jié)束就會釋放，緩存時間很短

如果以上四種緩存都沒被命中，就只能發(fā)起請求了。所以為了性能考慮，選擇好緩存方式極為重要

緩存方式

緩存方式就兩種

強(qiáng)緩存（默認(rèn)優(yōu)先）

協(xié)商緩存（協(xié)商，也就是商量的意思）

先介紹一個響應(yīng)頭中重要的值 Cache-Control，用于控制網(wǎng)頁緩存，有如下主要取值

public：響應(yīng)可以被客戶端和代理服務(wù)器緩存

private（默認(rèn)取值）：響應(yīng)只有客戶端可以緩存

no-cache：直接進(jìn)入?yún)f(xié)商緩存階段

no-store：不進(jìn)行任何緩存

max-age = xxx（xxx 代表數(shù)字）：緩存內(nèi)容在 xxx 時間后失效

must-revalidate：告訴瀏覽器

瀏覽器查看響應(yīng)頭的方法（新版 edge 為例）：右鍵選擇 “檢查”，進(jìn)入開發(fā)者模式，選擇 “網(wǎng)絡(luò)” ，選中具體選項(xiàng)（如果沒有可以 f5 刷新頁面），點(diǎn)擊 “標(biāo)頭”

強(qiáng)緩存

概念：檢查強(qiáng)緩存，不發(fā)送 http 請求直接從緩存里讀取資源。一般強(qiáng)緩存都會設(shè)置有效時間，過期就失效

觸發(fā)條件，Cache-Control 的值 max-age = xxx

響應(yīng)頭 Expires 存儲緩存過期時間（如果修改本地時間會造成緩存失效）

協(xié)商緩存

概念：需要攜帶緩存標(biāo)識（tag）發(fā)送 http 請求，由服務(wù)器判斷是否使用緩存。服務(wù)端會進(jìn)行判斷，若資源已發(fā)生變化，則返回新資源，否則告訴瀏覽器啟用緩存即可

觸發(fā)條件（兩個）

強(qiáng)緩存過期

Cache-Control 的值包含 no-cache

緩存標(biāo)識由響應(yīng)頭 Last-Modified、ETag 決定（簡述一下）AX

Last-Modified 用于記錄資源最后修改時間，瀏覽器再次請求時用來對比時間，以此判斷資源是否變化

ETag存儲一個字符串（類似標(biāo)識符），只要資源修改了標(biāo)識符就會變動，以此判斷資源是否變化

用戶操作對緩存的影響

地址欄輸入網(wǎng)址：瀏覽器會查找

點(diǎn)擊刷新按鈕或按 f5 刷新：會使用緩存

ctrl+f5 刷新：跳過緩存，直接請求新資源
編輯：lyn