緩存

為什么有緩存?

緩存在活中其實(shí)很常見。往往初次打開一個(gè)新的軟件或者網(wǎng)頁(yè)的時(shí)候都會(huì)相對(duì)較慢, 但是再次打開就會(huì)快很多, 這就是緩存的功勞。大大提高了效率,也大大提高了用戶體驗(yàn)。

什么數(shù)據(jù)可以緩存?

不能緩存的數(shù)據(jù)

• 實(shí)時(shí)更新替換的數(shù)據(jù)(例如: 彈幕,留言,評(píng)論,經(jīng)常更換的廣告圖片)
• 網(wǎng)頁(yè)的 HTML 結(jié)構(gòu), 在網(wǎng)頁(yè)使用過程中結(jié)構(gòu)會(huì)隨著操作發(fā)生變化
  緩存中的數(shù)據(jù)
• 靜態(tài)資源很少發(fā)生改變的圖片(例如:商品圖片,用戶頭像,網(wǎng)站logo)
• 使用過的視頻數(shù)據(jù),音頻數(shù)據(jù)都會(huì)在緩存里

技術(shù)層面的緩存 - Web 緩存

在前端開發(fā)中，性能一直都是重點(diǎn)問題，判斷一個(gè)網(wǎng)站的性能就是看網(wǎng)頁(yè)打開的速度。然而提高網(wǎng)頁(yè)反應(yīng)速度就要使用 Web 緩存。

Web 緩存的優(yōu)點(diǎn) :

• 節(jié)約了網(wǎng)絡(luò)的資源
• 提高了網(wǎng)絡(luò)的效率
• 縮短網(wǎng)頁(yè)請(qǐng)求資源的距離
• 減少網(wǎng)絡(luò)延遲
• 減少帶寬
• 降低網(wǎng)絡(luò)負(fù)荷

Web 緩存的種類 :

1 . 數(shù)據(jù)庫(kù)緩存

• 通過緩存數(shù)據(jù)庫(kù)查詢結(jié)果，加快訪問速度，減少數(shù)據(jù)庫(kù)訪問次數(shù),緩解數(shù)據(jù)庫(kù)壓力，以提高 web 應(yīng)用速度
  2 . 代理服務(wù)器緩存
• 在不能訪問服務(wù)器時(shí),使用代理服務(wù)器滿足的 HTTP 請(qǐng)求(例: 跨域 Porxy)
  3 . CDN 緩存
• 通過在網(wǎng)絡(luò)各處放置節(jié)點(diǎn)服務(wù)器, 快速可靠地分發(fā)靜態(tài)內(nèi)容,
  4 . 瀏覽器緩存
• 加速瀏覽，瀏覽器在用戶磁盤上對(duì)請(qǐng)求過的資源進(jìn)行存儲(chǔ)，當(dāng)再次請(qǐng)求這個(gè)頁(yè)面時(shí)，瀏覽器就可以從本地取出資源響應(yīng)給用戶,這樣就可以加速頁(yè)面瀏覽

瀏覽器緩存

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

1 . http 緩存（強(qiáng)制緩存 & 協(xié)商緩存）

強(qiáng)制緩存

什么是強(qiáng)制緩存

• 請(qǐng)求的資源本地緩存中有,資源從本地緩存獲取,不需要發(fā)起請(qǐng)求
• 想理解強(qiáng)制緩存,先知道什么是緩存控制

緩存控制

在http中，控制緩存開關(guān)的屬性有兩個(gè)：Pragma 和 Cache-Control。

Pragma

Pragma 有兩個(gè)情況 Pragma 和 Expires 。

• Pragma 的值為 no-cache : 表示禁用緩存
• Expires 的值是一個(gè)時(shí)間(格林尼治標(biāo)準(zhǔn)時(shí)間) : 表示該緩存的有效時(shí)間
  注意 : 當(dāng) http 響應(yīng)頭中同時(shí)出現(xiàn) Pragma 和 Cache-Control , 緩存控制執(zhí)行優(yōu)先級(jí)從高到低是?Pragma ==> Cache-Control ==> Expires

Cache-control

Cache-Control 在 http 請(qǐng)求頭和響應(yīng)頭中,用來控制 http 緩存的

常見 請(qǐng)求頭 中的Cache-Control 指令

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

常見 響應(yīng)頭 中的Cache-Control 指令

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

強(qiáng)制緩存的執(zhí)行流程

流程情景1 - 初次請(qǐng)求

瀏覽器會(huì)向服務(wù)器發(fā)起請(qǐng)求 ==> 服務(wù)器接收到瀏覽器的請(qǐng)求 ==> 響應(yīng)資源并在響應(yīng)頭中攜帶?Cache-Control?給客戶端(?Cache-Control?值為緩存的最大過期時(shí)間)

流程情景2 - 再次請(qǐng)求相同的數(shù)據(jù)

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

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

cache-control?過期了 ==> 沒有辦法拉取緩存中的數(shù)據(jù) ==> 繼續(xù)執(zhí)行流程情景1

協(xié)商緩存

