曹 宇， 陳海峰

（1.上海城市管理職業(yè)技術(shù)學(xué)院人文與信息技術(shù)學(xué)院，上海 200438;2.華東師范大學(xué)，上海 200062）

基于JSON、JavaScript、HTML5和前端存儲技術(shù)的均衡運(yùn)算框架

曹 宇， 陳海峰

（1.上海城市管理職業(yè)技術(shù)學(xué)院人文與信息技術(shù)學(xué)院，上海 200438;2.華東師范大學(xué)，上海 200062）

Web應(yīng)用框架的合理性是決定網(wǎng)站能否正常運(yùn)營的重要因素之一。文章分析了影響網(wǎng)站運(yùn)行的兩個主要性能開銷:頁面動態(tài)生成和數(shù)據(jù)庫訪問操作。針對傳統(tǒng)技術(shù)處理的局限，提出了一個低成本、由服務(wù)器和瀏覽器均衡運(yùn)算的技術(shù)框架。實驗表明，使用本框架開發(fā)的Web應(yīng)用，比之傳統(tǒng)框架，其應(yīng)用性能有了大幅提升。

性能開銷;均衡運(yùn)算框架;前端存儲

0 引言

從Web應(yīng)用技術(shù)角度看，動態(tài)網(wǎng)頁的生成過程，會消耗大量的服務(wù)器資源;頻繁的數(shù)據(jù)庫并發(fā)操作，也會造成對服務(wù)器資源的極大消耗［1］;在極端情況下，會導(dǎo)致服務(wù)器端負(fù)荷急劇上升，甚至崩潰死機(jī)，客戶端的瀏覽器則會表現(xiàn)為假死或等待超時，極大影響了網(wǎng)站的可用性［2］。目前大多數(shù)應(yīng)用開發(fā)者多會考慮采用服務(wù)器集群方案解決以上性能問題，但成本過于昂貴。本文構(gòu)思了一個均衡運(yùn)算的B/S技術(shù)框架，讓瀏覽器分擔(dān)服務(wù)器的頁面生成開銷和部分存儲開銷。實驗證明，這種方案可以在不增加硬件成本的情況下，解決性能開銷問題。

1 影響網(wǎng)站性能的兩個因素

隨著網(wǎng)絡(luò)基礎(chǔ)環(huán)境的不斷改善和提高，各級政府和各類企事業(yè)單位都建立了形式多樣的網(wǎng)站。網(wǎng)頁的響應(yīng)時間是網(wǎng)站建設(shè)質(zhì)量的關(guān)鍵指標(biāo)，直接影響著用戶的體驗。若想節(jié)省硬件資源投入，又想達(dá)到網(wǎng)站性能優(yōu)化的目的，就需要深入研究網(wǎng)頁生成原理，探索出影響網(wǎng)頁響應(yīng)速度的關(guān)鍵因素［3］。

1.1 頁面動態(tài)生成

在網(wǎng)站框架設(shè)計中，考慮到頁面訪問量與網(wǎng)站性能呈反向關(guān)系，隨著單位時間內(nèi)訪問量的增加，網(wǎng)頁響應(yīng)會變慢，當(dāng)并發(fā)訪問達(dá)到一定上限時，容易出現(xiàn)訪問滯緩的問題。若想提高網(wǎng)站性能，提升單位時間內(nèi)可承受的網(wǎng)頁訪問量，必須考慮到動態(tài)網(wǎng)頁的生成過程。常規(guī)情況下，不管是何種主流技術(shù)(如ASP.NET、JEE、PHP等)，動態(tài)頁面的生成過程都可視為運(yùn)行程序生成html頁面的過程，該過程會在服務(wù)器端消耗CPU和內(nèi)存資源。單位時間內(nèi)請求數(shù)量增大，動態(tài)頁面生成所耗資源必然上升，從而引起性能上的下降。據(jù)統(tǒng)計，Web應(yīng)用中20%～50%的數(shù)據(jù)是短時間內(nèi)不會發(fā)生變化的，但編程中又不得不將它們以動態(tài)內(nèi)容處理輸出［4］。此時，采用頁面緩存技術(shù)和片段緩存技術(shù)來解決是比較合適的方式［1］。頁面緩存技術(shù)用來減低訪問動態(tài)頁面的幾率;片段緩存技術(shù)則將一些重復(fù)取用數(shù)據(jù)(如菜單和其他布局元素)緩存到本地內(nèi)存，在各頁面中復(fù)用。需指出:緩存技術(shù)主要針對不常更新的網(wǎng)頁，對那些內(nèi)容實時性要求高的網(wǎng)頁就不合適了。

