亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

        Ajax頁(yè)面局部刷新性能優(yōu)化

        2011-12-26 08:52:20朱云峰
        關(guān)鍵詞:瀏覽器表格內(nèi)存

        朱云峰

        (南通航運(yùn)職業(yè)技術(shù)學(xué)院管理信息系 江蘇南通 226010)

        Ajax頁(yè)面局部刷新性能優(yōu)化

        朱云峰

        (南通航運(yùn)職業(yè)技術(shù)學(xué)院管理信息系 江蘇南通 226010)

        通過(guò)研究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)中的頁(yè)面表格內(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ā)者來(lái)說(shuō),尤為重要。成熟的Ajax應(yīng)用的JavaScript代碼量遠(yuǎn)遠(yuǎn)地超出了傳統(tǒng)的Web應(yīng)用的代碼量。而且,由于不必頻繁地刷新整個(gè)頁(yè)面,甚至是完全不刷新,JavaScript對(duì)象的壽命比通常在傳統(tǒng)的Web應(yīng)用中的要更長(zhǎng)一些[3]。

        針對(duì)這一問(wèn)題,本文以執(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)頁(yè)中的表格就是一個(gè)常見(jiàn)的DOM對(duì)象,對(duì) DOM對(duì)象的操作往往最容易占用 CPU時(shí)間[4]。

        為了能夠測(cè)試不同算法所需時(shí)間,使用了JavaScript中的Ddte對(duì)象進(jìn)行計(jì)時(shí),其計(jì)時(shí)單位為毫秒。Date對(duì)象在定時(shí)事件中的用法如下:

        通過(guò)這一方法可以簡(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è)方法,是最為常見(jiàn),在表頭固定的情況下,其部分代碼如下

        該算法首先創(chuàng)建最外層的

        對(duì)象,然后在循環(huán)中依次創(chuàng)建和
            <ul id="sw08w"><center id="sw08w"></center></ul>
            。經(jīng)過(guò)實(shí)際使用與測(cè)試發(fā)現(xiàn),在沒(méi)有加載數(shù)據(jù)的情況下,通過(guò)使用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ù)的排序的問(wèn)題,所以在此暫不對(duì)這一情況進(jìn)行測(cè)試和性能分析。

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

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

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

            通過(guò)這個(gè)算法瀏覽器只做一次布局的重計(jì)算。經(jīng)過(guò)實(shí)際使用與測(cè)試發(fā)現(xiàn),在沒(méi)有加載數(shù)據(jù)的情況下,通過(guò)使用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)出來(lái)的,減少了頻繁的內(nèi)存訪問(wèn),在一定程度上減輕了客戶端的負(fù)載,提高了運(yùn)行效率。同時(shí),甚至可以考慮先使用removeChild將已存在的控件從頁(yè)面中移除,然后構(gòu)造完成后再重新將其放置回頁(yè)面當(dāng)中,通過(guò)這種方法可以進(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ā)人員忽略的問(wèn)題。它會(huì)導(dǎo)致IE的內(nèi)存占用量持續(xù)上升,并且瀏覽器的整體運(yùn)行速度明顯下降。對(duì)于一些泄露比較嚴(yán)重的網(wǎng)頁(yè),甚至只要刷新幾次,運(yùn)行速度就會(huì)嚴(yán)重降低。

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

            除了上面提到的這些代碼級(jí)的改良之外,還可以利用GZIP來(lái)有效地降低網(wǎng)絡(luò)流量。目前常見(jiàn)的主流瀏覽器已經(jīng)全部支持GZIP算法,往往只需要通過(guò)編寫少量的代碼就可以支持GZIP了。在J2EE中,可以在Filter中通過(guò)下面的代碼來(lái)判斷客戶端瀏覽器是否支持GZIP算法,然后根據(jù)需要利用java.util.zip.GZIPOutputStream來(lái)實(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)用帶來(lái)顯著的性能提升。使用Http的監(jiān)視工具Fiddler可以方便地檢測(cè)出網(wǎng)頁(yè)在使用GZIP前后的通訊數(shù)據(jù)量。

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

            3 結(jié)束語(yǔ)

            通過(guò)研究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)中的頁(yè)面表格內(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ù)

            猜你喜歡
            瀏覽器表格內(nèi)存
            《現(xiàn)代臨床醫(yī)學(xué)》來(lái)稿表格要求
            統(tǒng)計(jì)表格的要求
            統(tǒng)計(jì)表格的要求
            統(tǒng)計(jì)表格的要求
            “春夏秋冬”的內(nèi)存
            反瀏覽器指紋追蹤
            電子制作(2019年10期)2019-06-17 11:45:14
            環(huán)球?yàn)g覽器
            再見(jiàn),那些年我們嘲笑過(guò)的IE瀏覽器
            基于內(nèi)存的地理信息訪問(wèn)技術(shù)
            上網(wǎng)本為什么只有1GB?
            中国免费看的片| 久久久久AV成人无码网站| 青青草好吊色在线视频| 在线视频观看国产色网| 成人网站免费看黄a站视频 | 亚洲av高清一区二区三| 少妇无码av无码专区| 在线欧美精品二区三区| 日本无遮挡吸乳呻吟视频| 97在线视频免费| 操国产丝袜露脸在线播放| 亚洲av不卡无码国产| 97久久香蕉国产线看观看| 中文字幕亚洲好看有码| 国产人妖在线观看一区二区三区| 夜夜躁日日躁狠狠久久av| 依依成人精品视频在线观看 | 亚洲中文有码字幕青青| 美女极度色诱视频国产免费| 久久99国产综合精品女同| 亚洲av无码成人精品区狼人影院| 午夜精品一区二区三区在线观看| 无码成人AV在线一区二区| 国产不卡视频在线观看| 精品少妇一区二区三区免费观| 91福利视频免费| 人妻少妇激情久久综合| 一区二区和激情视频| av片在线观看免费| 日日摸夜夜添夜夜添一区二区| av免费在线手机观看| 精品女厕偷拍视频一区二区| 日本熟妇人妻xxxx| 精品人妻系列无码人妻免费视频| 无码高潮久久一级一级喷水| av在线天堂国产一区| 国色天香精品一卡2卡3卡4| 久久99精品免费一区二区| 国产亚洲精品综合一区二区| 无码人妻精品一区二区三区东京热| 亚洲av无码xxx麻豆艾秋|