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

周 峰，王 征

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

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

周 峰，王 征

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

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

AJAX；性能；下拉列表

1引言

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

2性能提升方案

2.1現存問題。

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

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

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

圖1 傳統訪問方式與使用AJAX訪問方式比較

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

基于標準化的XHTML和CSS

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

通過XML和XSLT進行數據交換

使用XMLHttpRequest進行異步數據傳送

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

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

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

2.2解決方案。

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

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

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

表1 算法性能對比

3具體實現

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

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

表2 下拉列表項表結構

圖2 算法實際應用

4性能分析

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

圖3 算法性能對比

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

5結論

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

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

[1]李寧.Java Web開發技術大全[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

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

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

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

1672-6758(2012)07-0082-3

TP311.52

A