用友UAP馬太航解析WEB本地化存儲技術(shù)

責(zé)任編輯:editor004

2014-11-11 21:01:50

摘自:論壇

Web應(yīng)用程序的本地緩存是通過頁面的Manifest文件來管理的,Manifest是一個(gè)位于Web服務(wù)器上的文件,它以清單的形式展示了需要緩存和不需要緩存的文件。兼容性方面,HTML5的技術(shù)標(biāo)準(zhǔn)在IE老版本瀏覽器中缺乏支持,各瀏覽器對本地存儲的支持度如表1所示。

數(shù)據(jù)顯示,全球互聯(lián)網(wǎng)用戶以及智能手機(jī)用戶的數(shù)量,增幅正在逐漸放緩。但是,移動數(shù)據(jù)流量卻取得爆炸式的增長,其年度增幅達(dá)到了81%,且增長速度正在加快。

移動數(shù)據(jù)流量增幅逐漸攀升用戶越來越依賴于移動終端提供的日常社交、獲取信息、商業(yè)買賣等服務(wù)。大量的訪問,提升了服務(wù)器端負(fù)載壓力。移動終端常常會出現(xiàn)頁面加載緩慢的狀況,這會大大降低終端客戶體驗(yàn)。如果將資源文件、代碼邏輯文件、結(jié)構(gòu)文件、樣式文件緩存在終端設(shè)備上,不僅能夠降低服務(wù)器壓力,還能夠減少網(wǎng)絡(luò)延遲、減少網(wǎng)絡(luò)帶寬消耗、減少終端用戶流量成本。

HTML5又給本地化帶來更多的選擇。目前前端緩存技術(shù)從技術(shù)類型分成傳統(tǒng)本地化技術(shù)與HTML5本地化技術(shù)兩類,如圖2所示:

傳統(tǒng)本地化技術(shù)又細(xì)分為Cookie,F(xiàn)lash Sharedobject,Goole Gears和User Data。

(1)Cookie,在Web中得到廣泛應(yīng)用,但其局限性非常明顯,容量太小,早期有些站點(diǎn)會因?yàn)槌鲇诎踩目紤]而禁用Cookie,因?yàn)镃ookie的內(nèi)容會隨著頁面請求一并發(fā)往服務(wù)器當(dāng)前Cookie已經(jīng)被各大網(wǎng)站完全支持,在UAP各個(gè)web平臺也一并支持。

(2)Flash SharedObject,其使用的是kissy的store模塊來調(diào)用Flash SharedObject。Flash SharedObject的優(yōu)點(diǎn)是容量適中,基本上解決了兼容性問題,缺點(diǎn)是要在頁面中引入特定的swf和js文件,增加額外的HTTP請求負(fù)擔(dān),且處理繁瑣。

(3)Google Gears是一個(gè)基于Firefox和IE的插件,要使用它,必須先安裝相應(yīng)插件,但其官方網(wǎng)站目前已經(jīng)停止更新。

(4)User Data其是微軟為IE專門在系統(tǒng)中開辟的一塊存儲空間,只支持Windows+IE的組合,IE的UserData能夠存儲完整的XML文檔,并且會將復(fù)雜的數(shù)據(jù)類型轉(zhuǎn)換為XML存儲起來。通過這種方式,數(shù)據(jù)會被插入到XML數(shù)據(jù)島(另一項(xiàng)只有IE中才存在的功能)中。然后整個(gè)XML數(shù)據(jù)島再被存入U(xiǎn)serData中。使用save和load方法可將UserData存儲區(qū)數(shù)據(jù)保存在緩存中,一旦保存后,即使瀏覽器關(guān)閉,下一次進(jìn)入該頁面,數(shù)據(jù)仍然存在,對單個(gè)文件的大小限制是128 KB,一個(gè)域名下總共可以保存1024 KB的文件,文件個(gè)數(shù)沒有限制,在受限站點(diǎn)里這兩個(gè)值分別是64 KB和640KB,所以如果考慮到各種情況的話,單個(gè)文件以控制在64 KB以下為宜。由于它概念模糊、使用困難,并且只能用于Internet Explorer,所以很少有Web開發(fā)人員會使用這種存儲方式,大多數(shù)的開發(fā)人員甚至完全不知道存在這種技術(shù)。