1.2 數(shù)據(jù)庫訪問操作

影響網(wǎng)站性能的另一個比較明顯的因素是對數(shù)據(jù)庫的頻繁訪問，數(shù)據(jù)庫并發(fā)訪問操作太多時，可導(dǎo)致數(shù)據(jù)庫連接過多，從而產(chǎn)生大量的訪問競爭。頁面表現(xiàn)為響應(yīng)變慢甚至超時無響應(yīng)。顯然，提高頁面響應(yīng)速度，除了尋求優(yōu)化數(shù)據(jù)存取的計算方式，還應(yīng)盡量減少服務(wù)器資源的開銷［5］。數(shù)據(jù)緩存依然是目前主要的技術(shù)解決手段，其技術(shù)原理是將長期不變數(shù)據(jù)(靜態(tài)Cache)或一部分?jǐn)?shù)據(jù)(動態(tài)Cache)緩存在用戶到后端服務(wù)器路徑上的某個位置處［6］。每次訪問數(shù)據(jù)的時候，都會先檢測相應(yīng)數(shù)據(jù)的緩存是否存在，如果存在則可直接返回緩存數(shù)據(jù)，如果不存在就連接數(shù)據(jù)庫，得到數(shù)據(jù)，顯示頁面并同時生成緩存數(shù)據(jù)。因為數(shù)據(jù)緩存技術(shù)減少了訪問數(shù)據(jù)庫的幾率，相應(yīng)訪問效能就會得以提升［7］。但問題同樣存在，對那些內(nèi)容實時性要求高、需要頻繁更新的頁面，該技術(shù)不適合處理。

2 均衡運(yùn)算框架構(gòu)思

2.1 均衡運(yùn)算框架的基本思路

目前，對于巨量的數(shù)據(jù)庫開銷和頁面開銷，除了對軟硬件升級外，一些大型網(wǎng)站通過增加Web服務(wù)器、應(yīng)用服務(wù)器、數(shù)據(jù)庫服務(wù)器進(jìn)行硬件集群化處理，將數(shù)據(jù)處理請求分配給集群中的某臺服務(wù)器進(jìn)行處理。即通過增加服務(wù)器數(shù)量來分擔(dān)運(yùn)算，從而達(dá)到性能改善的目的，但此方式成本顯然太高，非普通用戶所能承受［8-9］。若從代碼級別上，構(gòu)思一個更為經(jīng)濟(jì)的應(yīng)用框架，將服務(wù)器端的部分頁面開銷和部分存儲開銷轉(zhuǎn)移到客戶端上處理，應(yīng)該是不錯的選擇。在進(jìn)行理論思考和部分項目實踐后，整理出如下的均衡運(yùn)算框架基本思路。

2.1.1 網(wǎng)頁生成處理

(1)服務(wù)器端。將頁面動態(tài)生成開銷進(jìn)行弱化，即將頁面生成所需數(shù)據(jù)生成JSON字符串，并輸出到客戶端瀏覽器。

(2)客戶端。由JavaScript解析JSON數(shù)據(jù)，實現(xiàn)頁面的真正動態(tài)生成過程。即將最消耗運(yùn)算能力的一部份工作分散到瀏覽器去完成。

