緩存

為什么有緩存?

緩存在活中其實很常見。往往初次打開一個新的軟件或者網頁的時候都會相對較慢, 但是再次打開就會快很多, 這就是緩存的功勞。大大提高了效率,也大大提高了用戶體驗。

什么數據可以緩存?

不能緩存的數據

• 實時更新替換的數據(例如: 彈幕,留言,評論,經常更換的廣告圖片)
• 網頁的 HTML 結構, 在網頁使用過程中結構會隨著操作發生變化
  緩存中的數據
• 靜態資源很少發生改變的圖片(例如:商品圖片,用戶頭像,網站logo)
• 使用過的視頻數據,音頻數據都會在緩存里

技術層面的緩存 - Web 緩存

在前端開發中，性能一直都是重點問題，判斷一個網站的性能就是看網頁打開的速度。然而提高網頁反應速度就要使用 Web 緩存。

Web 緩存的優點 :

• 節約了網絡的資源
• 提高了網絡的效率
• 縮短網頁請求資源的距離
• 減少網絡延遲
• 減少帶寬
• 降低網絡負荷

Web 緩存的種類 :

1 . 數據庫緩存

• 通過緩存數據庫查詢結果，加快訪問速度，減少數據庫訪問次數,緩解數據庫壓力，以提高 web 應用速度
  2 . 代理服務器緩存
• 在不能訪問服務器時,使用代理服務器滿足的 HTTP 請求(例: 跨域 Porxy)
  3 . CDN 緩存
• 通過在網絡各處放置節點服務器, 快速可靠地分發靜態內容,
  4 . 瀏覽器緩存
• 加速瀏覽，瀏覽器在用戶磁盤上對請求過的資源進行存儲，當再次請求這個頁面時，瀏覽器就可以從本地取出資源響應給用戶,這樣就可以加速頁面瀏覽

瀏覽器緩存

瀏覽器緩存包含 ： HTTP 緩存、indexDB、cookie、localstorage 、sessionStorage

1 . http 緩存（強制緩存 & 協商緩存）

強制緩存

什么是強制緩存

• 請求的資源本地緩存中有,資源從本地緩存獲取,不需要發起請求
• 想理解強制緩存,先知道什么是緩存控制

緩存控制

在http中，控制緩存開關的屬性有兩個：Pragma 和 Cache-Control。

Pragma

Pragma 有兩個情況 Pragma 和 Expires 。

• Pragma 的值為 no-cache : 表示禁用緩存
• Expires 的值是一個時間(格林尼治標準時間) : 表示該緩存的有效時間
  注意 : 當 http 響應頭中同時出現 Pragma 和 Cache-Control , 緩存控制執行優先級從高到低是?Pragma ==> Cache-Control ==> Expires

Cache-control

Cache-Control 在 http 請求頭和響應頭中,用來控制 http 緩存的

常見 請求頭 中的Cache-Control 指令

• Cache-Control: max-age=<seconds> : 緩存存儲的最大周期
• Cache-Control: max-stale[=<seconds>] : 客戶端愿意接收一個已經過期的資源
• Cache-control: no-cache : 重新驗證是否緩存(協商緩存驗證)
• Cache-control: no-store : 禁止緩存

常見 響應頭 中的Cache-Control 指令

• Cache-control: must-revalidate 資源過期后重新請求
• Cache-control: no-cache 請求是驗證是否緩存(協商緩存驗證)
• Cache-control: no-store 不使用任何緩存
• Cache-control: private 同意本地瀏覽器緩存
  詳情查看官方文檔

強制緩存的執行流程

流程情景1 - 初次請求

瀏覽器會向服務器發起請求 ==> 服務器接收到瀏覽器的請求 ==> 響應資源并在響應頭中攜帶?Cache-Control?給客戶端(?Cache-Control?值為緩存的最大過期時間)

流程情景2 - 再次請求相同的數據

瀏覽器會先查看Cache-Control?是否過期 ==> 沒有過期 ==> 瀏覽器直接從緩存中拉取資源(此過程不用經過服務器)

流程情景3 - Cache-Control?過期

cache-control?過期了 ==> 沒有辦法拉取緩存中的數據 ==> 繼續執行流程情景1

協商緩存

是什么協商緩存
協商緩存，也叫對比緩存。一種服務端的緩存策略

• 服務端判斷客戶端的資源
  • 返回?304表示緩存中的資源和請求的資源一致?，
  • 返回?200?表示從服務器返回的最新的資源。
• 想理解協商緩存,先知道什么是緩存校驗

緩存校驗

如何確定緩存數據有效,校驗緩存是否是最新的(和服務器中最新的數據一樣)

• 在響應頭中有兩個屬性(資源標識),ETag 和 Last-Modified 用來幫助服務器控制客戶端的緩存校驗。

Last-Modified

• 值為資源的最后修改時間，對應請求頭的屬性為?If-Modified-Since?
  Etag
• ETag 是 HTTP1.1 中加入的新屬性
• 表示資源的唯一標識，所謂唯一，和id一樣，具有唯一性。對應請求頭為?If-None-Match?。
  • Etag?的本質是一個字符串
    注意 : 當響應頭中同時存在?Last-Modified?和?Etag?，會優先使用?Etag(更加精確)

協商緩存的執行流程

流程情景1 - 初次請求

