摘要：緩存緩存，也叫網(wǎng)關(guān)緩存反向代理緩存。瀏覽器先向網(wǎng)關(guān)發(fā)起請(qǐng)求，網(wǎng)關(guān)服務(wù)器后面對(duì)應(yīng)著一臺(tái)或多臺(tái)負(fù)載均衡源服務(wù)器，會(huì)根據(jù)它們的負(fù)載請(qǐng)求，動(dòng)態(tài)將請(qǐng)求轉(zhuǎn)發(fā)到合適的源服務(wù)器上。雖然這種架構(gòu)負(fù)載均衡源服務(wù)器之間的緩存沒(méi)法共享，但卻擁有更好的處擴(kuò)展性。

工作上遇到一個(gè)這樣的需求，一個(gè)H5頁(yè)面在APP端，如果勾選已讀狀態(tài)，則下次打開(kāi)該鏈接，會(huì)跳過(guò)此頁(yè)面。用到了HTML5 的本地存儲(chǔ) API 中的 localStorage作為解決方案，回顧了下Web緩存的知識(shí)，感覺(jué)自己了解得不夠多，所以想整理下，加深理解。

Web緩存是指一個(gè)Web資源（如html頁(yè)面，圖片，js，數(shù)據(jù)等）存在于Web服務(wù)器和客戶端（瀏覽器）之間的副本。緩存會(huì)根據(jù)進(jìn)來(lái)的請(qǐng)求保存輸出內(nèi)容的副本；當(dāng)下一個(gè)請(qǐng)求來(lái)到的時(shí)候，如果是相同的URL，緩存會(huì)根據(jù)緩存機(jī)制決定是直接使用副本響應(yīng)訪問(wèn)請(qǐng)求，還是向源服務(wù)器再次發(fā)送請(qǐng)求。比較常見(jiàn)的就是瀏覽器會(huì)緩存訪問(wèn)過(guò)網(wǎng)站的網(wǎng)頁(yè)，當(dāng)再次訪問(wèn)這個(gè)URL地址的時(shí)候，如果網(wǎng)頁(yè)沒(méi)有更新，就不會(huì)再次下載網(wǎng)頁(yè)，而是直接使用本地緩存的網(wǎng)頁(yè)。只有當(dāng)網(wǎng)站明確標(biāo)識(shí)資源已經(jīng)更新，瀏覽器才會(huì)再次下載網(wǎng)頁(yè)。

減少網(wǎng)絡(luò)帶寬消耗（當(dāng)Web緩存副本被使用時(shí)，只會(huì)產(chǎn)生極小的網(wǎng)絡(luò)流量，可以有效的降低運(yùn)營(yíng)成本。）

降低服務(wù)器壓力（給網(wǎng)絡(luò)資源設(shè)定有效期之后，用戶可以重復(fù)使用本地的緩存，減少對(duì)源服務(wù)器的請(qǐng)求，間接降低服務(wù)器的壓力。同時(shí)，搜索引擎的爬蟲機(jī)器人也能根據(jù)過(guò)期機(jī)制降低爬取的頻率，也能有效降低服務(wù)器的壓力。）

減少網(wǎng)絡(luò)延遲，加開(kāi)頁(yè)面打開(kāi)速度。

在Web應(yīng)用領(lǐng)域，Web緩存大致可以分為以下幾種類型：

Web應(yīng)用，特別是SNS類型的應(yīng)用，往往關(guān)系比較復(fù)雜，數(shù)據(jù)庫(kù)表繁多，如果頻繁進(jìn)行數(shù)據(jù)庫(kù)查詢，很容易導(dǎo)致數(shù)據(jù)庫(kù)不堪重荷。為了提供查詢的性能，會(huì)將查詢后的數(shù)據(jù)放到內(nèi)存中進(jìn)行緩存，下次查詢時(shí)，直接從內(nèi)存緩存直接返回，提供響應(yīng)效率。比如常用的緩存方案有memcached等。

服務(wù)器端緩存包含代理服務(wù)器緩存和CDN緩存:

代理服務(wù)器是瀏覽器和源服務(wù)器之間的中間服務(wù)器，瀏覽器先向這個(gè)中間服務(wù)器發(fā)起Web請(qǐng)求，經(jīng)過(guò)處理后（比如權(quán)限驗(yàn)證，緩存匹配等），再將請(qǐng)求轉(zhuǎn)發(fā)到源服務(wù)器。代理服務(wù)器緩存的運(yùn)作原理跟瀏覽器的運(yùn)作原理差不多，只是規(guī)模更大?？梢园阉斫鉃橐粋€(gè)共享緩存，不只為一個(gè)用戶服務(wù)，一般為大量用戶提供服務(wù)，因此在減少相應(yīng)時(shí)間和帶寬使用方面很有效，同一個(gè)副本會(huì)被重用多次。常見(jiàn)代理服務(wù)器緩存解決方案有Squid等，這里不再詳述。

CDN（Content delivery networks）緩存，也叫網(wǎng)關(guān)緩存、反向代理緩存。CDN緩存一般是由網(wǎng)站管理員自己部署，為了讓他們的網(wǎng)站更容易擴(kuò)展并獲得更好的性能。瀏覽器先向CDN網(wǎng)關(guān)發(fā)起Web請(qǐng)求，網(wǎng)關(guān)服務(wù)器后面對(duì)應(yīng)著一臺(tái)或多臺(tái)負(fù)載均衡源服務(wù)器，會(huì)根據(jù)它們的負(fù)載請(qǐng)求，動(dòng)態(tài)將請(qǐng)求轉(zhuǎn)發(fā)到合適的源服務(wù)器上。雖然這種架構(gòu)負(fù)載均衡源服務(wù)器之間的緩存沒(méi)法共享，但卻擁有更好的處擴(kuò)展性。從瀏覽器角度來(lái)看，整個(gè)CDN就是一個(gè)源服務(wù)器。

瀏覽器緩存（Browser Caching）是瀏覽器端保存數(shù)據(jù)用于快速讀取或避免重復(fù)資源請(qǐng)求的優(yōu)化機(jī)制，有效的緩存使用可以避免重復(fù)的網(wǎng)絡(luò)請(qǐng)求和瀏覽器快速地讀取本地?cái)?shù)據(jù)，整體上加速網(wǎng)頁(yè)展示給用戶。

應(yīng)用層緩存指的是從代碼層面上，通過(guò)代碼邏輯和緩存策略，實(shí)現(xiàn)對(duì)數(shù)據(jù)，頁(yè)面，圖片等資源的緩存，可以根據(jù)實(shí)際情況選擇將數(shù)據(jù)存在文件系統(tǒng)或者內(nèi)存中，減少數(shù)據(jù)庫(kù)查詢或者讀寫瓶頸，提高響應(yīng)效率。

接下來(lái)從Web前端的角度著重了解瀏覽器端緩存機(jī)制。

根據(jù)標(biāo)準(zhǔn)，到目前為止，H5 一共有6種緩存機(jī)制，有些是之前已有，有些是 H5 才新加入的。

 1. 瀏覽器緩存機(jī)制
 2. Dom Storgage（Web Storage）存儲(chǔ)機(jī)制
 3. Web SQL Database 存儲(chǔ)機(jī)制 
 4. Application Cache（AppCache）機(jī)制 
 5. Indexed Database （IndexedDB） 
 6. File System API

瀏覽器緩存機(jī)制，其實(shí)主要就是HTTP協(xié)議定義的緩存機(jī)制（如： Expires； Cache-control等）。但是也有非HTTP協(xié)議定義的緩存機(jī)制，如使用HTML Meta 標(biāo)簽，Web開(kāi)發(fā)者可以在HTML頁(yè)面的節(jié)點(diǎn)中加入標(biāo)簽，代碼如下：

　上述代碼的作用是告訴瀏覽器當(dāng)前頁(yè)面不被緩存，每次訪問(wèn)都需要去服務(wù)器拉取。使用上很簡(jiǎn)單，但只有部分瀏覽器可以支持，而且所有緩存代理服務(wù)器都不支持，因?yàn)榇聿唤馕鯤TML內(nèi)容本身。下面主要介紹HTTP協(xié)議定義的緩存機(jī)制。