HTML5本地化技術(shù)的功能之一是本地存儲數(shù)據(jù)并且允許應(yīng)用程序在無網(wǎng)絡(luò)時(shí)離線運(yùn)行,有三種不同技術(shù): Web Storage,適用于具有key/value對的基本本地存儲;離線存儲,利用一個(gè)manifest文件來高速緩存所有文件以便離線使用;Web數(shù)據(jù)庫,適用于關(guān)系型數(shù)據(jù)庫存儲。

在HTML5技術(shù)標(biāo)準(zhǔn)中一個(gè)非常重要的功能就是可以在客戶端本地保存數(shù)據(jù)的Web storage功能,該功能使用key/value對來支持存儲被Web應(yīng)用程序訪問信息和變量,具體來說,有以下2種方式。

(1)sessionStorage.session,是指用戶在瀏覽網(wǎng)頁的時(shí)候,從進(jìn)入網(wǎng)頁開始計(jì)算到瀏覽器關(guān)閉的這段生命周期內(nèi),將數(shù)據(jù)保存在session對象中,這里的session對象可以用來保存在此生命周期內(nèi)的所有需要存儲的數(shù)據(jù)。

(2)localStorage不同于sessionStorage,localStorage將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備中,通常是硬盤,即使關(guān)閉了瀏覽器,該數(shù)據(jù)依然存在,下次訪問的時(shí)候仍然可以繼續(xù)使用。

目前,Web應(yīng)用程序已經(jīng)變得越來越成熟了,僅通過Web Storage存儲一些基本數(shù)據(jù)已經(jīng)不能滿足用戶提升響應(yīng)的需求,為了讓整個(gè)應(yīng)用程序在沒有網(wǎng)絡(luò)的離線狀態(tài)下也能夠正常工作,就必須把構(gòu)成該應(yīng)用的Flash、圖片、CSS、HTML、JS等大量文件存放在本地存儲中,此時(shí),即便計(jì)算機(jī)沒有與網(wǎng)絡(luò)連接,也可以通過本地的資源文件來運(yùn)行離線Web應(yīng)用程序。

Web應(yīng)用程序的本地緩存是通過頁面的Manifest文件來管理的,Manifest是一個(gè)位于Web服務(wù)器上的文件,它以清單的形式展示了需要緩存和不需要緩存的文件。在Manifest文件中,第一行是CACHE MAINFEST,它將是通知瀏覽器,需要對資源文件列表進(jìn)行緩存處理操作。

一般地,緩存處理操作如圖3所示分為以下3種:

(1)CACHE該類別指定了需要被緩存到本地的資源文件,其為可選項(xiàng)。

(2)FALLBACK該類別每行具有倆個(gè)指定的文件,在有網(wǎng)絡(luò)的情況下第一個(gè)資源文件被訪問,在沒有網(wǎng)絡(luò)的情況下第二個(gè)資源文件被訪問,其為可選項(xiàng)。

(3)NETWORK該類別下的文件是不會被緩存到本地,這些文件必須在有網(wǎng)絡(luò)的情況下才能使用,其為可選項(xiàng)。

通常,可以為每一個(gè)頁面文件單獨(dú)指定一個(gè)Manifest文件,也可以僅對整個(gè)應(yīng)用指定一個(gè)Manifest文件。需要說明的是,在使用Manifest文件時(shí),要對服務(wù)器進(jìn)行設(shè)置,讓所運(yùn)行的服務(wù)器支持text/cachemanifest這個(gè)類型,不同的服務(wù)器具體的設(shè)置有所區(qū)別。

對于簡單的數(shù)據(jù)存儲,sessionStorage和localStorage能夠很好地完成,但對瑣碎的關(guān)系型數(shù)據(jù)進(jìn)行處理時(shí),其就無能為力了,此時(shí)Web數(shù)據(jù)庫可以很好地解決問題。在HTML4中,數(shù)據(jù)庫只能放在服務(wù)器端,客戶端只能通過發(fā)送請求的方式獲取到遠(yuǎn)程數(shù)據(jù),而在HTML5中,內(nèi)置了一個(gè)可以通過SQL語法來訪問的數(shù)據(jù)庫,其具體步驟是:

