周 峰，王 征

(西南財經(jīng)大學 經(jīng)濟信息工程學院，四川 成都 611130)

高效的Web性能提升機制研究

周 峰，王 征

(西南財經(jīng)大學 經(jīng)濟信息工程學院，四川 成都 611130)

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

AJAX；性能；下拉列表

1引言

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

2性能提升方案

2.1現(xiàn)存問題。

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

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

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

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

AJAX實際上是將幾種技術進行整合，形成一個功能強大的新技術。[2]AJAX包括以下幾個部分：

基于標準化的XHTML和CSS

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

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

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

使用JavaScript對以上的技術進行整合

AJAX的核心是JavaScript對象XMLHttpRequest。[3]它是一種支持異步請求的技術，XMLHttpRequest使你可以使用JavaScript向服務器提出請求并處理響應，而不是阻塞用戶。

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

2.2解決方案。

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

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

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

表1 算法性能對比

3具體實現(xiàn)

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

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

表2 下拉列表項表結構

圖2 算法實際應用

4性能分析

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

圖3 算法性能對比

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

5結論

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

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

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

[2]周淵，張怡.Ajax技術及其應用研究[J].河西學院學報,2008,24(5):76-79.

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

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

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

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

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

ClassNo.:TP311.52DocumentMark：A

(責任編輯：宋瑞斌)

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

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

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

教育部人文社科項目(10YJCZH169)；四川省金融智能與金融工程重點實驗室項目(FIFE2010-P05)；西南財經(jīng)大學校管課題(2010XG068)

1672-6758(2012)07-0082-3

TP311.52

A