一次JQuery性能优化实战

2024-04-27 14:21:08

字体：大中小

来源：转载

供稿：网友

一次JQuery性能优化实战

同事写了段JQuey的代码，在某些机器上，会出现IE假死的性能问题。我测试了一下代码花费的时间，在我的机器上，会花费600多毫秒，但在某些机器上会花费6秒多（10倍的增长），这样就导致了IE的假死。而且发现与IE版本无关，在大多数机器上会都只需要600多毫秒，不过CPU会有10%以上的瞬间提长。先来看看出问题的代码：

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

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

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

其实这段代码很简洁，只是将用Ajax取过来的数据替换一部分当前页面的数据，但性能确实不够好。开始找原因，看看到底是什么慢？

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

将此行代码分拆，逐元素去分析各自花费的时间：$(".eXtremeTable")　　花费20毫秒左右；$(html).find(".eXtremeTable")　　花费200毫秒左右；replaceWith()　　花费10毫秒左右；不难定位到是由于$(html).find(".eXtremeTable")这种方式引起的。（这都是在我机器上的测试结果，而且每次可能不完全一样）简单的可以这样优化：

varnewPage=$(html);

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

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

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

但仔细想想，这样仍然会造成在某些机器上2秒以上的时间消耗，照样是不可接受的。遂采用比较原始的办法，修改源程序如下：

　　vartab='<spanid=/"data/">';

varpos=html.indexOf(tab)

varcontent=html.substr(pos+tab.length);

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

varcontent=content.substr(0,pos2);

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

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

varcounter='<tdid=/"counter/"align=/"right/"width=/"300/">';

pos=html.indexOf(counter)

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

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

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

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

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

varsel='<divid=/"scriptDiv/"style=/"display:none;/">'

pos=html.indexOf(sel)

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

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

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

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

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

现在此段代码花费的时间几乎为0毫秒。OK，IE再也不假死了。问题分析：原因应该就出在jQuery(html)这个方法上，官方文档解释如下：

根据提供的原始HTML标记字符串，动态创建由jQuery对象包装的DOM元素。

你可以传递一个手写的HTML字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过AJAX加载过来的字符串。但是在你创建input元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠(比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或XHTML格式。例如，创建一个span，可以用$("<span/>")或$("<span></span>")，但不推荐$("<span>")

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

CreateDOMelementson-the-flyfromthePRovidedStringofrawHTML.

YoucanpassinplainHTMLStringswrittenbyhand,createthemusingsometemplateengineorplugin,orloadthemviaAJAX.Therearelimitationswhencreatinginputelements,seethesecondexample.Alsowhenpassingstringsthatmayincludeslashes(suchasanimagepath),escapetheslashes.WhencreatingsingleelementsusetheclosingtagorXHTMLformat.Forexample,tocreateaspanuse$("<span/>")or$("<span></span>")insteadofwithouttheclosingslash/tag.

因为要构建一个完整的DOM，所以需要花费较长的时间。至于为何在某些机器上出现高达6秒多的时间消耗，百思不得其解，请高手指点！

上一篇：mxGraph 开发样例展示

下一篇：svg―Raphael.js Library（一）