亚洲综合久久一本伊伊区,国产国拍亚洲精品福利,亚洲av成人一区二区三区在线观看

一次JQuery性能優(yōu)化實(shí)戰(zhàn)

同事寫(xiě)了段JQuey的代碼，在某些機(jī)器上，會(huì)出現(xiàn)IE假死的性能問(wèn)題。

我測(cè)試了一下代碼花費(fèi)的時(shí)間，在我的機(jī)器上，會(huì)花費(fèi)600多毫秒，但在某些機(jī)器上會(huì)花費(fèi)6秒多（10倍的增長(zhǎng)），這樣就導(dǎo)致了IE的假死。而且發(fā)現(xiàn)與IE版本無(wú)關(guān)，在大多數(shù)機(jī)器上會(huì)都只需要600多毫秒，不過(guò)CPU會(huì)有10%以上的瞬間提長(zhǎng)。

先來(lái)看看出問(wèn)題的代碼：

$(".eXtremeTable").replaceWith($(html).find(".eXtremeTable"));

$("#levelGroup").replaceWith($(html).find("#levelGroup"));

$("#scriptDiv").replaceWith($(html).find("#scriptDiv"));

其實(shí)這段代碼很簡(jiǎn)潔，只是將用AJAX取過(guò)來(lái)的數(shù)據(jù)替換一部分當(dāng)前頁(yè)面的數(shù)據(jù)，但性能確實(shí)不夠好。

開(kāi)始找原因，看看到底是什么慢？

$(".eXtremeTable").replaceWith($(html).find(".eXtremeTable"));

將此行代碼分拆，逐元素去分析各自花費(fèi)的時(shí)間：
$(".eXtremeTable")　　花費(fèi)20毫秒左右；
$(html).find(".eXtremeTable")　　花費(fèi)200毫秒左右；
replaceWith()　　花費(fèi)10毫秒左右；
不難定位到是由于$(html).find(".eXtremeTable")這種方式引起的。
（這都是在我機(jī)器上的測(cè)試結(jié)果，而且每次可能不完全一樣）

簡(jiǎn)單的可以這樣優(yōu)化：

var newPage=$(html);

$(".eXtremeTable").replaceWith(newPage.find(".eXtremeTable"));

$("#levelGroup").replaceWith(newPage.find("#levelGroup"));

$("#scriptDiv").replaceWith(newPage.find("#scriptDiv"));

但仔細(xì)想想，這樣仍然會(huì)造成在某些機(jī)器上2秒以上的時(shí)間消耗，照樣是不可接受的。

遂采用比較原始的辦法，修改源程序如下：

　　 var tab='<span id=\"data\">';

var pos=html.indexOf(tab)

var content=html.substr(pos+tab.length);

var pos2=content.indexOf('</span>');

var content=content.substr(0,pos2);

document.getElementById("data").innerHTML=content;

// $(".eXtremeTable").replaceWith($(html).find(".eXtremeTable"));

var counter='<td id=\"counter\" align=\"right\" width=\"300\">';

pos=html.indexOf(counter)

content=html.substr(pos+counter.length);

pos2=content.indexOf('</table>');

var content=content.substr(0,pos2+'</table>'.length);

document.getElementById("counter").innerHTML=content;

// $("#levelGroup").replaceWith($(html).find("#levelGroup"));

var sel='<div id=\"scriptDiv\" style=\"display:none;\">'

pos=html.indexOf(sel)

content=html.substr(pos+sel.length);

pos2=content.indexOf('</div>');

var content=content.substr(0,pos2+'</div>'.length);

document.getElementById("scriptDiv").innerHTML=content;

// $("#scriptDiv").replaceWith($(html).find("#scriptDiv"));

現(xiàn)在此段代碼花費(fèi)的時(shí)間幾乎為0毫秒。

OK，IE再也不假死了。

問(wèn)題分析：
原因應(yīng)該就出在jQuery(html)這個(gè)方法上，官方文檔解釋如下：

根據(jù)提供的原始 HTML 標(biāo)記字符串，動(dòng)態(tài)創(chuàng)建由 jQuery 對(duì)象包裝的 DOM 元素。

你可以傳遞一個(gè)手寫(xiě)的 HTML 字符串，或者由某些模板引擎或插件創(chuàng)建的字符串，也可以是通過(guò) AJAX 加載過(guò)來(lái)的字符串。但是在你創(chuàng)建 input 元素的時(shí)會(huì)有限制，可以參考第二個(gè)示例。當(dāng)然這個(gè)字符串可以包含斜杠 (比如一個(gè)圖像地址)，還有反斜杠。當(dāng)你創(chuàng)建單個(gè)元素時(shí)，請(qǐng)使用閉合標(biāo)簽或 XHTML 格式。例如，創(chuàng)建一個(gè) span ，可以用 $("<span/>") 或 $("<span></span>") ，但不推薦 $("<span>")

--------------------------------------------------------------------------------

Create DOM elements on-the-fly from the provided String of raw HTML.

You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag.

因?yàn)橐獦?gòu)建一個(gè)完整的DOM，所以需要花費(fèi)較長(zhǎng)的時(shí)間。

至于為何在某些機(jī)器上出現(xiàn)高達(dá)6秒多的時(shí)間消耗，百思不得其解，請(qǐng)高手指點(diǎn)！

特別提示：
本Blog所有內(nèi)容不得隨意轉(zhuǎn)載，版權(quán)屬于作者所有。如需轉(zhuǎn)載請(qǐng)與作者聯(lián)系（fastzch@163.com）。未經(jīng)許可的轉(zhuǎn)載，本人保留一切法律權(quán)益。

posted on 2009-06-14 14:39 Robin's Programming World 閱讀(2656) 評(píng)論(7) 編輯收藏所屬分類(lèi): 其它

常用鏈接

留言簿(49)

隨筆分類(lèi)(215)

隨筆檔案(181)

相冊(cè)

收藏夾

Friend Links

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜


只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: Hybrid開(kāi)發(fā)資源網(wǎng)站匯總 XCode Plugins Package Manager Phonegap Debug Note 首個(gè)iOS App終于提交了 MongoDB install notes on Mac: 永久恢復(fù)聯(lián)通 iPhone4 的 YouTube [轉(zhuǎn)]自定義UITableView 【轉(zhuǎn)】Xcode分析CrashLog的方法 [轉(zhuǎn)]Samsung EPIC 4G ADB/USB無(wú)法連接的問(wèn)題 [轉(zhuǎn)]教你如何做主管——MTP培訓(xùn)心得