通過(guò) HTTP 協(xié)議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來(lái)控制文件緩存的機(jī)制。這應(yīng)該是 WEB 中最早的緩存機(jī)制了，是在 HTTP 協(xié)議中實(shí)現(xiàn)的，有點(diǎn)不同于 Dom Storage、AppCache 等緩存機(jī)制，但本質(zhì)上是一樣的?？梢岳斫鉃?，一個(gè)是協(xié)議層實(shí)現(xiàn)的，一個(gè)是應(yīng)用層實(shí)現(xiàn)的。

Pragma：設(shè)置頁(yè)面是否緩存，為Pragma則緩存，no-cache則不緩存。

Expires：有了Pragma來(lái)禁用緩存，自然也需要有個(gè)東西來(lái)啟用緩存和定義緩存時(shí)間，對(duì)http1.0而言，Expires就是做這件事的首部字段。 Expires的值對(duì)應(yīng)一個(gè)GMT（格林尼治時(shí)間），比如Mon, 22 Jul 2002 11:12:01 GMT來(lái)告訴瀏覽器資源緩存過(guò)期時(shí)間，如果還沒(méi)過(guò)該時(shí)間點(diǎn)則不發(fā)請(qǐng)求。
如果Pragma頭部和Expires頭部同時(shí)存在，則起作用的會(huì)是Pragma，需要注意的是，響應(yīng)報(bào)文中Expires所定義的緩存時(shí)間是相對(duì)服務(wù)器上的時(shí)間而言的，其定義的是資源“失效時(shí)刻”，如果客戶端上的時(shí)間跟服務(wù)器上的時(shí)間不一致（特別是用戶修改了自己電腦的系統(tǒng)時(shí)間），那緩存時(shí)間可能就沒(méi)啥意義了。

Cache-Control： 針對(duì)上述的“Expires時(shí)間是相對(duì)服務(wù)器而言，無(wú)法保證和客戶端時(shí)間統(tǒng)一”的問(wèn)題，http1.1新增了 Cache-Control 來(lái)定義緩存過(guò)期時(shí)間。注意：若報(bào)文中同時(shí)出現(xiàn)了 Expires 和 Cache-Control，則以 Cache-Control 為準(zhǔn)。

(1) 最常見(jiàn)的，比如服務(wù)器回包：Cache-Control:max-age=600 表示文件在本地應(yīng)該緩存，且有效時(shí)長(zhǎng)是600秒（從發(fā)出請(qǐng)求算起）。在接下來(lái)600秒內(nèi)，如果有請(qǐng)求這個(gè)資源，瀏覽器不會(huì)發(fā)出 HTTP 請(qǐng)求，而是直接使用本地緩存的文件。
(2) Cache-Control: no-cache；這個(gè)很容易讓人產(chǎn)生誤解，使人誤以為是響應(yīng)不被緩存。實(shí)際上她是會(huì)被緩存的，只不過(guò)每次在向客戶端（瀏覽器）提供響應(yīng)數(shù)據(jù)時(shí)，緩存都要向服務(wù)器評(píng)估緩存響應(yīng)的有效性。
(3) Cache-Control: no-store；這個(gè)才是響應(yīng)不被緩存的意思。

Last-Modified/If-Modified-Since：
(1) Last-Modified：標(biāo)示這個(gè)響應(yīng)資源的最后修改時(shí)間。web服務(wù)器在響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器資源的最后修改時(shí)間。
(2) If-Modified-Since：當(dāng)資源過(guò)期時(shí)（使用Cache-Control標(biāo)識(shí)的max-age），發(fā)現(xiàn)資源具有Last-Modified聲明，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭 If-Modified-Since，表示請(qǐng)求時(shí)間。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since 則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若最后修改時(shí)間較新，說(shuō)明資源又被改動(dòng)過(guò)，則響應(yīng)整片資源內(nèi)容（寫在響應(yīng)消息包體內(nèi)），HTTP 200；若最后修改時(shí)間較舊，說(shuō)明資源無(wú)新修改，則響應(yīng)HTTP 304 (無(wú)需包體，節(jié)省瀏覽)，告知瀏覽器繼續(xù)使用所保存的cache。

Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用。

(1) Etag：web服務(wù)器響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)（生成規(guī)則由服務(wù)器覺(jué)得）。Apache中，ETag的值，默認(rèn)是對(duì)文件的索引節(jié)（INode），大小（Size）和最后修改時(shí)間（MTime）進(jìn)行Hash后得到的。