本框架上一次頁面生成過程可重新描述為:①瀏覽器向服務(wù)器發(fā)送請求;② 服務(wù)器讀取瀏覽器請求;③服務(wù)器調(diào)用業(yè)務(wù)邏輯生成頁面顯示所需數(shù)據(jù)，包裝為JSON格式;④ 服務(wù)器將JSON格式連同未渲染的html頁發(fā)回瀏覽器;⑤ 瀏覽器獲得 JSON數(shù)據(jù)，用JavaScript去組織html頁面，并顯示。

此外，實際開發(fā)中在客戶端結(jié)合AJAX技術(shù)，還可省下部分html回發(fā)開銷。

2.1.2 數(shù)據(jù)存儲

考慮將部分?jǐn)?shù)據(jù)存放在服務(wù)器端數(shù)據(jù)庫中，部分則可利用前端存儲技術(shù)分儲在每個客戶端上［10］。這樣數(shù)據(jù)庫存儲和處理也由瀏覽器方進(jìn)行了分擔(dān)，合理的使用客戶端，可以節(jié)省到系統(tǒng)資源，并有效地提高整體系統(tǒng)的運(yùn)行效率［11］。一般而言，重要的業(yè)務(wù)數(shù)據(jù)應(yīng)該存放服務(wù)器端上，且多以關(guān)系型數(shù)據(jù)庫方式存放;與用戶個性化相關(guān)數(shù)據(jù)就可存放在客戶端瀏覽器處，一般以輕量級的方式保存。

本框架下，當(dāng)服務(wù)器數(shù)據(jù)庫壓力大時，可考慮一部分?jǐn)?shù)據(jù)先保存到客戶端，有必要時再同步到服務(wù)器端。

2.2 均衡運(yùn)算框架技術(shù)

(1)JavaScript對象表示法 (JavaScript Object Notation，JSON)。是基于 JavaScript(Standard ECMA-262 3rd Edition-December 1999)的一個子集，定義著存儲和交換文本信息的語法。JSON采用完全獨(dú)立于語言的文本格式，基礎(chǔ)結(jié)構(gòu)僅有兩種，即對象和數(shù)組［12］。

對象以鍵值對結(jié)構(gòu)表述，例如{"name":"Adams"，"sex":"M"}。具體語法參見圖1。

圖1 “對象”語法圖

數(shù)組以元素在"［］"中括起來的結(jié)構(gòu)表述，如［"C"，"C++"，...］。具體語法參見圖2。

圖2 “數(shù)組”語法圖

經(jīng)過對象、數(shù)組兩種結(jié)構(gòu)就可組合成復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，如{"emps":［{"name":"Adams"，"sex":"M"}，{"name":"Bob"，"sex":"M"}］}。

本框架中，頁面顯示所需的數(shù)據(jù)在服務(wù)器端以JSON格式產(chǎn)生，并將JSON格式數(shù)據(jù)回傳給客戶端。

(2)JavaScript。屬于 Web語言，被設(shè)計為向HTML頁面增加交互性，目前是HTML5的默認(rèn)腳本語言，為所有現(xiàn)代瀏覽器接受。JavaScript具備多種功能，如HTML輸出、事件處理、改變 HTML內(nèi)容和樣式、驗證用戶輸入等［13］。作為業(yè)界成熟語言，其具體語法不再此處累述。

本框架中，JavaScript用于將服務(wù)器回傳的JSON格式數(shù)據(jù)顯示出來。如JSON格式數(shù)據(jù)emp={"name":"Bill Gates"，"age":56}，用 JavaScript將其顯示在 id值為 name的 html元素中:document.getElementById("name").innerHTML=emp.name。

