摘 要： HTML5新增了很多標(biāo)簽和功能，部分功能得到了深入的研究和應(yīng)用，但是關(guān)于應(yīng)用緩存的研究介紹并不多。Web應(yīng)用逐漸興起，提高Web應(yīng)用的用戶體驗(yàn)是當(dāng)前研究的要點(diǎn)。詳細(xì)介紹了應(yīng)用緩存的建立以及在線更新。對(duì)應(yīng)用緩存提高應(yīng)用載入速度的效應(yīng)進(jìn)行了驗(yàn)證測(cè)試，實(shí)驗(yàn)表明，應(yīng)用緩存對(duì)不同文件都能較大程度地提高應(yīng)用載入速度，文件越大提高的效果越明顯。
關(guān)鍵詞： HTML5；應(yīng)用緩存；Web應(yīng)用
0 引言
HTML5是第五版HTML語(yǔ)言，同時(shí)也用來(lái)描述新一代的Web技術(shù)規(guī)范集合，包括HTML5、CSS3、svg、JavaScript[1]。隨著智能手機(jī)的普及、通信技術(shù)的快速發(fā)展和云計(jì)算技術(shù)的成熟，已進(jìn)入移動(dòng)互聯(lián)時(shí)代?；贐/S結(jié)構(gòu)的Web輕應(yīng)用由于其便捷性，逐漸在應(yīng)用領(lǐng)域占了一席之地，并成快速發(fā)展態(tài)勢(shì)。HTML5正是為了滿足新形勢(shì)下的Web需求而更新的技術(shù)規(guī)范。
然而隨著多媒體技術(shù)的發(fā)展，相較于C/S結(jié)構(gòu)，B/S結(jié)構(gòu)的應(yīng)用的缺點(diǎn)逐漸凸顯，Web應(yīng)用尤其是頁(yè)游的快速發(fā)展，應(yīng)用對(duì)網(wǎng)速的要求越來(lái)越高，服務(wù)器相應(yīng)速度受限，較大地影響著用戶體驗(yàn)效果。同時(shí)為了提高瀏覽效果，很多Web應(yīng)用采取了高質(zhì)量的圖片、視頻、音樂(lè)，設(shè)計(jì)了絢麗的動(dòng)畫(huà)效果。這些文件的重復(fù)加載嚴(yán)重影響了網(wǎng)頁(yè)打開(kāi)的速度，浪費(fèi)不必要的流量，增加了網(wǎng)絡(luò)負(fù)擔(dān)。Web應(yīng)用的數(shù)據(jù)本地存儲(chǔ)是優(yōu)化Web性能的重要手段，成為當(dāng)今Web領(lǐng)域的研究熱點(diǎn)之一[2-3]。
HTML5的規(guī)范在2014年正式公布之后，學(xué)者和開(kāi)發(fā)人員進(jìn)行了積極的研究。黃雄等人[4]對(duì)新增的<video>和<audio>標(biāo)簽進(jìn)行了研究，開(kāi)發(fā)了跨瀏覽器的播放器；馮科融[5]研究了HTML5的網(wǎng)頁(yè)游戲的開(kāi)發(fā)；孫松柏[6]對(duì)HTML5的安全問(wèn)題進(jìn)行了深入研究。但是關(guān)于基于HTML5的Web應(yīng)用的客戶端本地緩存技術(shù)的相關(guān)研究不多，李燁民[7]概述了HTML5前端本地化技術(shù)，但未提到Web緩存技術(shù)；石堅(jiān)[8]研究了基于前端存儲(chǔ)的地圖切片技術(shù)，較早應(yīng)用前端緩存技術(shù)。
1應(yīng)用緩存技術(shù)介紹
HTML5允許用戶將Web應(yīng)用保存到本地磁盤(pán)上，就是把應(yīng)用程序所需的所有文件包括HTML、CSS、JavaScript下載到本地硬盤(pán)。這些緩存不會(huì)隨著用戶清除瀏覽器緩存而被清除，緩存起來(lái)的應(yīng)用程序文件會(huì)在聯(lián)網(wǎng)狀態(tài)之下進(jìn)行更新。從實(shí)際應(yīng)用效果看，Web應(yīng)用實(shí)現(xiàn)了像C/S結(jié)構(gòu)應(yīng)用的本地安裝。
使用DOM Storage或Web SQL Database保存數(shù)據(jù)從而實(shí)現(xiàn)“本地安裝”的Web應(yīng)用在離線狀態(tài)下依然可以訪問(wèn)運(yùn)行，同時(shí)具備一套同步機(jī)制，再次回到在線狀態(tài)時(shí)，能夠?qū)⒋鎯?chǔ)的數(shù)據(jù)發(fā)送到服務(wù)器。
Web應(yīng)用緩存有3個(gè)優(yōu)點(diǎn)：（1）支持離線訪問(wèn)；（2）提高應(yīng)用載入速度；（3）降低服務(wù)器壓力[9]。
2 存儲(chǔ)技術(shù)的實(shí)現(xiàn)
2.1 緩存的建立
并不是Web應(yīng)用程序的所有清單都要進(jìn)行存儲(chǔ)。在將應(yīng)用緩存到本地前，首先要建立一個(gè)緩存清單，清單包含了所有要緩存文件的URL，然后在應(yīng)用程序主html文件的<html>標(biāo)簽內(nèi)設(shè)置manifest屬性[10]，格式如下：
<!DOCTYPE html>
<html manifest=”Web.manifest”>
<head>..........</head>
<body>..........</body>
</html>
一般來(lái)說(shuō)，一個(gè)Web應(yīng)用的正常運(yùn)行需要多個(gè)文件的支持，那么本地存儲(chǔ)的每個(gè)html文件就都需要設(shè)置<html manifest=>屬性來(lái)指向清單文件，這些文件指向同一個(gè)清單文件，這樣不僅可以清楚地表達(dá)它們是需要緩存起來(lái)的，而且是來(lái)自同一個(gè)Web應(yīng)用。服務(wù)器需要進(jìn)行配置才能識(shí)別清單文件的文件類(lèi)型，常見(jiàn)的服務(wù)器配置方法如表1所示。
通常來(lái)說(shuō)，復(fù)雜的Web應(yīng)用無(wú)法將依賴的所有資源都緩存起來(lái)，通常需要一個(gè)復(fù)雜的清單。在復(fù)雜的清單文件中，用特殊的區(qū)域頭標(biāo)識(shí)該頭之后清單項(xiàng)的區(qū)域。區(qū)域頭有3種，分別是CACHE、NETWORK和FALLBACK，其中CACHE頭區(qū)域標(biāo)識(shí)的是需要存儲(chǔ)的文件；NETWORK區(qū)域頭標(biāo)識(shí)了該區(qū)域的URL中的資源從不緩存，總要通過(guò)網(wǎng)絡(luò)獲取，通常存放服務(wù)端的腳本資源，如果是*，表示CACHE區(qū)域之外的文件都需要從網(wǎng)絡(luò)下載；FALLBACK區(qū)域頭中的清單每行都包含兩個(gè)URL，第一個(gè)URL是一個(gè)前綴，標(biāo)識(shí)凡是和該前綴匹配的URL都不會(huì)存儲(chǔ)起來(lái)，需要的話，會(huì)從網(wǎng)絡(luò)下載，第二個(gè)URL是指需要加載和存儲(chǔ)在緩存中的資源。清單格式具體如表2所示。
2.2 緩存的更新
緩存的更新是瀏覽器檢查清單文件是否有更新而不是去檢查緩存的文件本身是否有更新。如果開(kāi)發(fā)者修改了某個(gè)文件，比如JavaScript文件，要想使改變生效，就必須去更新清單文件，最簡(jiǎn)單便捷的方式是改變注釋里的版本號(hào)或修改日期。當(dāng)用戶主動(dòng)刪除應(yīng)用緩存后，頁(yè)面會(huì)被重新加載再次緩存。緩存更新緩存清單中的所有文件，當(dāng)其中的一個(gè)文件不能正常緩存更新時(shí)，緩存失敗，使用原來(lái)的本地緩存。
瀏覽器檢查清單文件和更新緩存的操作是異步的，緩存可以在載入應(yīng)用之前進(jìn)行，也可以和載入應(yīng)用同時(shí)進(jìn)行。因此，在更新清單文件之后，用戶必須載入應(yīng)用兩次才能保證最新的版本生效。
緩存的更新的相關(guān)操作是通過(guò)檢測(cè)applicationCache.status屬性的值并調(diào)用applicationCache的事件程序進(jìn)行的，不同的值代表緩存不同的狀態(tài)，通過(guò)事件偵聽(tīng)結(jié)合當(dāng)前狀態(tài)采取相關(guān)動(dòng)作，具體如表3所示。
2.3 在線狀態(tài)更新
Web2.0概念興起以來(lái)，用戶和服務(wù)器的交互逐漸成為互聯(lián)網(wǎng)的主流。用戶不僅要從服務(wù)器請(qǐng)求數(shù)據(jù)，還需要更新數(shù)據(jù)到服務(wù)器。Web離線應(yīng)用使用HTML5新引入的DOM Storage機(jī)制在本地存儲(chǔ)key/value鍵值對(duì)數(shù)據(jù)。這種機(jī)制保存數(shù)據(jù)規(guī)模大，安全度高。
DOM Storage分為兩類(lèi)：sessionStorage和localStorage。其中sessionStorage用于存儲(chǔ)與當(dāng)前瀏覽器窗口關(guān)聯(lián)的數(shù)據(jù)，窗口關(guān)閉后，sessionStorage中存儲(chǔ)的數(shù)據(jù)將無(wú)法使用；localStorage用于長(zhǎng)期存儲(chǔ)數(shù)據(jù)，窗口關(guān)閉后，localStorage中的數(shù)據(jù)仍然可以被訪問(wèn)。Web應(yīng)用離線數(shù)據(jù)存儲(chǔ)使用的是localStorage[11]。
在離線狀態(tài)下，Web應(yīng)用將數(shù)據(jù)以key/value鍵值對(duì)形式保存在本地，當(dāng)應(yīng)用處于在線狀態(tài)時(shí)，Web應(yīng)用將數(shù)據(jù)更新到服務(wù)器上。HTML5提供了setItem（key，value）、getItem（key）、removeItem（key）等方法對(duì)數(shù)據(jù)進(jìn)行更、查、刪操作。通過(guò)navigator.onLine屬性，可以檢測(cè)瀏覽器是否在線，當(dāng)window.navigator.onLine為ture時(shí)，表示在線，為false時(shí)，表示離線。同時(shí)，在window對(duì)象上注冊(cè)在線和離線事件的處理程序，可以檢測(cè)網(wǎng)絡(luò)連接狀態(tài)的改變。
3 實(shí)驗(yàn)測(cè)試
實(shí)驗(yàn)基于Opera 30瀏覽器，Apache 2.2，MySQL 5.2，Windows 8.1操作系統(tǒng)。測(cè)試內(nèi)容主要是不同文件類(lèi)型在有本地緩存和無(wú)本地緩存情況下的載入時(shí)間，結(jié)果如表4所示。
通過(guò)對(duì)表4結(jié)果分析，利用緩存機(jī)制后，可快速進(jìn)入緩存，大幅度提高了應(yīng)用緩存時(shí)間。而且網(wǎng)頁(yè)使用了高清晰的圖片，本地緩存后能快速載入應(yīng)用。
4 結(jié)論
HTML5是新一代的網(wǎng)頁(yè)開(kāi)發(fā)標(biāo)準(zhǔn)，新增加的功能將極大地提升開(kāi)發(fā)效能和效率，有力推動(dòng)Web應(yīng)用的發(fā)展。在移動(dòng)互聯(lián)時(shí)代，應(yīng)用本地緩存技術(shù)將明顯地提升用戶體驗(yàn)。HTML5新技術(shù)的逐漸推廣，將促進(jìn)Web應(yīng)用突破網(wǎng)絡(luò)限制，使設(shè)計(jì)師更專(zhuān)注于應(yīng)用本身的開(kāi)發(fā)。而且隨著WebGL技術(shù)的使用，結(jié)合本地緩存技術(shù)，在享受酷炫效果時(shí)，不會(huì)影響載入速度。下一步將進(jìn)行WebGL與本地緩存技術(shù)相結(jié)合的相關(guān)研究。
參考文獻(xiàn)
[1] CRAVENS J， BURTOFT J. HTML5敏捷實(shí)踐[M].豆葆坤，譯.北京：電子工業(yè)出版社，2014.
[2] ANTHES G. HTML5 leads a Web revolution[J]. Communications of the ACM， 2012：16-17
[3] PREUVENEERS D， BERBERS Y， JOOSEN W. The future of mobile e-health application development： exploring HTML5 for context-aware diabetes monitoring[C]. Procedia Computer Science， 2013，21：343-351.
[4] 黃雄.基于HTML5的視頻傳輸技術(shù)研究[J].廣東技術(shù)師范學(xué)院學(xué)報(bào)，2014（11）：20-25.
[5] 馮科融，王和興，連加美，等.基于HTML5的3D多人網(wǎng)頁(yè)游戲?qū)崿F(xiàn)方案[J].微型機(jī)與應(yīng)用，2013，32（1）：4-6.
[6] 孫松柏，ABBASI A，諸葛建偉，等.HTML5安全研究[J].計(jì)算機(jī)應(yīng)用與軟件，2013，30（3）：1-6，16.
[7] 李燁民.基于HTML5的前端本地化存儲(chǔ)技術(shù)[J].成都大學(xué)學(xué)報(bào)（自然科學(xué)版），2012，31（1）：67-69.
[8] 石堅(jiān)，李治洪.基于B/S結(jié)構(gòu)的地圖切片前端預(yù)存儲(chǔ)技術(shù)[J].微型機(jī)與應(yīng)用，2014，33（19）：5-7，11.
[9] MDN. Using the application cache[DB/OL].[2015-04-12]（2015-08-22）.https：//developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache.
[10] FLANAGAN D. JavaScript權(quán)威指南（第6版）[M].淘寶前端團(tuán)隊(duì)，譯.北京：機(jī)械工業(yè)出版社，2012.
[11] 郭宗寶.使用 HTML5開(kāi)發(fā)離線應(yīng)用[DB/OL].[2010-11-04]. http：//www.ibm.com/developerworks/cn/Web/1011_guozb _html5off/.