(2) If-None-Match：當(dāng)資源過(guò)期時(shí)（使用Cache-Control標(biāo)識(shí)的max-age），發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭If-None-Match （Etag的值）。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match 則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串進(jìn)行比對(duì)，決定返回200或304。

既生Last-Modified何生Etag？

你可能會(huì)覺(jué)得使用Last-Modified已經(jīng)足以讓瀏覽器知道本地的緩存副本是否足夠新，為什么還需要Etag（實(shí)體標(biāo)識(shí)）呢？HTTP1.1中Etag的出現(xiàn)主要是為了解決幾個(gè)Last-Modified比較難解決的問(wèn)題：
(1) Last-Modified標(biāo)注的最后修改只能精確到秒級(jí)，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間。
(2) 如果某些文件會(huì)被定期生成，當(dāng)有時(shí)內(nèi)容并沒(méi)有任何變化，但Last-Modified卻改變了，導(dǎo)致文件沒(méi)法使用緩存。
(3) 有可能存在服務(wù)器沒(méi)有準(zhǔn)確獲取文件修改時(shí)間，或者與代理服務(wù)器時(shí)間不一致等情形。
Etag是服務(wù)器自動(dòng)生成或者由開(kāi)發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符，能夠更加準(zhǔn)確的控制緩存。Last-Modified與ETag是可以一起使用的，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag，一致的情況下，才會(huì)繼續(xù)比對(duì)Last-Modified，最后才決定是否返回304。

小結(jié)
(1) 瀏覽器第一次請(qǐng)求：

(2) 瀏覽器第二次請(qǐng)求：

DOM Storage 是指 HTML5 的本地存儲(chǔ) API sessionStorage 和 localStorage。在介紹HTML5本地存儲(chǔ)之前，先來(lái)看一看前面幾個(gè)存儲(chǔ)方式的概念。

(1) HTTP Cookie: Cookie是為了解決HTTP無(wú)狀態(tài)的特性而出現(xiàn)的，也可以叫用戶識(shí)別機(jī)制。常用的用戶識(shí)別機(jī)制包括：

承載用戶信息的HTTP首部

客戶端IP地址追蹤技術(shù)，通過(guò)用戶的IP地址對(duì)其進(jìn)行識(shí)別

用戶登錄，用認(rèn)證機(jī)制來(lái)識(shí)別用戶

胖URL，一種在URL中嵌入識(shí)別信息的技術(shù)

cookie，一種強(qiáng)大且高效的持久身份識(shí)別技術(shù)

對(duì)于購(gòu)物網(wǎng)站而言，cookie是非常重要的，為了實(shí)現(xiàn)購(gòu)物車功能，把已選物品加入cookie，可以實(shí)現(xiàn)不同頁(yè)面之間數(shù)據(jù)的同步，同時(shí)在提交訂單的時(shí)候又會(huì)把這些cookie傳到后臺(tái)，大大方便了前后端開(kāi)發(fā)。
設(shè)置cookie:

function setCookie(name, value, options) {
      var expires = options.expires;
      var path = options.path;
      var domain = options.domain;
      var secure = options.secure;

      // 緩存時(shí)間轉(zhuǎn)為日期對(duì)象
      if (typeof expires === "number") {
        expires = new Date(new Date().getTime() + expires * 864e+5); // 緩存時(shí)間單位：天
      }
        document.cookie =
        name + "=" + escape(value) +
        (expires ? "; expires=" + expires.toUTCString() : "") +
        (path ? "; path=" + path : "") +
        (domain ? "; domain=" + domain : "") +
        (secure ? "; secure" : "");

      return true;
    }

獲取cookie:

function getCookie(name) {
      var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
      if (arr !== null) {
        return unescape(arr[2]);
      }

      // return null;
      return "";
    }