(3)HTML5前端存儲。傳統(tǒng)C/S應(yīng)用可將一部分?jǐn)?shù)據(jù)存儲在前端(客戶端)，來分擔(dān)部分存儲運(yùn)算壓力和網(wǎng)絡(luò)傳輸壓力。B/S應(yīng)用也可借鑒其概念，即把信息存儲到客戶的瀏覽器端，并在以后需要的時候進(jìn)行獲取。目前，瀏覽器可采用技術(shù)有 Cookie、Flash SharedObject、Google Gears 和 IE User Data［14］。其中Cookie可普遍使用于各類瀏覽器中，但局限性明顯，一是容量的限制，多數(shù)瀏覽器把它限制在4K之內(nèi)，二是用戶從安全考慮，有時會禁用Cookie;剩下幾種技術(shù)都與瀏覽器類型和插件相關(guān)，使用限制性更大，而不宜采用。而HTML5的本地存儲技術(shù)(local storage)似乎就是為解決這一問題而設(shè)計的，它支持每個網(wǎng)站5MB的本地存儲，一般應(yīng)用顯然已經(jīng)足夠。此外，各家主流瀏覽器(IE8.0+、Chrome4.0+、Safari4.0+、Firefox3.0+、Opera10.5+、iphone2.0+、Android2.0+)在不同程度上都已支持HTML5本地存儲［15］。

HTML5本地存儲技術(shù)有三種方式:Web Storage、離線存儲和Web數(shù)據(jù)庫。Web Storage以鍵值對結(jié)構(gòu)存儲基本數(shù)據(jù)，可選擇放置到session或本地設(shè)備中;離線存儲以文件清單方式告知瀏覽器來存儲其指定的資源文件;Web數(shù)據(jù)庫是在瀏覽器處用JavaScript創(chuàng)建出數(shù)據(jù)庫，并可用SQL語法對其操作［15］。

本框架可根據(jù)應(yīng)用場合的不同，來靈活選用本地存儲技術(shù)方式。但鑒于目前主流瀏覽器對Web Storage支持的最為透徹，所以目前應(yīng)用框架中建議使用Web Storage來分擔(dān)存儲部分應(yīng)用數(shù)據(jù)。

3 均衡運(yùn)算框架實例解析

以ASP.NET考試系統(tǒng)實例來解析框架，簡潔起見，僅選擇兩功能實現(xiàn)來說明:試卷的生成和顯示;試卷數(shù)據(jù)本地化保存。

3.1 試卷的生成和顯示

服務(wù)器端用Entity Framework訪問數(shù)據(jù)庫隨機(jī)抽取試卷，用 ASP.NET MVC3技術(shù)將試卷數(shù)據(jù)生成JSON字符串并輸出到客戶端瀏覽器。注意，服務(wù)器端并不用控件來生成頁面輸出，生成考卷的過程將在客戶端通過JavaScript完成。即將最消耗運(yùn)算能力的一部份工作(頁面渲染)分散到客戶端瀏覽器處了。示意代碼如下:

(2)瀏覽器端。獲取JSON格式的試卷數(shù)據(jù)，通過jQuery將數(shù)據(jù)和靜態(tài)html代碼包裝成html標(biāo)簽元素，并添加到頁面的DOM樹之中來顯示頁面。示意代碼如下:

3.2 試卷數(shù)據(jù)本地化保存

判斷是否已有本地試卷數(shù)據(jù)存在，如若沒有才向服務(wù)器發(fā)起一個AJAX請求以獲取。如果本地已有相應(yīng)試卷數(shù)據(jù)，則直接生成元素并添加到頁面的DOM樹中。因為本地數(shù)據(jù)的存在，瀏覽器自己用JavaScript就能渲染頁面，減少了向服務(wù)器請求發(fā)送，即減少了服務(wù)器端的處理開銷;另外，本地數(shù)據(jù)的存在帶來了離線處理的功能。瀏覽器端示意代碼如下:

3.3 框架實驗效果

