高效的Web性能提升機(jī)制研究

周 峰，王 征

(西南財(cái)經(jīng)大學(xué) 經(jīng)濟(jì)信息工程學(xué)院，四川 成都 611130)

高效的Web性能提升機(jī)制研究

周 峰，王 征

(西南財(cái)經(jīng)大學(xué) 經(jīng)濟(jì)信息工程學(xué)院，四川 成都 611130)

一次性加載技術(shù)導(dǎo)致B/S項(xiàng)目的頁面響應(yīng)時(shí)間激增，嚴(yán)重影響到了用戶的操作體驗(yàn)。為了避免這類問題，本文提出了優(yōu)化級(jí)聯(lián)的下拉列表方法，分級(jí)的加載數(shù)據(jù)項(xiàng)，減少無效的數(shù)據(jù)傳送，可以在不更新整個(gè)頁面的情況下重新加載數(shù)據(jù)；給出了通過AJAX和Servlet配合，實(shí)現(xiàn)無刷新的多級(jí)級(jí)聯(lián)下拉列表的實(shí)現(xiàn)案例。性能分析和實(shí)驗(yàn)結(jié)果證明：該方法減少了無效數(shù)據(jù)的傳送，增強(qiáng)了用戶體驗(yàn)和頁面的響應(yīng)速度，提高了系統(tǒng)性能。

AJAX；性能；下拉列表

1引言

當(dāng)今世界的WEB發(fā)展，已經(jīng)賦予了更多的涵義，我們的工作平臺(tái)也由單一的操作系統(tǒng)平臺(tái)轉(zhuǎn)向了網(wǎng)絡(luò)應(yīng)用平臺(tái)，WEB應(yīng)用程序已成為現(xiàn)代人們協(xié)同辦公不可缺少的部分。在眾多的WEB應(yīng)用系統(tǒng)中，性能是WEB應(yīng)用程序成功與否的關(guān)鍵因素，響應(yīng)時(shí)間則是性能的一個(gè)重要指標(biāo)，尤其是從用戶的角度來看，隨著同時(shí)訪問的用戶數(shù)的增加，WEB應(yīng)用程序的響應(yīng)時(shí)間也會(huì)相應(yīng)增加，當(dāng)其增加到用戶無法接受的程度時(shí)，用戶便會(huì)失去使用該系統(tǒng)的耐心，終端用戶所感到的時(shí)間延遲已經(jīng)成為今天WEB應(yīng)用的主要性能問題。隨著WEB應(yīng)用的普及，用戶需要更好，更快，更有效，更個(gè)性化的服務(wù)和應(yīng)用。

2性能提升方案

2.1現(xiàn)存問題。

級(jí)聯(lián)下拉列表是網(wǎng)絡(luò)應(yīng)用程序常用的組件，但傳統(tǒng)的級(jí)聯(lián)下拉列表的操作是一次性將所有數(shù)據(jù)加載到頁面，這也是最為常見的處理方式，即，將所有用到的數(shù)據(jù)一次性的加載到頁面中，然后利用JavaScript腳本語言響應(yīng)用戶事件，獲取第一級(jí)的下拉列表值，然后依據(jù)該值在頁面里獲取數(shù)據(jù)對(duì)下一級(jí)的下拉列表進(jìn)行初始化，用這樣的方式處理，理解起來比較簡單，實(shí)現(xiàn)也相對(duì)容易，但有個(gè)不足之處，如果下拉列表項(xiàng)的數(shù)據(jù)量很大，則頁面里所包含的數(shù)據(jù)也是巨大的，這樣會(huì)增加頁面的響應(yīng)時(shí)間，影響到用戶的操作體驗(yàn)。

如果有一個(gè)三級(jí)的級(jí)聯(lián)列表，每級(jí)的數(shù)據(jù)項(xiàng)為十個(gè)，如果一次性下載所有數(shù)據(jù)放在頁面里，那么頁面里的數(shù)據(jù)記錄為1110個(gè)，而實(shí)際上只會(huì)用到其中30個(gè)數(shù)據(jù)，這樣會(huì)有1080個(gè)無效的數(shù)據(jù)記錄，占所有記錄數(shù)的97%以上，如果下拉級(jí)數(shù)增加，每一級(jí)的列表項(xiàng)增加，無效記錄比例還會(huì)增加，頁面文件的大小也會(huì)急劇增加，這樣的開銷是驚人的。

為了提高用戶的體驗(yàn)和頁面的響應(yīng)速度，本文對(duì)這種級(jí)聯(lián)的下拉列表進(jìn)行了優(yōu)化，分級(jí)加載數(shù)據(jù)項(xiàng)，減少無效的數(shù)據(jù)傳送，在不更新整個(gè)頁面的情況下重新加載數(shù)據(jù)，AJAX正好滿足了這種技術(shù)要求，配合后臺(tái)的Servlet處理數(shù)據(jù)，[1]可以實(shí)現(xiàn)無刷新的多級(jí)級(jí)聯(lián)下拉列表。