(2) userData是微軟在上世紀(jì)90年代的瀏覽器大戰(zhàn)時(shí)推出的本地存儲(chǔ)方案，借助DHTML的behaviour屬性來(lái)存儲(chǔ)本地?cái)?shù)據(jù)， 允許每個(gè)頁(yè)面最多存儲(chǔ)64K數(shù)據(jù)，每個(gè)站點(diǎn)最多640K數(shù)據(jù)，userData的缺點(diǎn)顯而易見(jiàn)，它不是Web標(biāo)準(zhǔn)的一部分，除非你的程序只需要支持IE， 否則它基本沒(méi)什么用處。
(3) Flash cookie的名字有些誤導(dǎo)，它實(shí)際上和HTTP cookie并不是一回事，或許它的名字應(yīng)該叫做"Flash本地存儲(chǔ)”，F(xiàn)lash cookie默認(rèn)允許每個(gè)站點(diǎn)存儲(chǔ)不超過(guò)100K的數(shù)據(jù)，如果超出了，F(xiàn)lash會(huì)自動(dòng)向用戶請(qǐng)求更大的存儲(chǔ)空間，借助Flash的 ExternalInterface接口，你可以很輕松地通過(guò)Javascript操作Flash的本地存儲(chǔ)。Flash的問(wèn)題很簡(jiǎn)單，就是因?yàn)樗?Flash。
(4) Gears是Google在07年發(fā)布的一個(gè)開(kāi)源瀏覽器插件，旨在改進(jìn)各大瀏覽器的兼容性，Gears內(nèi)置了一個(gè)基于SQLite的嵌入式 SQL數(shù)據(jù)庫(kù)，并提供了統(tǒng)一API對(duì)數(shù)據(jù)庫(kù)進(jìn)行訪問(wèn)，在取得用戶授權(quán)之后，每個(gè)站點(diǎn)可以在SQL數(shù)據(jù)庫(kù)中存儲(chǔ)不限大小的數(shù)據(jù)，Gears的問(wèn)題就是 Google自己都已經(jīng)不用它了。
(5) HTML5 的本地存儲(chǔ) API sessionStorage 和 localStorage
Dom Storage 是通過(guò)存儲(chǔ)字符串的 Key/Value 對(duì)來(lái)提供的，并提供 5MB （不同瀏覽器可能不同，分 HOST)的存儲(chǔ)空間（Cookies 才 4KB)。另外 Dom Storage 存儲(chǔ)的數(shù)據(jù)在本地，不像 Cookies，每次請(qǐng)求一次頁(yè)面，Cookies 都會(huì)發(fā)送給服務(wù)器。
DOM Storage 分為 sessionStorage 和 localStorage。localStorage 對(duì)象和 sessionStorage 對(duì)象使用方法基本相同，它們的區(qū)別在于作用的范圍不同。sessionStorage 用來(lái)存儲(chǔ)與頁(yè)面相關(guān)的數(shù)據(jù)，它在頁(yè)面關(guān)閉后無(wú)法使用。而 localStorage 則持久存在，在頁(yè)面關(guān)閉后也可以使用。
簡(jiǎn)單用法：

var name = sessionStorage.setItem("name","wangjuan");
alert(sessionStorage.getItem("name"));

并不是所有的瀏覽器都支持這兩個(gè)對(duì)象。在沒(méi)有原生支持localStorage的瀏覽器中使用時(shí)，MDN給出了兼容代碼：https://developer.mozilla.org...
不同瀏覽器對(duì)于這兩種用法的差異的兼容代碼可參考: https://github.com/mortzdk/lo...

H5 也提供基于 SQL 的數(shù)據(jù)庫(kù)存儲(chǔ)機(jī)制，用于存儲(chǔ)適合數(shù)據(jù)庫(kù)的結(jié)構(gòu)化數(shù)據(jù)。根據(jù)官方的標(biāo)準(zhǔn)文檔，Web SQL Database 存儲(chǔ)機(jī)制不再推薦使用，將來(lái)也不再維護(hù)，而是推薦使用 AppCache 和 IndexedDB。
查看更多：戳這里

Application Cache（簡(jiǎn)稱 AppCache)似乎是為支持 Web App 離線使用而開(kāi)發(fā)的緩存機(jī)制。它的緩存機(jī)制類似于瀏覽器的緩存（Cache-Control 和 Last-Modified）機(jī)制，都是以文件為單位進(jìn)行緩存，且文件有一定更新機(jī)制。但 AppCache 是對(duì)瀏覽器緩存機(jī)制的補(bǔ)充，不是替代。
AppCache 的原理有兩個(gè)關(guān)鍵點(diǎn)：manifest 屬性和 manifest 文件。
W3C 官方的一個(gè)例子：

