簡(jiǎn)述

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

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

緩存流程

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

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

緩存位置

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

Service Worker

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

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

Memory Cache

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

Disk Cache

硬盤中的緩存

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

大文件（大概率）

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

Push Cache

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

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

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

緩存方式

緩存方式就兩種

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

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

先介紹一個(gè)響應(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 時(shí)間后失效

must-revalidate：告訴瀏覽器

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

強(qiáng)緩存

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

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

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

協(xié)商緩存

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

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

強(qiáng)緩存過期

Cache-Control 的值包含 no-cache

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

Last-Modified 用于記錄資源最后修改時(shí)間，瀏覽器再次請(qǐng)求時(shí)用來對(duì)比時(shí)間，以此判斷資源是否變化

ETag存儲(chǔ)一個(gè)字符串（類似標(biāo)識(shí)符），只要資源修改了標(biāo)識(shí)符就會(huì)變動(dòng)，以此判斷資源是否變化

用戶操作對(duì)緩存的影響

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

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

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