圖1 傳統(tǒng)訪問方式與使用AJAX訪問方式比較

AJAX實(shí)際上是將幾種技術(shù)進(jìn)行整合，形成一個(gè)功能強(qiáng)大的新技術(shù)。[2]AJAX包括以下幾個(gè)部分：

基于標(biāo)準(zhǔn)化的XHTML和CSS

使用文檔對(duì)象模型DOM作為頁面元素的動(dòng)態(tài)顯示和交互

通過XML和XSLT進(jìn)行數(shù)據(jù)交換

使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)傳送

使用JavaScript對(duì)以上的技術(shù)進(jìn)行整合

AJAX的核心是JavaScript對(duì)象XMLHttpRequest。[3]它是一種支持異步請(qǐng)求的技術(shù)，XMLHttpRequest使你可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不是阻塞用戶。

AJAX的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層，使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，得于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)。[4]通過在用戶和服務(wù)器之間引入一個(gè)AJAX引擎，可以消除WEB的開始→停止→開始→停止這樣的交互過程。

2.2解決方案。

在傳統(tǒng)的WEB應(yīng)用系統(tǒng)中，客戶端和服務(wù)器之間為同步交互模式，即用戶提交數(shù)據(jù)后，等待服務(wù)器響應(yīng)，服務(wù)器在處理完了響應(yīng)后，再把頁面重新返回給客戶端，而AJAX則可以使客戶端和服務(wù)器進(jìn)行異步的數(shù)據(jù)交換，用戶在頁面上操作的同時(shí)，通過AJAX在后臺(tái)進(jìn)行數(shù)據(jù)的交換(詳見圖1)。[5]

介于可以通過AJAX動(dòng)態(tài)的獲取數(shù)據(jù)，本文提出在初始化頁面時(shí)可以只對(duì)頂級(jí)下拉列表項(xiàng)進(jìn)行數(shù)據(jù)填充，其下的菜單項(xiàng)則通過AJAX動(dòng)態(tài)獲取數(shù)據(jù)進(jìn)行初始化，用戶在選擇第一級(jí)的列表項(xiàng)后，通過腳本獲取選項(xiàng)的值，將該值交由XMLHttpRequest對(duì)象發(fā)送到服務(wù)器端，由服務(wù)器根據(jù)獲取的值構(gòu)造下一級(jí)的列表選項(xiàng)，并將構(gòu)造好的選項(xiàng)以XML格式重新發(fā)送到客戶端，客戶端對(duì)收到的數(shù)據(jù)進(jìn)行解析，利用JavaScript腳本技術(shù)修改DOM生成第二級(jí)新的列表項(xiàng)顯示于頁面，[6]至此，通過一次少量的數(shù)據(jù)交換實(shí)現(xiàn)了第二級(jí)的下拉列表項(xiàng)構(gòu)造。如果繼續(xù)操作二級(jí)列表，AJAX會(huì)繼續(xù)向服務(wù)器請(qǐng)求當(dāng)前二級(jí)列表選項(xiàng)對(duì)應(yīng)的第三級(jí)列表的所有數(shù)據(jù)，重新生成第三級(jí)的列表項(xiàng)，以此類推。在此過程中，客戶端向服務(wù)器發(fā)送的數(shù)據(jù)為前一級(jí)選項(xiàng)的值，而服務(wù)器返回的數(shù)據(jù)僅是用于構(gòu)造第二級(jí)下拉列表項(xiàng)的文本字串，傳送的數(shù)據(jù)均已是最小狀態(tài)，經(jīng)過這樣的處理后，傳輸數(shù)據(jù)量最小，傳輸速度快，頁面在無整個(gè)頁面刷新的情況下迅速響應(yīng)，頁面無停頓，給用戶很好的體驗(yàn)。

為了與傳統(tǒng)的方法作對(duì)比，我們現(xiàn)以如下的數(shù)據(jù)作性能上的分析，若頁面有N個(gè)下拉列表，每個(gè)列表項(xiàng)里的數(shù)據(jù)為10項(xiàng)，按照傳統(tǒng)的方法一次加載所有的數(shù)據(jù)到頁面，則加載的數(shù)據(jù)項(xiàng)為10N，按照本文提出的方法，加載到頁面的數(shù)據(jù)項(xiàng)為10N，如表1所示。

表1 算法性能對(duì)比

3具體實(shí)現(xiàn)

