前端緩存一直是前端一熱門話題，也是面試高頻考點。主要涉及前端性能優化相關知識點。先來看看大綱：

之前也有寫過一遍關於http緩存的文章一文讀懂http緩存（超詳細），裏面寫的比較詳細。有興趣可以去看看，今天呢，主要是對前端緩存做一個較為全面的總結，希望對大家有所幫助吧！

前端緩存大致分為兩類：

1、http緩存

2、本地緩存

一、http緩存

http緩存也稱為應用緩存，主要是緩存get請求時服務端返回的數據，緩存的前提是開啓了緩存，緩存開啓方式主要有兩種：一種是服務端配置開啓緩存，另一種是html通過meta標籤設置http-equiv

http緩存分為兩類：強緩存和協商緩存

強緩存是指無需向服務端發送請求即可從緩存中讀取緩存數據，性能是最優的一種方式。

協商緩存是指需要向服務端發送請求校驗該請求是否有過修改，如果服務端沒有修改過那麼就會返回304狀態碼，然後從前端緩存中讀數據。如果服務端有修改即返回服務端數據。

http緩存請求流程：

強緩存相關請求響應頭：

1、Pragma（http1.0）優先級最高
Pragma:no-cache: 服務端進行校驗和Cache-Control:no-cache效果一致

2、Cache-Control（http1.1）優先級次高
請求頭：

響應頭：

no-store：不走緩存（優先級最高）
no-cache：走協商緩存
max-age=0：走協商緩存

3、Expires（http1.0）優先級最低
-1：表示立馬過期
GMT時間：表示緩存失效的時間

協商緩存相關請求響應頭：

1、ETag/If-None-Match（精度高、性能差，優先級高）
2、Last-Modified/If-Modified-Since（只能精確到秒）（只要打開了文件就默認做了修改，即使內容沒有做任何改變）

響應頭ETag和Last-Modified,其中ETag返回的是一個hash值，Last-Modified返回的是GMT格式的最後修改時間

請求頭中帶上與ETag對應的If-Not-Match，其值就是響應頭中返回的ETag的值，Last-Modified對應的If-Modified-Since

http緩存存儲方式：

1、from memory cache
從內存中獲取/一般緩存更新頻率較高的js、圖片、字體等資源

2、from disk cache
從磁盤中獲取/一般緩存更新頻率較低的js、css等資源

如何查看http緩存：

1、chrome://version
查看個人資料路徑：C:\Users{用户}\AppData\Local\Google\Chrome\User Data\Default

2、file:///C:/Users/{用户}/AppData/Local/Google/Chrome/User%20Data/Default/Cache/
查看到加密後的信息

3、下載工具：Chrome cache View
可查看到具體的緩存信息

二、本地緩存

本地緩存可分為：大容量緩存和小容量緩存

小容量存儲：

1、Cookies（4kb、會與後台交互）
2、LocalStorage（H5新增特性、5M、永久存儲）
3、SessionStorage（H5新增特性、5M、與瀏覽器標籤共存亡）

大容量緩存：

1、IndexedDB（非關係型數據庫、50M、正常使用）
2、WebSql（關係型數據庫、50M左右、W3C標準廢棄）

PWA（Progressive web apps，漸進式 Web 應用）：

1、可將應用添加至主屏幕
2、通過service worker實現離線緩存功能
3、可實現消息推送

service worker工作流程：

特點：
1、運行於瀏覽器後台，不受頁面刷新的影響，可以監聽和截攔作用域範圍內所有頁面的HTTP請求
2、網站必須使用HTTPS。除了使用本地開發環境調試

如何查看緩存：

F12 + Application選項卡

默認緩存

默認緩存也稱瀏覽器前進/後退緩存(Backward/Forward Cache, BF Cache)（瀏覽器默認開啓的本地緩存）也有人叫disk Cache

BF Cache是一種瀏覽器優化，HTML標準並未指定其如何進行緩存，因此緩存行為是各瀏覽器各自實現，所以不盡相同。由於不是HTTP緩存，所以通過頭文件緩存設置 no-cache 是無效的

BF Cache的邏輯是：用户點擊前進/後退按鈕的時候，就是期待回到“之前看到過的那個頁面”，所以瀏覽器不需要從服務器獲取一份新的代碼並重新加載頁面

如果需要禁用BF Cache可通過監聽瀏覽器history事件，對頁面進行reload可實現頁面刷新