瀏覽器緩存機(jī)制2-應(yīng)用緩存
在公司項(xiàng)目中撮竿，一些移動(dòng)版的WEB頁(yè)面恰好用到了應(yīng)用緩存贾铝，故順便寫(xiě)篇文章來(lái)總結(jié)下應(yīng)用緩存方面的內(nèi)容邓了。
1.應(yīng)用緩存簡(jiǎn)介
應(yīng)用緩存(application cache)是HTML5提供的一套緩存機(jī)制索守，使得WEB應(yīng)用可以離線運(yùn)行刘离。除了一些舊版本的IE外室叉，現(xiàn)代瀏覽器如firefox，chrome硫惕，safari大部分都是支持HTML5標(biāo)準(zhǔn)的茧痕。使用應(yīng)用緩存主要優(yōu)勢(shì)有：
- 離線瀏覽：用戶(hù)可以在離線狀態(tài)瀏覽網(wǎng)頁(yè)內(nèi)容。
- 速度更快: 因?yàn)閿?shù)據(jù)存儲(chǔ)在瀏覽器緩存中恼除，瀏覽器只會(huì)下載服務(wù)器發(fā)生改變的資源（只有.appcache文件狀態(tài)變化時(shí)才會(huì)重新下載.appcache文件指定的緩存資源）踪旷，這樣可以減輕服務(wù)器的負(fù)載。
2.應(yīng)用緩存配置
要開(kāi)啟應(yīng)用緩存豁辉，需要在web頁(yè)面的html標(biāo)記中加上manifest屬性令野，如下是我的測(cè)試頁(yè)面test.html代碼:
<html manifest="test.appcache">
<head><title>appcache</title></head>
<body>test appcache<img src="/test.gif"></img></body>
</html>
其中test.appcache文件為緩存清單文件(cache manifest)，緩存的資源都是在這個(gè)清單文件指定秋忙。使用了應(yīng)用緩存后彩掐，加載資源的流程是這樣的(摘自參考資料1)：
1)當(dāng)瀏覽器訪問(wèn)一個(gè)包含manifest屬性的文檔時(shí)，如果應(yīng)用緩存不存在灰追，則瀏覽器加載文檔堵幽，獲取該清單中需要緩存的文件列表，生成應(yīng)用緩存的第一個(gè)版本弹澎。
2)后續(xù)對(duì)該文檔以及清單文件中列出的緩存資源的訪問(wèn)會(huì)使得瀏覽器直接從應(yīng)用緩存加載朴下。同時(shí)，瀏覽器還會(huì)向window.applicationCache對(duì)象發(fā)送一個(gè)checking事件苦蒿，在遵循經(jīng)典緩存的前提下獲取清單文件殴胧，關(guān)于HTTP經(jīng)典緩存機(jī)制請(qǐng)參見(jiàn)前一篇文章。
3)如果當(dāng)前緩存清單文件是副本是最新的，瀏覽器將向applicationCache對(duì)象發(fā)送一個(gè)noupdate事件团滥，至此更新過(guò)程結(jié)束竿屹。因此，如果你在服務(wù)器上修改了任何緩存資源灸姊，需要同時(shí)修改清單文件拱燃，這樣瀏覽器才知道你的修改。
4)如果緩存清單文件已經(jīng)修改力惯，則清單文件中列出的緩存資源（也包括通過(guò)applicationCache.add方法添加到緩存中的文件）會(huì)放到一個(gè)臨時(shí)緩存中碗誉，對(duì)于每個(gè)加入到臨時(shí)緩存的文件，瀏覽器會(huì)向applicationCache發(fā)送一個(gè)progress事件父晶。如果出現(xiàn)任何錯(cuò)誤哮缺，瀏覽器會(huì)發(fā)送一個(gè)error事件，并暫停更新甲喝。
5)一旦所以文件都獲取成功尝苇，它們會(huì)被自動(dòng)移送到真正的離線緩存中，并向applicationCache 對(duì)象發(fā)送一個(gè) cached 事件埠胖。鑒于文檔早已經(jīng)被從緩存加載到瀏覽器中茎匠，所以更新后的文檔不會(huì)重新渲染，直到頁(yè)面重新加載(可以手動(dòng)或通過(guò)程序).也就是說(shuō)押袍，如果你的緩存資源更新了诵冒，緩存清單文件也更新了，第一次加載頁(yè)面的時(shí)候并不會(huì)更新文檔谊惭，只有等到頁(yè)面重新加載的時(shí)候才會(huì)更新汽馋。
為了方便測(cè)試，如果需要清除離線緩存圈盔，chrome可以通過(guò)設(shè)置中的清除瀏覽器數(shù)據(jù)或者直接訪問(wèn)chrome://appcache-internals/來(lái)清除豹芯，其他瀏覽器參照參考資料1.
3.緩存清單文件
一個(gè)典型的緩存清單文件test.appcache如下:
CACHE MANIFEST
# v1 - 2015-03-14 23:23
# This is a comment.
CACHE:
test.html
nomanifest.html
NETWORK:
*
FALLBACK:
/fallback fallback.html
緩存清單文件第一行必須是CACHE MANIFEST，然后可以加上注釋(以#開(kāi)頭)驱敲。此外就是三個(gè)段落標(biāo)題铁蹈，含義如下:
| 段落標(biāo)題 | 說(shuō)明 |
|---|---|
| CACHE | 顯示記錄，下面列表是需要切換到應(yīng)用緩存的顯示資源 |
| NETWORK | 網(wǎng)絡(luò)記錄众眨，需要從網(wǎng)絡(luò)訪問(wèn)的白名單列表 |
| FALLBACK | 后備記錄握牧，請(qǐng)求資源失敗時(shí)使用 |
一個(gè)應(yīng)用緩存至少會(huì)包含一個(gè)資源，由 URI 指定娩梨。所有資源除了上面提到的顯示記錄沿腰，網(wǎng)絡(luò)記錄，后備記錄外狈定，還有一個(gè)類(lèi)別叫主記錄颂龙。下面一一來(lái)看一下：
1）顯示記錄
每行都是一個(gè)合法的URI與一個(gè)要緩存的資源相關(guān)聯(lián)(本段落內(nèi)不允許通配符)习蓬。每行的URI前后允許出現(xiàn)空白字符。顯示記錄是顯示指定的需要加入到應(yīng)用緩存的資源列表措嵌，比如上面示例的test.appcache中需要顯示緩存的文件為test.html,nomanifest.html躲叼。注意的是，不是所有的文檔html屬性都要加manifest屬性企巢，比如我這個(gè)列表里面的nomanifest.html文檔就沒(méi)有manifest屬性押赊，但是只要有包含manifest屬性的文檔被訪問(wèn)后，就會(huì)自動(dòng)加入到應(yīng)用緩存包斑。
2）網(wǎng)絡(luò)記錄
每一行都是一個(gè)合法URI，該段落可以用通配符涕俗，比如上面的*罗丰，指示了除了應(yīng)用緩存中之外的資源需要通過(guò)網(wǎng)絡(luò)獲取。如果這里不設(shè)置的話再姑，那么沒(méi)有在應(yīng)用緩存中的資源就無(wú)法訪問(wèn)萌抵。比如我這里如果不指定NETWORK的話，則test.gif這個(gè)圖片就無(wú)法訪問(wèn)到元镀。
3)后備記錄
每一行都是一個(gè)合法URI(與一個(gè)資源關(guān)聯(lián))绍填，當(dāng)指定的資源無(wú)法訪問(wèn)時(shí)訪問(wèn)后面的關(guān)聯(lián)資源。比如訪問(wèn)/fallback或者它的子路徑比如/fallback/child路徑時(shí)栖疑，如果沒(méi)有對(duì)應(yīng)的資源讨永，則會(huì)訪問(wèn)fallback.html.
4）主記錄
主記錄是指html標(biāo)簽中包含了manifest屬性的文檔，比如下面的main.html遇革。主記錄即便沒(méi)有在顯示記錄中列出卿闹，也會(huì)在訪問(wèn)時(shí)加入到應(yīng)用緩存。如main.html作為主記錄萝快，雖然沒(méi)有在CACHE列表中锻霎，但是在訪問(wèn)的時(shí)候，同樣會(huì)被加入到應(yīng)用緩存中揪漩。
#main.html
<html manifest="test.appcache">
<head><title>main</title></head>
<body>main html</body>
</html>
4.緩存狀態(tài)(摘自參考資料1)
UNCACHED(未緩存):一個(gè)特殊的值旋恼，用于表明一個(gè)應(yīng)用緩存對(duì)象還沒(méi)有完全初始化。
IDLE(空閑):應(yīng)用緩存此時(shí)未處于更新過(guò)程中奄容。
CHECKING(檢查)：清單已經(jīng)獲取完畢并檢查更新冰更。
DOWNLOADING(下載中)：下載資源并準(zhǔn)備加入到緩存中，這是由于清單變化引起的昂勒。
UPDATEREADY(更新就緒)：一個(gè)新版本的應(yīng)用緩存可以使用冬殃。有一個(gè)對(duì)應(yīng)的事件 updateready，當(dāng)下載完畢一個(gè)更新叁怪，并且還未使用 swapCache() 方法激活更新時(shí)审葬，該事件觸發(fā)，而不會(huì)是 cached 事件。
OBSOLETE(廢棄):應(yīng)用緩存現(xiàn)在被廢棄涣觉。
可以通過(guò)下面的代碼來(lái)測(cè)試緩存清單更新情況:
function onUpdateReady() {
alert('found new version!');
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();
}
5.總結(jié)
- 顯示記錄中的資源會(huì)被加入應(yīng)用緩存中痴荐。顯示記錄中的資源文檔不一定要在html標(biāo)簽加manifest屬性，只要在列表中都會(huì)加入應(yīng)用緩存官册。
- 主記錄是指html標(biāo)簽包含manifest屬性的文檔生兆，即便沒(méi)有在顯示記錄的列表中，也會(huì)加入應(yīng)用緩存膝宁。
- 應(yīng)用緩存資源更新后鸦难，緩存清單文件也一定要同步更新，不然瀏覽器沒(méi)有辦法知曉緩存資源的變化员淫。
- NETWORK段落必須設(shè)置合蔽，否則其他資源無(wú)法訪問(wèn)。
- 緩存清單文件本身不要在顯示記錄中介返，也不要被服務(wù)器以任何方式緩存拴事。比如apache可以這樣設(shè)置緩存清單文件不被緩存。
ExpiresByType text/cache-manifest "access plus 0 seconds" - 如果訪問(wèn)緩存文檔時(shí)加了參數(shù)圣蝎，比如/test.html?name=test這樣刃宵，那么也會(huì)直接訪問(wèn)應(yīng)用緩存并加入到應(yīng)用緩存中。如下面是訪問(wèn)chrome://appcache-internals/得到的記錄徘公，可以看到各種類(lèi)型的記錄:
Flags URL Size (headers and data)
Fallback, http://localhost/fallback.html 295 B
Master, http://localhost/main.html 703 B
Explicit, http://localhost/nomanifest.html 305 B
Manifest, http://localhost/test.appcache 419 B
Explicit, http://localhost/test.html 732 B
Master, http://localhost/test.html?name=test 732 B
6.參考資料
使用應(yīng)用緩存（參考了大部分內(nèi)容并原文摘抄不少內(nèi)容牲证，向原作者表示感謝）