將考試系統(tǒng)安裝在配置為酷睿i7四核處理器的PC檔服務(wù)器上，用Visual Studio 2010內(nèi)部測試工具模擬400用戶并發(fā)訪問，對該系統(tǒng)負(fù)載測試。在未改換框架前，面對400用戶并發(fā)訪問量，服務(wù)器CPU瞬間達(dá)到100%，且無下降趨勢;改換均衡運(yùn)算框架，同樣處理400用戶并發(fā)訪問，服務(wù)器CPU一直穩(wěn)定在40%～60%，這說明本設(shè)計框架對服務(wù)器分擔(dān)運(yùn)算開銷作用明顯。此外，在一場有200多名學(xué)生參與的現(xiàn)場考試中，未出現(xiàn)以往大量瀏覽器假死或長時無反應(yīng)現(xiàn)象，避免了需分場次考試的尷尬。實踐表明，使用本框架開發(fā)的Web應(yīng)用，其可用性較之傳統(tǒng)框架應(yīng)用有了大幅提升。

4 結(jié)語

雖然網(wǎng)站性能優(yōu)化可以通過增加服務(wù)器，用集群方式來提高，但成本過高。從改造Web應(yīng)用的技術(shù)框架入手，將服務(wù)器高耗運(yùn)算分發(fā)到客戶端瀏覽器處理，就能在不增加硬件成本的前提下，起到明顯改善網(wǎng)站性能的效果。使用本文基于JSON、JavaScript和前端存儲技術(shù)的均衡運(yùn)算框架，可減小服務(wù)器端兩個主要方面的壓力:①高并發(fā)訪問所造成的數(shù)據(jù)庫壓力;②頻繁訪問網(wǎng)頁而造成的頁面動態(tài)生成開銷壓力。該框架的項目實踐表明:對于性能要求較高且硬件預(yù)算不高的網(wǎng)站極具參考價值;此外，若和集群、緩存技術(shù)、數(shù)據(jù)庫性能優(yōu)化、Web組件分離等其它技術(shù)綜合使用，應(yīng)可發(fā)揮更大的作用。

［1］ 張建超，張連堂.網(wǎng)站框架演變技術(shù)研究［J］.現(xiàn)代計算機(jī)，2012(3):51-55.

ZHANG Jian-chao，ZHANGLian-tang.ResearchontheWebsite Architecture Evolution Technology［J］.Modem Computer，2012(3):51-55.

［2］ 于大偉，田 地.基于WEB信息系統(tǒng)的優(yōu)化管理及架構(gòu)調(diào)整［J］.長春工程學(xué)院學(xué)報(自然科學(xué)版)，2006，7(1):54-56.

YU Da-wei，TIANDi.Optimizing management and adjustment of structure about information system based on Web［J］.Journal of Changchun Institute of Technology(Natural Sciences Edition)，2006，7(1):54-56.

［3］ 寧玉文，高東懷.高校門戶網(wǎng)站前端性能優(yōu)化策略探析［J］.信息技術(shù)，2012(2):118-122.

NING Yu-wen，GAO Dong-huai.Exploration on front performance optimization strategy of college portal website［J］.Information Technology，2012(2):118-122.

［4］ 高 飛，侯瑞春，周志明.Web頁面緩存技術(shù)在業(yè)務(wù)系統(tǒng)中的應(yīng)用［J］.計算機(jī)技術(shù)與發(fā)展，2012(2):118-122.

GAO Fei，HOURui-chun，ZHOUZhi-ming.Application ofWeb Caching Technology in Business System［J］.Computer Technology and Development，2012(2):118-122.

［5］ 白 雪，陳廣山.基于B/S結(jié)構(gòu)的管理信息系統(tǒng)中合理分布統(tǒng)計運(yùn)算的研究［J］.黑龍江工程學(xué)院學(xué)報(自然科學(xué)版)，2005，19(1):41-43.

BAI Xue，CHEN GUANG-shan.Statistical calculation of reasonable distribution research of MIS based on B/S architecture［J］.Journal of Heilongjiang Institute of Technology，2005，19(1):41-43.

［6］ 周曉云，覃雄派.DB Facade:一個保證數(shù)據(jù)時效性的Web數(shù)據(jù)庫Cache［J］.蘇州大學(xué)學(xué)報(工科版)，2008，28(2):67-72.

