前端學(xué)習(xí)25 瀏覽器緩存（強緩存、協(xié)商緩存）和本地緩存

瀏覽器緩存是性能優(yōu)化的一個非常重要的指標(biāo)，而前端緩存也是我們在開發(fā)中必不可少的模塊。

1.瀏覽器緩存

1.1 緩存流程

通常來說，瀏覽器首次加載資源會返回200，并且下載服務(wù)器文件，緩存資源及版本號，再次加載資源的時候就可根據(jù)資源請求頭字段（強緩存&協(xié)商緩存）去判斷是否使用緩存資源。HTTP Cache 是我們開發(fā)中接觸最多的緩存，它分為強緩存和協(xié)商緩存。

強緩存：直接從本地副本比對讀取請求頭，不去請求服務(wù)器，返回的狀態(tài)碼是200。
協(xié)商緩存：會去服務(wù)器對比，若梅該百年才直接讀取本地緩存，返回的狀態(tài)碼為304。

1.2 強緩存（expires\Cache-Control）

強緩存就是像瀏覽器緩存中查找該請求內(nèi)容，并根據(jù)該結(jié)果的緩存規(guī)則來決定是否適用該緩存結(jié)果的過程。強緩存是利用http的返回頭中的 Expires 和 Cache-Control 兩個字段來控制的，用來表示資源的緩存時間。

Expires：這是HTTP 1.0 的字段，表示緩存到期事件，是一個絕對時間（當(dāng)前時間+緩存時間），當(dāng)客戶端和服務(wù)端時間不一致時，會存在問題。

Cache-Control：HTTP 1.1 新增字段，他是一個相對時間，主要是利用該字段的max-age值來進行判斷，例如：Cache-Control:max-age=3600 ，表示著資源的有效期為3600秒。

Cache-Control幾個常見的設(shè)置值：

no-cache：不使用本地緩存。需要使用緩存協(xié)商，咸魚服務(wù)器確認(rèn)返回的相應(yīng)是否被更改，如果之前的相應(yīng)中存在ETag，那么請求的時候會與服務(wù)端驗證，如果資源未被修改，則可以避免重新下載。
no-store：直接禁止瀏覽器緩存數(shù)據(jù)，每次用戶請求該資源，都會向服務(wù)器發(fā)送一個請求，每次都會下載完整的內(nèi)容。
public：可以被所有的用戶緩存，包括終端用戶和CDN等中間代理服務(wù)器。
private：只能被終端用戶的瀏覽器緩存，不允許CDN等中繼緩存服務(wù)器對其緩存。
優(yōu)先級：cache-control -> expires

1.3 協(xié)商緩存（(Last-Modified & If-Modified-Since\Etag & If-None-Match)）

協(xié)商緩存就是強制緩存失效后，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程。

協(xié)商緩存是發(fā)起http請求攜帶 Etag 或者 Last-Modified 兩個字段，由服務(wù)器做對比確定緩存資源是否可用。

服務(wù)器通過 Last-Modified 字段告知客戶端，資源最后一次被修改的時間,客戶端會自己對這個時間進行比對, 如果相等則表示未修改，響應(yīng) 304；反之，則表示修改了，響應(yīng) 200 狀態(tài)碼，并返回數(shù)據(jù)(如果資源更新的速度是秒以下單位,這個緩存就會失效,因為時間單位是秒)
Etag 存儲的是文件的特殊標(biāo)識(一般都是 hash 生成的)，服務(wù)器存儲著文件的 Etag 字段,之后的流程和 Last-Modified 一致
Last-Modified與ETag是可以一起使用的，服務(wù)器會優(yōu)先驗證ETag，一致的情況下，才會繼續(xù)比對Last-Modified，最后才決定是否返回304。
優(yōu)先級: ETag -> Last-Modified

某些文件修改非常頻繁，比如在秒以下的時間內(nèi)進行修改，(比方說1s內(nèi)修改了N次)，if-modified-since能檢查到的粒度是秒級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒)；

2.本地緩存

2.1 Cookie

用于解決http無狀態(tài)的缺點，在客戶端存儲會話信息，記錄用戶的狀態(tài)
使用cookie在客戶端存儲一些其它的數(shù)據(jù)，可以設(shè)置使用范圍、增刪改查作用

//增改：
Cookies.set("token", res1.data.result.token, {
	expires: 7,
	path: "/",
	domain: "101hr.com"
});
//刪除對應(yīng)項
Cookies.remove("token", { path: "/", domain: "101hr.com" });
//查
Cookies.get("menuClick")

2.2 sessionStorage、localStorage

是一種在客戶端存儲數(shù)據(jù)的一種機制，主要的目的是為了克服由cookie帶來的一些限制
當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時，無須將數(shù)據(jù)在客戶端和服務(wù)器之間來回的進行傳送，并且可以存儲大量的跨會話的數(shù)據(jù)
Web Storage包含了兩種對象的定義，sessionStorage和localStorage
sessionStorage只能存儲字符串類型數(shù)據(jù)，無法直接存儲數(shù)組類型和JSON對象
所以可以JSON.stringify()方法轉(zhuǎn)換成字符串，再存儲到sessionstorage中,使用的時候再使用JSON.parse()轉(zhuǎn)化回來

//sessionStorage和localStorage的使用方式是相近的
//增改
localStorage.setItem('redirect_uri',res.data.result.redirect_uri)
//存儲數(shù)組和對象類型
localStorage.setItem('redirect_uri',JSON.stringify(res.data.result.redirect_uri))
sessionStorage.setItem('redirect_uri',res.data.result.redirect_uri) 
//查
localStorage.getItem('redirect_uri’)
JSON.parse(localStorage.getItem('redirect_uri’))
//刪
localStorage.removeItem('redirect_uri’)
//清空storage數(shù)據(jù)
localStorage.clear()

2.3 vuex

vuex是一個專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理器
它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并且以相應(yīng)的規(guī)則保證狀態(tài)以一種可以預(yù)測的方式發(fā)生變化,采用單向數(shù)據(jù)流的方式更加快的定位到位置
數(shù)據(jù)保存在Vuex的state字段內(nèi),任何頁面組件都可以通過$store.state.變量名稱去讀取數(shù)據(jù)
修改state數(shù)據(jù)，顯示地提交mutations，使用this.$store.commit方法來執(zhí)行mutations
頁面刷新數(shù)據(jù)恢復(fù),故結(jié)合keep-alive、web Storage來使用