筆者將該方法應(yīng)用到一商業(yè)系統(tǒng)的開發(fā)中，獲得了很好的效果，數(shù)據(jù)庫表結(jié)構(gòu)如表2所示，在頁面的快速響應(yīng)方面達(dá)到了預(yù)期的目標(biāo)。當(dāng)頁面進(jìn)行初始化加載時(shí)，僅向服務(wù)器請(qǐng)求第一級(jí)下拉列表選項(xiàng)的數(shù)據(jù)，即所有的城市(詳見圖2)，除了第一級(jí)之外的數(shù)據(jù)不加載到頁面，這樣處理之后，第一次加載到頁面的數(shù)據(jù)不多，頁面響應(yīng)速度很快。當(dāng)用戶在選擇好所屬城市的時(shí)候，通過JavaScript觸發(fā)事件，創(chuàng)建一個(gè)XMLHttpRequest請(qǐng)求，在后臺(tái)通過該XMLHttpRequest請(qǐng)求將用戶所選擇城市的值傳送到服務(wù)器端，服務(wù)器對(duì)收到的ID值和數(shù)據(jù)庫中PID的值進(jìn)行匹配，構(gòu)造出SQL查詢出屬于該城市下的所有商家信息，WEB服務(wù)器在完成了數(shù)據(jù)查詢后，將僅符合要求的數(shù)據(jù)以XML的方式發(fā)送到客戶端，此時(shí)客戶端收到的數(shù)據(jù)僅為構(gòu)造用戶選擇商家的列表項(xiàng)，當(dāng)客戶端收到數(shù)據(jù)后，將接收到的數(shù)據(jù)交由客戶端的AJAX引擎進(jìn)行處理，通過修改DOM完成商家下拉列表項(xiàng)的構(gòu)造，供用戶進(jìn)行商家的選擇。同樣的原理，在用戶進(jìn)行商家的選擇之后，客戶端通過JavaScript響應(yīng)用戶操作，觸發(fā)事件，通過創(chuàng)建的XMLHttpRequest將用戶選擇的商家ID值發(fā)送到服務(wù)器端請(qǐng)求數(shù)據(jù)，服務(wù)器通過收到的商家ID值查詢數(shù)據(jù)庫獲取該商家所有產(chǎn)品的數(shù)據(jù)，并把產(chǎn)品數(shù)據(jù)按XML的格式發(fā)送到客戶端，客戶端在收到數(shù)據(jù)后，利用AJAX引擎修改DOM構(gòu)造第三級(jí)的產(chǎn)品列表選項(xiàng)，供用戶選擇。[7]

根據(jù)這樣的處理方式，無論下拉列表有多少級(jí)，也無論每項(xiàng)列表的數(shù)據(jù)量有多少，所需的時(shí)間基本上是維持在50毫秒以下，這個(gè)時(shí)間和服務(wù)器的性能有關(guān)，其時(shí)間消耗包括了創(chuàng)建XMLHttpRequest對(duì)象發(fā)送到服務(wù)器端的時(shí)間，數(shù)據(jù)庫查詢的時(shí)間，以及客戶端在收到數(shù)據(jù)后利用DOM技術(shù)構(gòu)造下拉列表的時(shí)間。相對(duì)于用戶的操作速度來說是很快的，用戶在操作過程中完全感覺不到停頓，操作過程也很流暢，完全解決了一次性加載數(shù)據(jù)時(shí)頁面響應(yīng)過慢的問題。

表2 下拉列表項(xiàng)表結(jié)構(gòu)

圖2 算法實(shí)際應(yīng)用

4性能分析

利用傳統(tǒng)方法在處理大量數(shù)據(jù)時(shí)，除加載數(shù)據(jù)到頁面所需要的時(shí)間讓用戶無法忍受外，還存在很多無效的操作，在用戶完成第一級(jí)列表的選擇后，會(huì)通過腳本響應(yīng)用戶事件，在加載到頁面里的數(shù)據(jù)里查找所需要的下級(jí)數(shù)據(jù)，當(dāng)然這樣的查詢操作是在客戶端運(yùn)行的，每次對(duì)用戶操作的響應(yīng)都會(huì)查詢所有的數(shù)據(jù)，大量無用的數(shù)據(jù)被多次查詢，既浪費(fèi)系統(tǒng)資源，也耗費(fèi)了操作時(shí)間，這樣的處理方式顯然不夠優(yōu)化。

圖3 算法性能對(duì)比