是什么協(xié)商緩存
協(xié)商緩存，也叫對(duì)比緩存。一種服務(wù)端的緩存策略

• 服務(wù)端判斷客戶端的資源
  • 返回?304表示緩存中的資源和請(qǐng)求的資源一致?，
  • 返回?200?表示從服務(wù)器返回的最新的資源。
• 想理解協(xié)商緩存,先知道什么是緩存校驗(yàn)

緩存校驗(yàn)

如何確定緩存數(shù)據(jù)有效,校驗(yàn)緩存是否是最新的(和服務(wù)器中最新的數(shù)據(jù)一樣)

• 在響應(yīng)頭中有兩個(gè)屬性(資源標(biāo)識(shí)),ETag 和 Last-Modified 用來幫助服務(wù)器控制客戶端的緩存校驗(yàn)。

Last-Modified

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

協(xié)商緩存的執(zhí)行流程

流程情景1 - 初次請(qǐng)求

客戶端向服務(wù)器發(fā)出請(qǐng)求 ==> 服務(wù)器收到請(qǐng)求 ==> 響應(yīng)資源和相對(duì)應(yīng)的資源標(biāo)（Etag 或 Last-Modified）識(shí)給客戶端

流程情景2 - 再次請(qǐng)求

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

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

Last-Modified?和?Etag的異同點(diǎn)

相同點(diǎn) : Last-Modified?和?Etag 用來幫助服務(wù)器控制客戶端緩存校驗(yàn)的屬性

不同點(diǎn) :

存儲(chǔ)的值不同

• Last-Modified存儲(chǔ)的值是最后修改數(shù)據(jù)的時(shí)間, 而請(qǐng)求頭中攜帶的If-Modified-Since是瀏覽器中緩存的時(shí)間
• Etag中存儲(chǔ)的是一個(gè)字符串,和id一樣的具有唯一性,而請(qǐng)求頭中攜帶的If-None-Match是瀏覽器上傳收到數(shù)據(jù)時(shí)攜帶的Etag

服務(wù)器對(duì)比方式不同

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

協(xié)商緩存流程圖

注意 : 刷新瀏覽器頁(yè)面,強(qiáng)制緩存會(huì)失效，而協(xié)商緩存有效。

2 . indexDB

IndexedDB 就是瀏覽器提供的本地?cái)?shù)據(jù)庫(kù)，它可以被網(wǎng)頁(yè)腳本創(chuàng)建和操作。IndexedDB 允許儲(chǔ)存大量數(shù)據(jù)，提供查找接口，還能建立索引。這些都是 LocalStorage 所不具備的。就數(shù)據(jù)庫(kù)類型而言，IndexedDB 不屬于關(guān)系型數(shù)據(jù)庫(kù)（不支持 SQL 查詢語(yǔ)句），更接近 NoSQL 數(shù)據(jù)庫(kù)。

詳情參考官方文檔:

3 . Cookie

Cookie 是什么

• Cookie 直意為小甜餅。用于數(shù)據(jù)緩存,cookie 存放數(shù)據(jù)量非常小，它的大小限制為4KB以內(nèi)。可以緩存用戶登錄信息（例如：token）。

Cookie 的作用

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

cookie的使用

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

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

4 . localStorage

1 . localStorage 作用 : 本地存儲(chǔ)

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

3 . localStorage 特點(diǎn) ：

• 3.1 localStorage 是 永久存儲(chǔ) 的， 除非 手動(dòng)清除 ，否則一直存在。
• 3.2 localStorage 只能存儲(chǔ) 字符串類型 數(shù)據(jù)。 如果是其他類型，則會(huì)自動(dòng)轉(zhuǎn)成字符換格式存儲(chǔ)。

5 . sessionStorage

1 . sessionStorage 作用 ： 臨時(shí)存儲(chǔ)

• 經(jīng)典場(chǎng)景 ： 頁(yè)面間傳值

2 . sessionStorage 語(yǔ)法和 localStorage 完全一致 ：

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

3 . sessionStorage 特點(diǎn) ：

• 3.1 sessionStorage 頁(yè)面關(guān)閉后就 自動(dòng)清除 了。
• 3.2 sessionStorage 只能存儲(chǔ) 字符串類型 數(shù)據(jù)。 如果是其他類型，則會(huì)自動(dòng)轉(zhuǎn)成字符換格式存儲(chǔ)。

cookie、localStorage、sessionStorage異同

CookielocalStoragesessionStorage

數(shù)據(jù)保存的期限	一般由服務(wù)器生成，可設(shè)置保存時(shí)間。	需要手動(dòng)清除，否則永久保存	僅在當(dāng)前頁(yè)面有效，關(guān)閉頁(yè)面或?yàn)g覽器后被清除
存放數(shù)據(jù)大小	4KB以內(nèi)	5MB或更大	5MB或更大
與服務(wù)器關(guān)系	每次都會(huì)攜帶在HTTP頭中,在瀏覽器和服務(wù)器之間傳遞	保存與客戶端硬盤中，不參與和服務(wù)器的通信	保存在客戶端內(nèi)存中，不參與和服務(wù)器的通信

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。