摘 要： 用友UAP平臺(tái)在本地化緩存方面，從Relation和Object層級(jí)上已經(jīng)做了很多的嘗試，同時(shí)也取得很好的效果，F(xiàn)ile層級(jí)由于瀏覽器兼容不好，采用優(yōu)雅降級(jí)的方式融合到項(xiàng)目中，利用本地化的技術(shù)手段，大幅提升了UAP產(chǎn)品的響應(yīng)速度。
數(shù)據(jù)顯示，全球互聯(lián)網(wǎng)用戶以及智能手機(jī)用戶的數(shù)量，增幅正在逐漸放緩。但是，移動(dòng)數(shù)據(jù)流量卻取得爆炸式的增長(zhǎng)，其年度增幅達(dá)到了81%，且增長(zhǎng)速度正在加快。
移動(dòng)數(shù)據(jù)流量增幅逐漸攀升用戶越來(lái)越依賴于移動(dòng)終端提供的日常社交、獲取信息、商業(yè)買(mǎi)賣(mài)等服務(wù)。大量的訪問(wèn)，提升了服務(wù)器端負(fù)載壓力。移動(dòng)終端常常會(huì)出現(xiàn)頁(yè)面加載緩慢的狀況，這會(huì)大大降低終端客戶體驗(yàn)。如果將資源文件、代碼邏輯文件、結(jié)構(gòu)文件、樣式文件緩存在終端設(shè)備上，不僅能夠降低服務(wù)器壓力，還能夠減少網(wǎng)絡(luò)延遲、減少網(wǎng)絡(luò)帶寬消耗、減少終端用戶流量成本。
HTML5又給本地化帶來(lái)更多的選擇。目前前端緩存技術(shù)從技術(shù)類型分成傳統(tǒng)本地化技術(shù)與HTML5本地化技術(shù)兩類，如圖2所示：
圖2
傳統(tǒng)本地化技術(shù) 又細(xì)分為Cookie，F(xiàn)lash Sharedobject，Goole Gears和User Data。
(1)Cookie，在Web中得到廣泛應(yīng)用，但其局限性非常明顯，容量太小，早期有些站點(diǎn)會(huì)因?yàn)槌鲇诎踩目紤]而禁用Cookie，因?yàn)镃ookie的內(nèi)容會(huì)隨著頁(yè)面請(qǐng)求一并發(fā)往服務(wù)器當(dāng)前Cookie已經(jīng)被各大網(wǎng)站完全支持，在UAP各個(gè)web平臺(tái)也一并支持。
(2)Flash SharedObject，其使用的是kissy的store模塊來(lái)調(diào)用Flash SharedObject。Flash SharedObject的優(yōu)點(diǎn)是容量適中，基本上解決了兼容性問(wèn)題，缺點(diǎn)是要在頁(yè)面中引入特定的swf和js文件，增加額外的HTTP請(qǐng)求負(fù)擔(dān)，且處理繁瑣。
(3)Google Gears是一個(gè)基于Firefox和IE的插件，要使用它，必須先安裝相應(yīng)插件，但其官方網(wǎng)站目前已經(jīng)停止更新。
(4)User Data其是微軟為IE專門(mén)在系統(tǒng)中開(kāi)辟的一塊存儲(chǔ)空間，只支持Windows+IE的組合，IE的UserData能夠存儲(chǔ)完整的XML文檔，并且會(huì)將復(fù)雜的數(shù)據(jù)類型轉(zhuǎn)換為XML存儲(chǔ)起來(lái)。通過(guò)這種方式，數(shù)據(jù)會(huì)被插入到XML數(shù)據(jù)島(另一項(xiàng)只有IE中才存在的功能)中。然后整個(gè)XML數(shù)據(jù)島再被存入U(xiǎn)serData中。使用save和load方法可將UserData存儲(chǔ)區(qū)數(shù)據(jù)保存在緩存中，一旦保存后，即使瀏覽器關(guān)閉，下一次進(jìn)入該頁(yè)面，數(shù)據(jù)仍然存在，對(duì)單個(gè)文件的大小限制是128 KB，一個(gè)域名下總共可以保存1024 KB的文件，文件個(gè)數(shù)沒(méi)有限制，在受限站點(diǎn)里這兩個(gè)值分別是64 KB和640KB，所以如果考慮到各種情況的話，單個(gè)文件以控制在64 KB以下為宜。由于它概念模糊、使用困難，并且只能用于Internet Explorer，所以很少有Web開(kāi)發(fā)人員會(huì)使用這種存儲(chǔ)方式，大多數(shù)的開(kāi)發(fā)人員甚至完全不知道存在這種技術(shù)。
HTML5 本地化技術(shù) 的功能之一是本地存儲(chǔ)數(shù)據(jù)并且允許應(yīng)用程序在無(wú)網(wǎng)絡(luò)時(shí)離線運(yùn)行，有三種不同技術(shù)： Web Storage，適用于具有key/value對(duì)的基本本地存儲(chǔ);離線存儲(chǔ)，利用一個(gè)manifest文件來(lái)高速緩存所有文件以便離線使用;Web數(shù)據(jù)庫(kù)，適用于關(guān)系型數(shù)據(jù)庫(kù)存儲(chǔ)。
在HTML5技術(shù)標(biāo)準(zhǔn)中一個(gè)非常重要的功能就是可以在客戶端本地保存數(shù)據(jù)的Web storage功能，該功能使用key/value對(duì)來(lái)支持存儲(chǔ)被Web應(yīng)用程序訪問(wèn)信息和變量，具體來(lái)說(shuō)，有以下2種方式。
(1)sessionStorage.session，是指用戶在瀏覽網(wǎng)頁(yè)的時(shí)候，從進(jìn)入網(wǎng)頁(yè)開(kāi)始計(jì)算到瀏覽器關(guān)閉的這段生命周期內(nèi)，將數(shù)據(jù)保存在session對(duì)象中，這里的session對(duì)象可以用來(lái)保存在此生命周期內(nèi)的所有需要存儲(chǔ)的數(shù)據(jù)。
(2)localStorage不同于sessionStorage，localStorage將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備中，通常是硬盤(pán)，即使關(guān)閉了瀏覽器，該數(shù)據(jù)依然存在，下次訪問(wèn)的時(shí)候仍然可以繼續(xù)使用。
目前，Web應(yīng)用程序已經(jīng)變得越來(lái)越成熟了，僅通過(guò)Web Storage存儲(chǔ)一些基本數(shù)據(jù)已經(jīng)不能滿足用戶提升響應(yīng)的需求，為了讓整個(gè)應(yīng)用程序在沒(méi)有網(wǎng)絡(luò)的離線狀態(tài)下也能夠正常工作，就必須把構(gòu)成該應(yīng)用的Flash、圖片、CSS、HTML、JS等大量文件存放在本地存儲(chǔ)中，此時(shí)，即便計(jì)算機(jī)沒(méi)有與網(wǎng)絡(luò)連接，也可以通過(guò)本地的資源文件來(lái)運(yùn)行離線Web應(yīng)用程序。
Web應(yīng)用程序的本地緩存是通過(guò)頁(yè)面的Manifest文件來(lái)管理的，Manifest是一個(gè)位于Web服務(wù)器上的文件，它以清單的形式展示了需要緩存和不需要緩存的文件。在Manifest文件中，第一行是CACHE MAINFEST，它將是通知瀏覽器，需要對(duì)資源文件列表進(jìn)行緩存處理操作。
一般地，緩存處理操作如圖3所示分為以下3種：
(1)CACHE該類別指定了需要被緩存到本地的資源文件，其為可選項(xiàng)。
(2)FALLBACK該類別每行具有倆個(gè)指定的文件，在有網(wǎng)絡(luò)的情況下第一個(gè)資源文件被訪問(wèn)，在沒(méi)有網(wǎng)絡(luò)的情況下第二個(gè)資源文件被訪問(wèn)，其為可選項(xiàng)。
(3)NETWORK該類別下的文件是不會(huì)被緩存到本地，這些文件必須在有網(wǎng)絡(luò)的情況下才能使用，其為可選項(xiàng)。
圖3
通常，可以為每一個(gè)頁(yè)面文件單獨(dú)指定一個(gè)Manifest文件，也可以僅對(duì)整個(gè)應(yīng)用指定一個(gè)Manifest文件。需要說(shuō)明的是，在使用Manifest文件時(shí)，要對(duì)服務(wù)器進(jìn)行設(shè)置，讓所運(yùn)行的服務(wù)器支持text/cachemanifest這個(gè)類型，不同的服務(wù)器具體的設(shè)置有所區(qū)別。
對(duì)于簡(jiǎn)單的數(shù)據(jù)存儲(chǔ)，sessionStorage和localStorage能夠很好地完成，但對(duì)瑣碎的關(guān)系型數(shù)據(jù)進(jìn)行處理時(shí)，其就無(wú)能為力了，此時(shí)Web數(shù)據(jù)庫(kù)可以很好地解決問(wèn)題。在HTML4中，數(shù)據(jù)庫(kù)只能放在服務(wù)器端，客戶端只能通過(guò)發(fā)送請(qǐng)求的方式獲取到遠(yuǎn)程數(shù)據(jù)，而在HTML5中，內(nèi)置了一個(gè)可以通過(guò)SQL語(yǔ)法來(lái)訪問(wèn)的數(shù)據(jù)庫(kù)，其具體步驟是：
(1)通過(guò)JavaScript腳本創(chuàng)建訪問(wèn)數(shù)據(jù)庫(kù)的對(duì)象，參數(shù)依次為數(shù)據(jù)庫(kù)名、版本號(hào)、描述信息、數(shù)據(jù)大小。
var db = openDatabase (’dbname’,’1.0.0’,’DB Info’,’200000’);
(2)通過(guò)SQL語(yǔ)法進(jìn)行數(shù)據(jù)操作，需要調(diào)用transaction方法。
上述是從技術(shù)角度介紹如何使用緩存技術(shù)，下面從存儲(chǔ)介質(zhì)角度分析緩存類型，Web緩存從存儲(chǔ)介質(zhì)角度又可以分為Relation，Object，F(xiàn)ile三層，如圖4所示。每層利用相應(yīng)緩存技術(shù)，以提升網(wǎng)站響應(yīng)速度，減少HTTP請(qǐng)求，減少后臺(tái)壓力。
圖4
Relation：這一級(jí)保存了后臺(tái)session信息，權(quán)限信息，頁(yè)面中的全局狀態(tài)信息，這些信息的特點(diǎn)是體積小，關(guān)系重要。所以在存儲(chǔ)上要重視賽選。
Object：這個(gè)層面是后臺(tái)返回的數(shù)據(jù)。數(shù)據(jù)應(yīng)該滿足數(shù)量大，不易變的數(shù)據(jù)。同時(shí)這個(gè)層級(jí)要對(duì)數(shù)據(jù)做刷新機(jī)制和過(guò)期時(shí)間設(shè)置，保證數(shù)據(jù)的正常更新。
File：對(duì)頁(yè)面中的靜態(tài)資源文件進(jìn)行緩存，文件緩存是離線應(yīng)用的重點(diǎn)操作。不僅能夠提高訪問(wèn)效率，減少HTTP請(qǐng)求，還可以使頁(yè)面在脫離網(wǎng)絡(luò)的情況下繼續(xù)正常使用
經(jīng)過(guò)上述三級(jí)緩存，減少了HTTP請(qǐng)求數(shù)量，加快響應(yīng)速度，減少后臺(tái)的數(shù)據(jù)響應(yīng)次數(shù)，網(wǎng)站的響應(yīng)效率提升50%以上。
兼容性方面，HTML5的技術(shù)標(biāo)準(zhǔn)在IE老版本瀏覽器中缺乏支持，各瀏覽器對(duì)本地存儲(chǔ)的支持度如表1所示。
表1 各瀏覽器對(duì)本地存儲(chǔ)的支持度
Firefox，Safari，Chrome，Opera瀏覽器對(duì)新型前端本地化存儲(chǔ)有相當(dāng)好的兼容性處理，而IE家族相對(duì)落后，但隨著Windows 7及IE高版本瀏覽器的普及，相信在不久的將來(lái)，HTML5技術(shù)標(biāo)準(zhǔn)支持的本地化存儲(chǔ)技術(shù)將得到更廣泛的應(yīng)用。
HTML工作小組于2014年10月28日正式公布HTML5作為W3C新的推薦標(biāo)準(zhǔn)，其定義為超文本標(biāo)記語(yǔ)言(即HTML)的第五個(gè)版本。它主要用于構(gòu)建一般性的web頁(yè)面以及復(fù)雜的應(yīng)用程序。HTML5為開(kāi)放式的Web平臺(tái)的建設(shè)奠定了強(qiáng)有力的基石。HTML5的本地化存儲(chǔ)技術(shù)作為HTML5的主要功能，將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶端本地，從而大大提高了Web應(yīng)用程序的性能，減輕了服務(wù)器端的負(fù)擔(dān)，相信隨著網(wǎng)絡(luò)技術(shù)的進(jìn)步，相信HTML5本地化會(huì)在Web應(yīng)用中起到重要作用。
用友UAP平臺(tái)在本地化緩存方面，從Relation和Object層級(jí)上已經(jīng)做了很多的嘗試，同時(shí)也取得很好的效果，F(xiàn)ile層級(jí)由于瀏覽器兼容不好，采用優(yōu)雅降級(jí)的方式融合到項(xiàng)目中，利用本地化的技術(shù)手段，大幅提升了UAP產(chǎn)品的響應(yīng)速度。
