Robin's Programming World
I Love Programming As My Life!

隨筆-193 評(píng)論-715 文章-1 trackbacks-0

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

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

先來看看出問題的代碼：

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

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

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

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

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

$(".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再也不假死了。

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

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

你可以傳遞一個(gè)手寫的 HTML 字符串，或者由某些模板引擎或插件創(chuàng)建的字符串，也可以是通過 AJAX 加載過來的字符串。但是在你創(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 閱讀(2652) 評(píng)論(7) 編輯收藏所屬分類: 其它

評(píng)論:

# re: 一次JQuery性能優(yōu)化實(shí)戰(zhàn) 2009-06-15 09:16 | HiMagic!

那你修改后，在別的機(jī)器上也是6秒？如果時(shí)間還很長(zhǎng)，看一下ajax的反應(yīng)速度。回復(fù) 更多評(píng)論

# re: 一次JQuery性能優(yōu)化實(shí)戰(zhàn) 2009-06-15 09:50 | usherlight

會(huì)不會(huì)和jquery的版本有關(guān)？據(jù)說1.3之后的版本改進(jìn)了dom 回復(fù) 更多評(píng)論

# re: 一次JQuery性能優(yōu)化實(shí)戰(zhàn) 2009-06-15 10:07 | Robin's Java World

@HiMagic!
修改后所有的機(jī)器都可以達(dá)到幾乎0秒！
因?yàn)椴恍枰獦?gòu)建DOM了。回復(fù) 更多評(píng)論

# re: 一次JQuery性能優(yōu)化實(shí)戰(zhàn) 2009-06-15 11:02 | kane

不需要構(gòu)造dom卻使用了構(gòu)造dom的方法，而沒有預(yù)料到構(gòu)造dom是很耗時(shí)的操作。所以說我們使用工具，只有深入了解其特性才能正確地使用回復(fù) 更多評(píng)論

# re: 一次JQuery性能優(yōu)化實(shí)戰(zhàn) 2009-06-15 14:43 | Robin's Java World

@kane
說得很有道理。回復(fù) 更多評(píng)論

# re: 一次JQuery性能優(yōu)化實(shí)戰(zhàn) 2009-06-15 15:47 | metadmin

真?zhèn)€頁(yè)面是DOM嗎？如果是，這無法接受。我更傾向于gwt那樣，在某個(gè)div里面嵌入ajax。

---------------------------------
解開權(quán)限與業(yè)務(wù)耦合，提高開發(fā)效率
細(xì)粒度權(quán)限管理軟件試用版下載
http://www.metadmin.com

回復(fù) 更多評(píng)論

# re: 一次JQuery性能優(yōu)化實(shí)戰(zhàn) 2016-01-04 17:42 | bns

不需要構(gòu)建DOM 回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


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




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: Hybrid開發(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無法連接的問題 [轉(zhuǎn)]教你如何做主管——MTP培訓(xùn)心得

<

2009年6月

>

日

一

二

三

四

五

六

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

常用鏈接

留言簿(49)

隨筆分類(215)

隨筆檔案(181)

相冊(cè)

文章相關(guān)圖片

收藏夾

other

Friend Links

Tiger的Blog，專注于過程改進(jìn)，項(xiàng)目管理，質(zhì)量管理三個(gè)方向。
zrfunds

常用鏈接

留言簿(49)

隨筆分類(215)

隨筆檔案(181)

相冊(cè)

收藏夾

Friend Links

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