Ajax頁面局部刷新性能優(yōu)化
2011-12-26 08:52:20朱云峰
朱云峰
(南通航運(yùn)職業(yè)技術(shù)學(xué)院管理信息系 江蘇南通 226010)
Ajax頁面局部刷新性能優(yōu)化
朱云峰
(南通航運(yùn)職業(yè)技術(shù)學(xué)院管理信息系 江蘇南通 226010)
通過研究Ajax技術(shù)的系統(tǒng)響應(yīng)速度，結(jié)合學(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)化，改善用戶的操作體驗(yàn)。
Ajax;局部刷新;性能優(yōu)化
理論上Ajax技術(shù)在很大的程度上可以減少用戶操作的等待時(shí)間，同時(shí)節(jié)約網(wǎng)絡(luò)上的數(shù)據(jù)流量。然而，實(shí)際情況卻并不總是這樣，使用Ajax系統(tǒng)響應(yīng)速度反而降低了。
這是由于Ajax的引入會(huì)大量地使用JavaScript代碼，而JavaScript本身并不以高性能知名。JavaS-cript對(duì)象也不是輕量級(jí)的，特別是DOM元素耗費(fèi)了大量的內(nèi)存［1］。Web瀏覽器的實(shí)現(xiàn)在許多方面顯得非常粗糙，自身很容易造成內(nèi)存泄漏［2］。JavaScript代碼的性能對(duì)于Ajax開發(fā)者來說，尤為重要。成熟的Ajax應(yīng)用的JavaScript代碼量遠(yuǎn)遠(yuǎn)地超出了傳統(tǒng)的Web應(yīng)用的代碼量。而且，由于不必頻繁地刷新整個(gè)頁面，甚至是完全不刷新，JavaScript對(duì)象的壽命比通常在傳統(tǒng)的Web應(yīng)用中的要更長(zhǎng)一些［3］。
針對(duì)這一問題，本文以執(zhí)行速度和內(nèi)存使用量作為Ajax性能優(yōu)化的關(guān)注點(diǎn)，結(jié)合學(xué)院資產(chǎn)查詢系統(tǒng)，對(duì)該系統(tǒng)的Ajax的應(yīng)用進(jìn)行性能優(yōu)化。
1 優(yōu)化Ajax應(yīng)用的執(zhí)行速度
在學(xué)院資產(chǎn)查詢系統(tǒng)的編程中，由于系統(tǒng)需要對(duì)數(shù)據(jù)進(jìn)行展示，所以大量使用表格，而使用Ajax將某些內(nèi)容呈現(xiàn)在瀏覽器窗口中，通常需要?jiǎng)?chuàng)建DOM節(jié)點(diǎn)，網(wǎng)頁中的表格就是一個(gè)常見的DOM對(duì)象，對(duì) DOM對(duì)象的操作往往最容易占用 CPU時(shí)間［4］。
為了能夠測(cè)試不同算法所需時(shí)間，使用了JavaScript中的Ddte對(duì)象進(jìn)行計(jì)時(shí)，其計(jì)時(shí)單位為毫秒。Date對(duì)象在定時(shí)事件中的用法如下:
通過這一方法可以簡(jiǎn)單地測(cè)試部分功能模塊的執(zhí)行速度，簡(jiǎn)單實(shí)用，而且不會(huì)打斷被測(cè)量的模塊的工作流程。為此在測(cè)試?yán)L制表格耗時(shí)時(shí)，使用了這一方法。
在傳統(tǒng)的Ajax應(yīng)用中，在用DOM對(duì)象創(chuàng)建表格的方法中，下面這個(gè)方法，是最為常見，在表頭固定的情況下，其部分代碼如下
該算法首先創(chuàng)建最外層的
| 。經(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í)約為37秒，要是加載固定數(shù)據(jù)(實(shí)驗(yàn)采用40行數(shù)據(jù))則平均耗時(shí)約為100秒。對(duì)于加載數(shù)據(jù)有數(shù)據(jù)更新的情況，由于還涉及對(duì)測(cè)試數(shù)據(jù)的排序的問題，所以在此暫不對(duì)這一情況進(jìn)行測(cè)試和性能分析。 通過測(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 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ù) 猜你喜歡
現(xiàn)代臨床醫(yī)學(xué)(2022年1期)2022-02-12 02:04:26 文化創(chuàng)新比較研究(2020年14期)2020-01-02 19:25:56 文化創(chuàng)新比較研究(2020年10期)2020-01-02 02:10:07 文化創(chuàng)新比較研究(2020年13期)2020-01-01 06:17:02 當(dāng)代陜西(2019年13期)2019-08-20 03:54:22 電子制作(2019年10期)2019-06-17 11:45:14 環(huán)境與生活(2016年6期)2016-02-27 13:46:37 英語學(xué)習(xí)(2015年6期)2016-01-30 00:37:23 測(cè)繪科學(xué)與工程(2014年5期)2014-02-27 07:06:14 電腦愛好者(2009年13期)2009-07-07 09:52:52 |
