簡述

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

服務端通過設置 http 響應頭來決定緩存策略（緩存方式）

緩存流程

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

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

緩存位置

先談談緩存都會存在哪，然后引出緩存方式進一步說明

Service Worker

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

離線緩存調用的就是 Service Worker

Memory Cache

內存中的緩存，關閉頁面就會失效

Disk Cache

硬盤中的緩存

資源存進硬盤的情況

大文件（大概率）

此時內存利用率較高

Push Cache

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

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

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

緩存方式

緩存方式就兩種

強緩存（默認優先）

協商緩存（協商，也就是商量的意思）

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

public：響應可以被客戶端和代理服務器緩存

private（默認取值）：響應只有客戶端可以緩存

no-cache：直接進入協商緩存階段

no-store：不進行任何緩存

max-age = xxx（xxx 代表數字）：緩存內容在 xxx 時間后失效

must-revalidate：告訴瀏覽器

瀏覽器查看響應頭的方法（新版 edge 為例）：右鍵選擇 “檢查”，進入開發者模式，選擇 “網絡” ，選中具體選項（如果沒有可以 f5 刷新頁面），點擊 “標頭”

強緩存

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

觸發條件，Cache-Control 的值 max-age = xxx

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

協商緩存

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

觸發條件（兩個）

強緩存過期

Cache-Control 的值包含 no-cache

緩存標識由響應頭 Last-Modified、ETag 決定（簡述一下）AX

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

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

用戶操作對緩存的影響

地址欄輸入網址：瀏覽器會查找

點擊刷新按鈕或按 f5 刷新：會使用緩存

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