上面 HTML 文檔，引用外部一個(gè) JS 文件和一個(gè) GIF 圖片文件，在其 HTML 頭中通過(guò) manifest 屬性引用了一個(gè) appcache 結(jié)尾的文件（即manifest文件）。
緩存的結(jié)果是：我們?cè)?Google Chrome 瀏覽器中打開(kāi)這個(gè) HTML 鏈接，JS 功能正常，圖片也顯示正常。禁用網(wǎng)絡(luò)，關(guān)閉瀏覽器重新打開(kāi)這個(gè)鏈接，發(fā)現(xiàn) JS 工作正常，圖片也顯示正常。當(dāng)然也有可能是瀏覽緩存起的作用，我們可以在文件的瀏覽器緩存過(guò)期后，禁用網(wǎng)絡(luò)再試，發(fā)現(xiàn) HTML 頁(yè)面也是正常的。
manifest 文件就是以 appcache 結(jié)尾的文件，是一個(gè)普通文件文件，列出了需要緩存的文件。
完整的 manifest 文件，如：

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html 

了解更多：戳我

IndexedDB 也是一種數(shù)據(jù)庫(kù)的存儲(chǔ)機(jī)制，但不同于已經(jīng)不再支持的 Web SQL Database。IndexedDB 不是傳統(tǒng)的關(guān)系數(shù)據(jù)庫(kù)，indexedDB中沒(méi)有表的概念，類似于 Dom Storage 的 key-value 的存儲(chǔ)方式，但功能更強(qiáng)大，且存儲(chǔ)空間更大。它的特點(diǎn)是：

以key-value 的方式存取對(duì)象，可以是任何類型值或?qū)ο螅ǘM(jìn)制。

可以對(duì)對(duì)象任何屬性生成索引，方便查詢。

較大的存儲(chǔ)空間，默認(rèn)推薦250MB(分 HOST)，比 Dom Storage 的5MB要大的多。

通過(guò)數(shù)據(jù)庫(kù)的事務(wù)（tranction）機(jī)制進(jìn)行數(shù)據(jù)操作，保證數(shù)據(jù)一致性。

異步的 API 調(diào)用，避免造成等待而影響體驗(yàn)。

了解更多：資料1，資料2

File System API 是 H5 新加入的存儲(chǔ)機(jī)制。它為 Web App 提供了一個(gè)虛擬的文件系統(tǒng)，就像 Native App 訪問(wèn)本地文件系統(tǒng)一樣。由于安全性的考慮，這個(gè)虛擬文件系統(tǒng)有一定的限制。Web App 在虛擬的文件系統(tǒng)中，可以進(jìn)行文件（夾）的創(chuàng)建、讀、寫、刪除、遍歷等操作。

File System API 也是一種可選的緩存機(jī)制，和前面的 SQLDatabase、IndexedDB 和 AppCache 等一樣。File System API 有自己的一些特定的優(yōu)勢(shì)：

可以滿足大塊的二進(jìn)制數(shù)據(jù)（ large binary blobs）存儲(chǔ)需求。

可以通過(guò)預(yù)加載資源文件來(lái)提高性能。

可以直接編輯文件。

了解更多：資料

之前對(duì)web緩存沒(méi)有系統(tǒng)的認(rèn)知，接觸過(guò)一兩點(diǎn)，不過(guò)也不是很懂。這兩天查看了許多資料，雖然看過(guò)之后理解得也不太深入，不過(guò)有個(gè)整體的認(rèn)知也好，后面自己遇到相關(guān)問(wèn)題再細(xì)究。
參考資料：
1、九種瀏覽器端緩存機(jī)制知多少
2、瀏覽器緩存原理
3、Web緩存機(jī)制系列
4、Web 前端實(shí)現(xiàn)本地存儲(chǔ)
5、H5 緩存機(jī)制淺析 - 移動(dòng)端 Web 加載性能優(yōu)化
6、瀏覽器緩存機(jī)制
7、瀏覽器緩存機(jī)制詳解
8、透過(guò)瀏覽器看HTTP緩存
9、淺談瀏覽器http的緩存機(jī)制
10、瀏覽器緩存機(jī)制淺析