什么是Web緩存，HTTP緩存和瀏覽器緩存的區(qū)別

最近把前端緩存重新整理了一下，從整體的層面上把前端所有能用的緩存方案梳理了一遍。同時(shí)，對(duì)于http緩存，使用了表格的方案，使得原先晦澀難記的特性變得清晰明了。特記錄于此，若有什么欠缺，也望不吝指出。

1、前端緩存概述

前端緩存主要是分為HTTP緩存和瀏覽器緩存。其中HTTP緩存是在HTTP請(qǐng)求傳輸時(shí)用到的緩存，主要在服務(wù)器代碼上設(shè)置;而瀏覽器緩存則主要由前端開(kāi)發(fā)在前端js上進(jìn)行設(shè)置。下面會(huì)分別具體描述。

2、前端緩存分類(lèi)

2.1 HTTP緩存

整體流程

HTTP緩存都是從第二次請(qǐng)求開(kāi)始的。

第一次請(qǐng)求資源時(shí)，服務(wù)器返回資源，并在respone header頭中回傳資源的緩存參數(shù);第二次請(qǐng)求時(shí)，瀏覽器判斷這些請(qǐng)求參數(shù)，擊中強(qiáng)緩存就直接200，否則就把請(qǐng)求參數(shù)加到request header頭中傳給服務(wù)器，看是否擊中協(xié)商緩存，擊中則返回304，否則服務(wù)器會(huì)返回新的資源。

HTTP緩存分為強(qiáng)緩存和協(xié)議緩存，它們的區(qū)別如下：

200 from disk or 200 from memory

強(qiáng)緩存的200也有兩種情況：200 from disk和200 from memory?，F(xiàn)在我沒(méi)有找到明確的文檔來(lái)描述這種區(qū)別的發(fā)生條件。知乎這個(gè)問(wèn)題中提到了一些情景，可以自行取用。

2.1.1 強(qiáng)緩存

2.1.2 協(xié)商緩存

協(xié)商緩存都是成對(duì)出現(xiàn)的。

2.1.3 最佳優(yōu)化策略——消滅304

最佳優(yōu)化策略：因?yàn)閰f(xié)商緩存本身也有http請(qǐng)求的損耗，所以最佳優(yōu)化策略是要盡可能的將靜態(tài)文件存儲(chǔ)為較長(zhǎng)的時(shí)間，多利用強(qiáng)緩存而不是協(xié)商緩存，即消滅304。

但是給文件設(shè)置一個(gè)很長(zhǎng)的Cacha-Control也會(huì)帶來(lái)其他的問(wèn)題，最主要的問(wèn)題是靜態(tài)內(nèi)容更新時(shí)，用戶(hù)不能及時(shí)獲得更新的內(nèi)容。這時(shí)候就要使用hash的方法對(duì)文件進(jìn)行命名，通過(guò)每次更新不同的靜態(tài)文件名來(lái)消除強(qiáng)緩存的影響。

Hash命名：

http://xxx.com/main.5eas34fa.js

http://xxx.com/main.js?5eas34fa

http://xxx.com/5eas34fa/main.js

2.2 瀏覽器緩存

2.2.1 本地存儲(chǔ)小容量

Cookie主要用于用戶(hù)信息的存儲(chǔ)，Cookie的內(nèi)容可以自動(dòng)在請(qǐng)求的時(shí)候被傳遞給服務(wù)器。

LocalStorage的數(shù)據(jù)將一直保存在瀏覽器內(nèi)，直到用戶(hù)清除瀏覽器緩存數(shù)據(jù)為止。

SessionStorage的其他屬性同LocalStorage，只不過(guò)它的生命周期同標(biāo)簽頁(yè)的生命周期，當(dāng)標(biāo)簽頁(yè)被關(guān)閉時(shí)，SessionStorage也會(huì)被清除。

2.2.2 本地存儲(chǔ)大容量

WebSql和IndexDB主要用在前端有大容量存儲(chǔ)需求的頁(yè)面上，例如，在線(xiàn)編輯瀏覽器或者網(wǎng)頁(yè)郵箱。

2.2.3 應(yīng)用緩存與PWA

應(yīng)用緩存全稱(chēng)為Offline Web Application，它的緩存內(nèi)容被存在瀏覽器的Application Cache中。它也是一個(gè)被W3C標(biāo)準(zhǔn)廢棄的功能，主要是通過(guò)manifest文件來(lái)標(biāo)注要被緩存的靜態(tài)文件清單。但是在緩存靜態(tài)文件的同時(shí)，也會(huì)默認(rèn)緩存html文件。這導(dǎo)致頁(yè)面的更新只能通過(guò)manifest文件中的版本號(hào)來(lái)決定。而且，即使我們更新了version，用戶(hù)的第一次訪(fǎng)問(wèn)還是會(huì)訪(fǎng)問(wèn)到老的頁(yè)面，只有下一次再訪(fǎng)問(wèn)才能訪(fǎng)問(wèn)到新的頁(yè)面。所以，應(yīng)用緩存只適合那種常年不變化的靜態(tài)網(wǎng)站。如此的不方便，也是被廢棄的重要原因。

PWA全稱(chēng)是漸進(jìn)式網(wǎng)絡(luò)應(yīng)用，主要目標(biāo)是實(shí)現(xiàn)web網(wǎng)站的APP式功能和展示。盡管PWA也有manifest文件，但是與應(yīng)用緩存卻完全不同。不同于manifest簡(jiǎn)單的將文件通過(guò)是否緩存進(jìn)行分類(lèi)，PWA用manifest構(gòu)建了自己的APP骨架。另外，PWA用Service Worker來(lái)控制緩存的使用。這一塊的內(nèi)容較多，在這里就不詳細(xì)展開(kāi)了。

2.2.4 往返緩存

往返緩存又稱(chēng)為BFCache，是瀏覽器在前進(jìn)后退按鈕上為了提升歷史頁(yè)面的渲染速度的一種策略。BFCache會(huì)緩存所有的DOM結(jié)構(gòu)，但是問(wèn)題在于，一些頁(yè)面開(kāi)始時(shí)進(jìn)行的上報(bào)或者請(qǐng)求可能會(huì)被影響。這個(gè)問(wèn)題現(xiàn)在主要會(huì)出現(xiàn)在微信h5的開(kāi)發(fā)中。

　　來(lái)源：達(dá)內(nèi)web前端培訓(xùn)