Zhou Xiaoyun，QinXiongpai.DB Facade:A Web Database Cache with Fresh Data［J］.Journal of Suzhou University(Engineering Science Edition)，2008，28(2):67-72.

［7］ 曹 愷，王海芹，楊永俠.提高高訪問量交互式網(wǎng)站性能［J］.計算機(jī)工程與應(yīng)用，2007，43(12):170-172.

CAO Kai，WANGHai-qin，YANG Yong-xia.Enhance highly accessed interactive Website performance［J］.Computer Engineering and Applications，2007，43(12):170-172.

［8］ 趙水寧，邵軍力.多Web服務(wù)器負(fù)載均衡技術(shù)的研究［J］.電信科學(xué)，2001，17(7):6-8.

ZHAO Shui-ning，SHAO Jun-li，YANG Yong-xia.Research on Load Balancing for Multi-web Servers［J］.Telecommunications science，2001，17(7):6-8.

［9］ 吳 蔚.網(wǎng)絡(luò)站點(diǎn)的負(fù)載均衡技術(shù)探索［J］.計算機(jī)時代，2004(7):5-6.

WU Wei.Research on Load Balancing technology for web site［J］.Computer Era，2004(7):5-6.

［10］ 李 娜.基于“RIA”架構(gòu)下的多媒體教學(xué)平臺本地存儲技術(shù)研究［J］.產(chǎn)業(yè)與科技論壇，2012(20):74-76.

LI Na.Research on the local storage technology based on the RIA framework of multimedia teaching platform［J］.Industrial＆ Science Tribune，2012(20):74-76.

［11］ 白 雪，陳廣山.基于B/S結(jié)構(gòu)在線考試系統(tǒng)的設(shè)計與研究［J］.中國教育技術(shù)裝備，2004，12:3-5.

BAI Xue，CHEN GUANG-shan.Statistical calculation of reasonable distribution research of MIS based on B/S architecture［J］.China Educational Technique ＆ Equipment，2004，12:3-5.

［12］ 張 濤，黃 強(qiáng)，毛磊雅.一個基于JSON的對象序列化算法［J］.計算機(jī)工程與應(yīng)用，2007，43(15):98-133.

ZHANG Tao，HUANGQiang，MAO Lei-ya.Algorithm ofobject serialization based on JSON［J］.ComputerEngineering and Applications，2007，43(15):98-133.

［13］ Danny G.JavaScript寶典［M］.第4版.北京:電子工業(yè)出版社，2002.

［14］ 錢海軍.基于HTML5的客戶端本地MIS系統(tǒng)的設(shè)計與實現(xiàn)［J］.現(xiàn)代計算機(jī)，2012(15):72-74.

QIAN Hai-jun.Design and Implementation of Client MIS Based on HTML5［J］.Modem Computer，2012(15):72-74.

［15］ 李燁民.基于HTML5的前端本地化存儲技術(shù)［J］.成都大學(xué)學(xué)報:自然科學(xué)版，2012，31(1):67-69.

LI Ye-min.Localized Storage Technology of Front-End Based on HTML 5［J］.Journal of Chengdu University(Natural Science)，2012，31(1):67-69.

Operation-Balancing Framework Based onJSON，JavaScrip and Front-end Storage Technology

CAO yu，CHEN Hai-feng
(Branch of Humanities and Information Technology，Shanghai Technical College of Urban Management，Shanghai 200438，China;East China Normal University，Shanghai 200062，China)

Application framework is one of the most important factors in the future that will inflenceinfluence the operation performance of websites.This paper analyzes two main influences of performance overhead website operation.，And and discusses the limitations of the related technologies.Finally，it puts forward a low cost framework which can balance operation pressure between server and browser.

performance overhead;operation-balancing frameworkb;front-end storage

TP 311.1

A

1006－7167(2014)05－0116－04

2013－07－01

曹 宇(1975－)，男，上海人，碩士，講師，工程師，研究方向:計算機(jī)應(yīng)用技術(shù)。

Tel.:13701830596;E-mail:caoyu17@163.com