通過測(cè)試發(fā)現(xiàn)，該算法在繪制表格的耗時(shí)過多，沒有讓用戶體驗(yàn)到桌面應(yīng)用程序的實(shí)時(shí)性，尤其在加載數(shù)據(jù)時(shí)，等待事件較長(zhǎng)。

為此，決定在本系統(tǒng)的設(shè)計(jì)過程中，將上述算法進(jìn)行改進(jìn)。通過對(duì)網(wǎng)頁加載對(duì)象過程的分析發(fā)現(xiàn)，當(dāng)一個(gè)對(duì)象添加到網(wǎng)頁中時(shí)，瀏覽器都會(huì)嘗試對(duì)頁面中的控件的布局進(jìn)行重新計(jì)算。而這一過程相對(duì)耗時(shí)，如果在加載頁面時(shí)不斷有新的對(duì)象(如單元格)加入，那么，每添加一個(gè)對(duì)象則瀏覽器都需要對(duì)頁面布局進(jìn)行重新計(jì)算，這顯然是上述算法出現(xiàn)較長(zhǎng)耗時(shí)現(xiàn)象的關(guān)鍵所在。

如果能夠首先在內(nèi)存中將整個(gè)要構(gòu)造的對(duì)象全部創(chuàng)建好，然后再一次性地添加到網(wǎng)頁中。那么，瀏覽器將只會(huì)做一次布局的重計(jì)算。為此得到如下算法:

通過這個(gè)算法瀏覽器只做一次布局的重計(jì)算。經(jīng)過實(shí)際使用與測(cè)試發(fā)現(xiàn)，在沒有加載數(shù)據(jù)的情況下，通過使用Date函數(shù)進(jìn)行程序運(yùn)行計(jì)時(shí)測(cè)試，發(fā)現(xiàn)該算法實(shí)現(xiàn)一個(gè)16列200行的表格平均耗時(shí)僅為1.12秒，要是加載固定數(shù)據(jù)(實(shí)驗(yàn)采用40行數(shù)據(jù))則平均耗時(shí)約為8.3秒。程序運(yùn)行速度得到明顯提高。

在這個(gè)算法中，所呈現(xiàn)的表格是在內(nèi)存中全部繪制好后再完全展現(xiàn)出來的，減少了頻繁的內(nèi)存訪問，在一定程度上減輕了客戶端的負(fù)載，提高了運(yùn)行效率。同時(shí)，甚至可以考慮先使用removeChild將已存在的控件從頁面中移除，然后構(gòu)造完成后再重新將其放置回頁面當(dāng)中，通過這種方法可以進(jìn)一步地提高運(yùn)行效率。

在本系統(tǒng)的眾多數(shù)據(jù)表中，大量使用了這一對(duì)表格進(jìn)行繪制的改進(jìn)方法，系統(tǒng)響應(yīng)速度得到極大的提高，數(shù)據(jù)呈現(xiàn)與刷新耗時(shí)短，用戶體驗(yàn)良好。

2 利用GZIP壓縮網(wǎng)絡(luò)流量

在Ajax的應(yīng)用中，DOM節(jié)點(diǎn)作為視圖的主要組成部分，是瀏覽器暴露給JavaScript環(huán)境的原生對(duì)象。IE中DOM對(duì)象的內(nèi)存泄露是一個(gè)常常被開發(fā)人員忽略的問題。它會(huì)導(dǎo)致IE的內(nèi)存占用量持續(xù)上升，并且瀏覽器的整體運(yùn)行速度明顯下降。對(duì)于一些泄露比較嚴(yán)重的網(wǎng)頁，甚至只要刷新幾次，運(yùn)行速度就會(huì)嚴(yán)重降低。

比較常見的內(nèi)存泄漏的模型有“循環(huán)引用模型”、“閉包函數(shù)模型”和“DOM插入順序模型”，對(duì)于前兩種泄漏模型，可以通過在網(wǎng)頁析構(gòu)時(shí)解除引用的方式來避免。而對(duì)于“DOM插入順序模型”則需要通過改變一些慣有的編程習(xí)慣的方式來避免［5］。