對(duì)本文的研究方法在性能上的分析結(jié)果如圖3所示，利用分級(jí)加載數(shù)據(jù)的方法，完全克服了一次性加載所有數(shù)據(jù)所造成的時(shí)間開銷陡增的現(xiàn)象。在列表項(xiàng)第一次初始化時(shí)，只加載與當(dāng)前用戶操作相關(guān)的第一級(jí)的數(shù)據(jù)，在用戶還沒有進(jìn)行第一級(jí)下拉列表選擇的情況下是無法確定第二級(jí)列表數(shù)據(jù)項(xiàng)的，如果在這時(shí)候把所有的二級(jí)列表的數(shù)據(jù)加載到頁面，會(huì)增加頁面數(shù)據(jù)傳輸?shù)臅r(shí)間，本文的處理避免了將所有二級(jí)列表數(shù)據(jù)加載到頁面所需要的時(shí)間開銷。同時(shí)，本文所提出的方法在響應(yīng)用戶事件與數(shù)據(jù)的后臺(tái)傳遞需要額外的時(shí)間開銷，不過這樣的開銷是一個(gè)恒定的時(shí)間，不會(huì)因?yàn)閿?shù)據(jù)級(jí)數(shù)的增加而增加，這樣的運(yùn)行方式在處理多級(jí)數(shù)據(jù)量較大的下接列表項(xiàng)時(shí)有著明顯的優(yōu)勢。

5結(jié)論

通過以上的測試表明，本文所提出的方法具有很好的時(shí)間和空間上的性能表現(xiàn)，在這樣的方式下，服務(wù)器和客戶端的數(shù)據(jù)交換是最簡的狀態(tài)，其它無效的數(shù)據(jù)不參與服務(wù)器與客戶端的數(shù)據(jù)交換，避免了一次性加載所有數(shù)據(jù)到客戶端的長時(shí)間等待，優(yōu)化了系統(tǒng)的性能。目前來說，這樣的技術(shù)處理應(yīng)該是最為簡潔高效的。

AJAX相當(dāng)于在客戶端和服務(wù)器端建立了個(gè)中間層，實(shí)現(xiàn)了基于B/S系統(tǒng)的異步化模式，均衡了客戶端和服務(wù)器端的負(fù)載。AJAX的客戶端快速的響應(yīng)和異步化的模式使得傳統(tǒng)的B/S系統(tǒng)更趨進(jìn)于桌面型應(yīng)用程序，相信基于這樣的特點(diǎn)，AJAX技術(shù)會(huì)使傳統(tǒng)的B/S系統(tǒng)更加友好，操作更為方便，帶給用戶良好的操作體驗(yàn)。這種技術(shù)的應(yīng)用將會(huì)為WEB應(yīng)用程序開發(fā)帶來新的動(dòng)力。

[1]李寧.Java Web開發(fā)技術(shù)大全[M].清華大學(xué)出版社,2009:73-75.

[2]周淵，張怡.Ajax技術(shù)及其應(yīng)用研究[J].河西學(xué)院學(xué)報(bào),2008,24(5):76-79.

[3](美)舒塔,(美)阿斯利森.Ajax與Java高級(jí)程序設(shè)計(jì)[M].楊光,譯.人民郵電出版社:2007:7-12.

[4]陳必峰.基于AJAX的富客戶端技術(shù)及應(yīng)用[J].計(jì)算機(jī)科學(xué),2011,38(10A):419-420.

[5]曹衍龍，葉達(dá)峰.Ajax 編程技術(shù)與實(shí)例[M].人民郵電出版社,2007:14-15.

[6](加)斯努克,等.JavaScript捷徑教程[M].郭曉剛,等,譯.人民郵電出版社,2009:25-34.

[7](德)海爾曼.深入淺出JavaScript[M].牛海彬,等,譯.人民郵電出版社,2008:266-28.

ClassNo.:TP311.52DocumentMark：A

(責(zé)任編輯：宋瑞斌)

AnEfficientMechanismtoAccelerateEfficiencyofWeb

Zhou Feng，Wang Zheng

One-time loading technique of B/S leads to more cost of response time, and influence the user to experience . To avoid it, this paper puts forward the dropdown list method to classify the loading data items, to reduce invalid data transfer, and it can reload the data without updating the whole pages. With the combination of AJAX with Servlet . it can realize a set of cascade dropdown list without refreshing the surface. This method has reduced the invalid data transmission, enhance the user’s experience and the response speed of the page, and improve the system performance.

AJAX；Efficiency；drop-down list

周峰，助理工程師，西南財(cái)經(jīng)大學(xué)經(jīng)濟(jì)信息工程學(xué)院。研究方向：計(jì)算機(jī)應(yīng)用、電子商務(wù)系統(tǒng)。

王征，博士，副教授，碩士生導(dǎo)師，西南財(cái)經(jīng)大學(xué)經(jīng)濟(jì)信息工程學(xué)院。研究方向：電子政務(wù)、電子商務(wù)系統(tǒng)。

教育部人文社科項(xiàng)目(10YJCZH169)；四川省金融智能與金融工程重點(diǎn)實(shí)驗(yàn)室項(xiàng)目(FIFE2010-P05)；西南財(cái)經(jīng)大學(xué)校管課題(2010XG068)

1672-6758(2012)07-0082-3

TP311.52

A