(1)通過JavaScript腳本創(chuàng)建訪問數(shù)據(jù)庫的對象,參數(shù)依次為數(shù)據(jù)庫名、版本號、描述信息、數(shù)據(jù)大小。

var db = openDatabase (’dbname’,’1.0.0’,’DB Info’,’200000’);

(2)通過SQL語法進(jìn)行數(shù)據(jù)操作,需要調(diào)用transaction方法。

上述是從技術(shù)角度介紹如何使用緩存技術(shù),下面從存儲介質(zhì)角度分析緩存類型,Web緩存從存儲介質(zhì)角度又可以分為Relation,Object,F(xiàn)ile三層,如圖4所示。每層利用相應(yīng)緩存技術(shù),以提升網(wǎng)站響應(yīng)速度,減少HTTP請求,減少后臺壓力。

Relation:這一級保存了后臺session信息,權(quán)限信息,頁面中的全局狀態(tài)信息,這些信息的特點(diǎn)是體積小,關(guān)系重要。所以在存儲上要重視賽選。

Object:這個(gè)層面是后臺返回的數(shù)據(jù)。數(shù)據(jù)應(yīng)該滿足數(shù)量大,不易變的數(shù)據(jù)。同時(shí)這個(gè)層級要對數(shù)據(jù)做刷新機(jī)制和過期時(shí)間設(shè)置,保證數(shù)據(jù)的正常更新。

File:對頁面中的靜態(tài)資源文件進(jìn)行緩存,文件緩存是離線應(yīng)用的重點(diǎn)操作。不僅能夠提高訪問效率,減少HTTP請求,還可以使頁面在脫離網(wǎng)絡(luò)的情況下繼續(xù)正常使用

經(jīng)過上述三級緩存,減少了HTTP請求數(shù)量,加快響應(yīng)速度,減少后臺的數(shù)據(jù)響應(yīng)次數(shù),網(wǎng)站的響應(yīng)效率提升50%以上。

兼容性方面,HTML5的技術(shù)標(biāo)準(zhǔn)在IE老版本瀏覽器中缺乏支持,各瀏覽器對本地存儲的支持度如表1所示。

 

表1 各瀏覽器對本地存儲的支持度

Firefox,Safari,Chrome,Opera瀏覽器對新型前端本地化存儲有相當(dāng)好的兼容性處理,而IE家族相對落后,但隨著Windows 7及IE高版本瀏覽器的普及,相信在不久的將來,HTML5技術(shù)標(biāo)準(zhǔn)支持的本地化存儲技術(shù)將得到更廣泛的應(yīng)用。

HTML工作小組于2014年10月28日正式公布HTML5作為W3C新的推薦標(biāo)準(zhǔn),其定義為超文本標(biāo)記語言(即HTML)的第五個(gè)版本。它主要用于構(gòu)建一般性的web頁面以及復(fù)雜的應(yīng)用程序。HTML5為開放式的Web平臺的建設(shè)奠定了強(qiáng)有力的基石。HTML5的本地化存儲技術(shù)作為HTML5的主要功能,將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶端本地,從而大大提高了Web應(yīng)用程序的性能,減輕了服務(wù)器端的負(fù)擔(dān),相信隨著網(wǎng)絡(luò)技術(shù)的進(jìn)步,相信HTML5本地化會在Web應(yīng)用中起到重要作用。

用友UAP平臺在本地化緩存方面,從Relation和Object層級上已經(jīng)做了很多的嘗試,同時(shí)也取得很好的效果,F(xiàn)ile層級由于瀏覽器兼容不好,采用優(yōu)雅降級的方式融合到項(xiàng)目中,利用本地化的技術(shù)手段,大幅提升了UAP產(chǎn)品的響應(yīng)速度。

鏈接已復(fù)制,快去分享吧

企業(yè)網(wǎng)版權(quán)所有?2010-2024 京ICP備09108050號-6京公網(wǎng)安備 11010502049343號