除了上面提到的這些代碼級(jí)的改良之外，還可以利用GZIP來有效地降低網(wǎng)絡(luò)流量。目前常見的主流瀏覽器已經(jīng)全部支持GZIP算法，往往只需要通過編寫少量的代碼就可以支持GZIP了。在J2EE中，可以在Filter中通過下面的代碼來判斷客戶端瀏覽器是否支持GZIP算法，然后根據(jù)需要利用java.util.zip.GZIPOutputStream來實(shí)現(xiàn)GZIP的輸出。判斷瀏覽器對(duì)GZIP支持方式的代碼如下:

一般而言，GZIP對(duì)于HTML、JSP的壓縮比可以達(dá)到80%左右，而它造成的服務(wù)端和客戶端的性能損耗幾乎可以忽略。結(jié)合其他因素，支持GZIP的網(wǎng)站有可能節(jié)約50%的網(wǎng)絡(luò)流量。因此GZIP的使用可以為那些網(wǎng)絡(luò)環(huán)境不是特別好的應(yīng)用帶來顯著的性能提升。使用Http的監(jiān)視工具Fiddler可以方便地檢測(cè)出網(wǎng)頁在使用GZIP前后的通訊數(shù)據(jù)量。

在學(xué)院資產(chǎn)查詢系統(tǒng)中，在系統(tǒng)數(shù)據(jù)上傳至服務(wù)器時(shí)，采用了GZIP技術(shù)，將大容量的數(shù)據(jù)表頁面進(jìn)行壓縮傳送，既降低了網(wǎng)絡(luò)流量，同時(shí)也保證了數(shù)據(jù)丟包的減少，在一定程度上使用戶對(duì)Ajax的使用體驗(yàn)得到了進(jìn)一步的提高。

3 結(jié)束語

通過研究Ajax技術(shù)的系統(tǒng)響應(yīng)速度，結(jié)合現(xiàn)有課題項(xiàng)目學(xué)院資產(chǎn)查詢系統(tǒng)中的Ajax實(shí)際應(yīng)用，以執(zhí)行速度和內(nèi)存使用量作為Ajax性能優(yōu)化的關(guān)注點(diǎn)，對(duì)學(xué)院資產(chǎn)查詢系統(tǒng)中的頁面表格內(nèi)容局部刷新的速度進(jìn)行優(yōu)化，并利用GZIP技術(shù)有效的降低網(wǎng)絡(luò)流量，提高了系統(tǒng)性能，改善了用戶的操作體驗(yàn)。

［1］霍斯拉維.ASP.NET AJAX編程參考手冊(cè)［M］.北京:清華大學(xué)出版社，2009.

［2］呂繼迪，孫明麗，龐婭娟.ASP程序開發(fā)范例寶典［M］.北京:人民郵電出版社，2009.

［3］烏爾曼，戴科斯.Ajax入門經(jīng)典［M］.北京:清華大學(xué)出版社，2008.

［4］李文才.Asp動(dòng)態(tài)網(wǎng)站開發(fā)［M］.北京:清華大學(xué)出版社，2008.

［5］薛小龍.ASP經(jīng)典模塊開發(fā)大全:1小時(shí)搭建功能完備的網(wǎng)絡(luò)系統(tǒng)［M］.北京:電子工業(yè)出版社，2008.

On Performance Optimization of Ajax Local Renewable Pages

ZHU Yun-feng
(Department of Management&Information，Nantong Shipping College，Nantong 226010，China)

Through studying the Ajax technique of system response speed,combining the actual application of AJAX in the system of college assets inquiry,e focusing on the implementing speed and memory usage as AJAX performance optimizing concerns,the article expounds how to optimize the local renewable rate of page form in the college assets query system so as to improve the user experience of operating.

AJAX;local renewable pages;performance optimization

TP 311.52

A

1672-2434(2011)04-0016-03

2011-04-08

朱云峰(1982-)，男，講師，碩士，從事研究方向:計(jì)算機(jī)應(yīng)用技術(shù)