背景

從輸入U(xiǎn)RL地址到看到頁面，第一步：URL解析；第二步：緩存檢查；第三步：DNS解析；第四步：TCP三次握手；第五步：數(shù)據(jù)傳輸；第六步：TCP四次揮手；第七步：頁面渲染；
以下總結(jié)緩存檢查這一模塊

緩存位置

Memory Cache : 內(nèi)存緩存
Disk Cache：硬盤緩存

可以從開發(fā)者工具看到

緩存分類

強(qiáng)緩存 Expires / Cache-Control
瀏覽器對于強(qiáng)緩存的處理：根據(jù)第一次請求資源時(shí)返回的響應(yīng)頭來確定的
Expires：緩存過期時(shí)間，用來指定資源到期的時(shí)間（HTTP/1.0）
Cache-Control：cache-control: max-age=2592000第一次拿到資源后的2592000秒內(nèi)（30天），再次發(fā)送請求，讀取緩存中的信息（HTTP/1.1）
兩者同時(shí)存在的話，Cache-Control優(yōu)先級高于Expires

image.png

協(xié)商緩存 Last-Modified / ETag
協(xié)商緩存就是強(qiáng)制緩存失效后，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程

image.png

查找緩存過程

打開網(wǎng)頁：查找 disk cache 中是否有匹配，如有則使用，如沒有則發(fā)送網(wǎng)絡(luò)請求
普通刷新 (F5)：因TAB沒關(guān)閉，因此memory cache是可用的，會被優(yōu)先使用，其次才是disk cache
強(qiáng)制刷新 (Ctrl + F5)：瀏覽器不使用緩存，因此發(fā)送的請求頭部均帶有 Cache-control: no-cache，服務(wù)器直接返回 200 和最新內(nèi)容
詳見下圖

第一次請求

普通刷新

html頁面

js

css

強(qiáng)制刷新

強(qiáng)制刷新