一、前言
前端緩存主要是分為HTTP緩存和瀏覽器緩存。其中HTTP緩存是在HTTP請求傳輸時用到的緩存，主要在服務器代碼上設置；而瀏覽器緩存則主要由前端開發在前端js上進行設置。
緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，并且由于緩存文件可以重復利用，還可以減少帶寬，降低網絡負荷。
對于一個數據請求來說，可以分為發起網絡請求、后端處理、瀏覽器響應三個步驟。瀏覽器緩存可以幫助我們在第一和第三步驟中優化性能。比如說直接使用緩存而不發起請求，或者發起了請求但后端存儲的數據和前端一致，那么就沒有必要再將數據回傳回來，這樣就減少了響應數據。

強制緩存優先于協商緩存進行，若強制緩存(Expires和Cache-Control)生 效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If- Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定 是否使用緩存，若協商緩存失效，那么代表該請求的緩存失效，重新 獲取請求結果，再存入瀏覽器緩存中；生效則返回304，繼續使用緩 存，主要過程如下：

HTTP請求緩存一般也是建立在get請求上面的，get和post的區別

一、強緩存

當瀏覽器向服務器發起請求時，服務器會將緩存規則放入HTTP響應報文的HTTP頭中和請求結果一起返回給瀏覽器，控制強制緩存的字段分別是Expires和Cache-Control，其中Cache-Control優先級比Expires高。

( 到了HTTP/1.1，Expire已經被Cache-Control替代，原因在于Expires控制緩存的原理是使用客戶端的時間與服務端返回的時間做對比，那么如果客戶端與服務端的時間因為某些原因不同步（例如時區不同；客戶端和服務端有一方的時間不準確）發生誤差，那么強制緩存則會直接失效，這樣的話強制緩存的存在則毫無意義。)

Expire 絕對時間Cache-Control 相對時間

Cache-Control:

public：所有內容都將被緩存（客戶端和代理服務器都可緩存）

private：所有內容只有客戶端可以緩存，Cache-Control的默認取值

no-cache：客戶端緩存內容，但是是否使用緩存則需要經過協商緩存來驗證決定

no-store：所有內容都不會被緩存，即不使用強制緩存，也不使用協商緩存

max-age=xxx (xxx is numeric)：緩存內容將在xxx秒后失效

狀態碼為灰色的請求則代表使用了強制緩存，請求對應的Size值則代表該緩存存放的位置，分別為from memory cache 和 from disk cache。那么from memory cache 和 from disk cache又分別代表的是什么呢？什么時候會使用from disk cache，什么時候會使用from memory cache呢？
from memory cache代表使用內存中的緩存，from disk cache則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序為memory –> disk –> 服務器請求。

內存緩存(from memory cache)：內存緩存具有兩個特點，分別是速度快和時間限制。
硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，讀取緩存需要對該緩存存放的硬盤文件進行I/O操作，然后重新解析該緩存內容，讀取復雜，速度比內存緩存慢。

在瀏覽器中，瀏覽器會在js和圖片等文件解析執行后直接存入內存緩存中，那么當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬盤文件中，所以每次渲染頁面都需要從硬盤讀取緩存(from disk cache)。

二、協商緩存

協商緩存就是強制緩存失效后，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程，主要有以下兩種情況：

協商緩存的標識也是在響應報文的HTTP頭中和請求結果一起返回給瀏覽器的，控制協商緩存的字段分別有：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的優先級比Last-Modified / If-Modified-Since高，因為Last-Modified的精度只精確到秒級，如果是毫秒級的改變，則會出現問題。E-tag只要文件改變，它就會改變

If-Modified-Since則是客戶端再次發起該請求時，攜帶上次請求返回的Last-Modified值，通過此字段值告訴服務器該資源上次請求返回的最后被修改時間。服務器收到該請求，發現請求頭含有If-Modified-Since字段，則會根據If-Modified-Since的字段值與該資源在服務器的最后被修改時間做對比，若服務器的資源最后被修改時間大于If-Modified-Since的字段值，則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用緩存文件，

Etag是服務器響應請求時，返回當前資源文件的一個唯一標識(由服務器生成)

If-None-Match是客戶端再次發起該請求時，攜帶上次請求返回的唯一標識Etag值，通過此字段值告訴服務器該資源上次請求返回的唯一標識值。服務器收到該請求后，發現該請求頭中含有If-None-Match，則會根據If-None-Match的字段值與該資源在服務器的Etag值做對比，一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200，

注：Etag / If-None-Match優先級高于Last-Modified / If-Modified-Since，同時存在則只有Etag / If-None-Match生效。對于協商緩存，使用 Ctrl+F5強制刷新可以使得緩存無效。但是對于強緩存，在未過期時，必須更新資源路徑才能發起新的請求（更改了路徑相當于是另一個資源了，這也是前端工程化中常用到的技巧）。

強緩存不需要想服務器發起請求，協商緩存需要

三、瀏覽器緩存
Cookie主要用于用戶信息的存儲，Cookie的內容可以自動在請求的時候被傳遞給服務器。大小4KB
LocalStorage的數據將一直保存在瀏覽器內，直到用戶清除瀏覽器緩存數據為止。大小跟瀏覽器相關，一般是5MB，相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬于相同域名和端口）
SessionStorage的其他屬性同LocalStorage，只不過它的生命周期同標簽頁的生命周期，當標簽頁被關閉時，SessionStorage也會被清除。大小跟瀏覽器相關，一般是5MB，但是不同頁面或標簽頁間無法共享sessionStorage的信息。這里需要注意的是，頁面及標簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬于同源頁面，那么他們之間是可以共享sessionStorage的。

四、本地存儲大容量
IndexDB主要用在前端有大容量存儲需求的頁面上，非關系型數據庫，大小無限

五、往返緩存
往返緩存又稱為BFCache，是瀏覽器在前進后退按鈕上為了提升歷史頁面的渲染速度的一種策略。該策略具體表現為，當用戶前往新頁面時，將當前頁面的瀏覽器DOM狀態保存到bfcache中；當用戶點擊后退按鈕的時候，將頁面直接從bfcache中加載，節省了網絡請求的時間。

總結

以上是生活随笔為你收集整理的http缓存和浏览器缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。