天天爽亚洲中文字幕,激情无码亚洲一区二区三区,国产精品亚洲自在线播放页码

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

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

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

先來看看出問題的代碼：

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

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

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

其實這段代碼很簡潔，只是將用AJAX取過來的數(shù)據(jù)替換一部分當前頁面的數(shù)據(jù)，但性能確實不夠好。

開始找原因，看看到底是什么慢？

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

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

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

var newPage=$(html);

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

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

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

但仔細想想，這樣仍然會造成在某些機器上2秒以上的時間消耗，照樣是不可接受的。

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

　　 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)在此段代碼花費的時間幾乎為0毫秒。

OK，IE再也不假死了。

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

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

你可以傳遞一個手寫的 HTML 字符串，或者由某些模板引擎或插件創(chuàng)建的字符串，也可以是通過 AJAX 加載過來的字符串。但是在你創(chuàng)建 input 元素的時會有限制，可以參考第二個示例。當然這個字符串可以包含斜杠 (比如一個圖像地址)，還有反斜杠。當你創(chuàng)建單個元素時，請使用閉合標簽或 XHTML 格式。例如，創(chuàng)建一個 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.

因為要構建一個完整的DOM，所以需要花費較長的時間。

至于為何在某些機器上出現(xiàn)高達6秒多的時間消耗，百思不得其解，請高手指點！

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

posted on 2009-06-14 14:39 Robin's Programming World 閱讀(2643) 評論(7) 編輯收藏所屬分類: 其它

常用鏈接

留言簿(49)

隨筆分類(215)

隨筆檔案(181)

相冊

收藏夾

Friend Links

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜


只有注冊用戶登錄后才能發(fā)表評論。




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