客戶端向服務器發出請求 ==> 服務器收到請求 ==> 響應資源和相對應的資源標（Etag 或 Last-Modified）識給客戶端

流程情景2 - 再次請求

瀏覽器再次發起請求 ==> 請求頭會攜帶If-None-Match?(或 If-Modified-Since) 去找服務器 ==> 服務器將If-None-Match?(或 If-Modified-Since) 和自己的Etag(或 Last-Modified) 的值對比(兩種情況)

• 如果相等，則返回 304 ，表示緩存資源和客戶端資源一致
• 如果不相等，則返回 200，并返回資源和新的Etag (或Last-Modified) 的值。

Last-Modified?和?Etag的異同點

相同點 : Last-Modified?和?Etag 用來幫助服務器控制客戶端緩存校驗的屬性

不同點 :

存儲的值不同

• Last-Modified存儲的值是最后修改數據的時間, 而請求頭中攜帶的If-Modified-Since是瀏覽器中緩存的時間
• Etag中存儲的是一個字符串,和id一樣的具有唯一性,而請求頭中攜帶的If-None-Match是瀏覽器上傳收到數據時攜帶的Etag

服務器對比方式不同

• Last-Modified : 如果緩存的時間和最后修改的時間一致，則緩存命中，響應 304，否則不命中，向服務端請求資源,響應 200 和最新的資源，并在響應頭中攜帶這次的 last-modified,把這次的 last-modified 存到 if-modified-since 中
• Etag 內容比對，用來判斷緩存內容的 if-none-match 和服務器內容的 Etag 是否相等，如果相等則說兩處的資源相等,緩存命中響應 304，否則請求資源,響應 200 和最新的資源，并在響應頭中攜帶新的 Etag,

協商緩存流程圖

注意 : 刷新瀏覽器頁面,強制緩存會失效，而協商緩存有效。

2 . indexDB

IndexedDB 就是瀏覽器提供的本地數據庫，它可以被網頁腳本創建和操作。IndexedDB 允許儲存大量數據，提供查找接口，還能建立索引。這些都是 LocalStorage 所不具備的。就數據庫類型而言，IndexedDB 不屬于關系型數據庫（不支持 SQL 查詢語句），更接近 NoSQL 數據庫。

詳情參考官方文檔:

3 . Cookie

Cookie 是什么

• Cookie 直意為小甜餅。用于數據緩存,cookie 存放數據量非常小，它的大小限制為4KB以內?？梢跃彺嬗脩舻卿浶畔?#xff08;例如：token）。

Cookie 的作用

• Cookie 緩存的數據始終在同源 http 中攜帶，在瀏覽器和服務器之間傳遞
• Cookie 緩存可以做數據持久化，Cookie 數據在設置的 Cookie 過期時間之前都有效（數據在緩存中關閉瀏覽器窗口不能刪除 Cookie 數據）

cookie的使用

• 下載依賴包 ：npm i js-cookie 或者 yarn add js-cookie
• 導入 : import Cookies from 'js-cookie'
• 存入數據語法 : Cookies.set('鍵', '值',{ expires: 7, path: '' })
  • 第三參數為一個對象, 對象的屬性有expires和path
  • expires : 創建一個過期 cookie,值為天數
  • path : Cookie只對當前路徑的頁面有效
• 使用數據語法 : Cookies.get('鍵')

注意 ： Cookies 中有路徑的概念，可以限制 Cookies 數據所屬路徑

4 . localStorage

1 . localStorage 作用 : 本地存儲

• 經典場景 ： 免登錄
  2 . localStorage 語法 ：
• 2.1 存數據 ： localStorage.setItem('屬性名',屬性值)
• 2.2 取數據 : localStorage.getItem('屬性名')
• 2.3 刪數據 : localStorage.removeItem('屬性名')
• 2.4 清空數據 ： localStorage.clear()

3 . localStorage 特點 ：

• 3.1 localStorage 是 永久存儲 的， 除非 手動清除 ，否則一直存在。
• 3.2 localStorage 只能存儲 字符串類型 數據。 如果是其他類型，則會自動轉成字符換格式存儲。

5 . sessionStorage

1 . sessionStorage 作用 ： 臨時存儲

• 經典場景 ： 頁面間傳值

2 . sessionStorage 語法和 localStorage 完全一致 ：

• 2.1 存數據 ： sessionStorage.setItem('屬性名',屬性值)
• 2.2 取數據 : sessionStorage.getItem('屬性名')
• 2.3 刪數據 : sessionStorage.removeItem('屬性名')
• 2.4 清空數據 ： sessionStorage.clear()

3 . sessionStorage 特點 ：

• 3.1 sessionStorage 頁面關閉后就 自動清除 了。
• 3.2 sessionStorage 只能存儲 字符串類型 數據。 如果是其他類型，則會自動轉成字符換格式存儲。

cookie、localStorage、sessionStorage異同

CookielocalStoragesessionStorage

數據保存的期限	一般由服務器生成，可設置保存時間。	需要手動清除，否則永久保存	僅在當前頁面有效，關閉頁面或瀏覽器后被清除
存放數據大小	4KB以內	5MB或更大	5MB或更大
與服務器關系	每次都會攜帶在HTTP頭中,在瀏覽器和服務器之間傳遞	保存與客戶端硬盤中，不參與和服務器的通信	保存在客戶端內存中，不參與和服務器的通信

總結

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

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