一次JQuery性能优化实战

一次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")这种方式引起的。
（这都是在我机器上的测试结果，而且每次可能不完全一样）

简单的可以这样优化：

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"));

现在此段代码花费的时间几乎为0毫秒。

OK，IE再也不假死了。

问题分析：
原因应该就出在jQuery(html)这个方法上，官方文档解释如下：

根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。 
你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 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，所以需要花费较长的时间。

至于为何在某些机器上出现高达6秒多的时间消耗，百思不得其解，请高手指点！

特别提示：
本Blog所有内容不得随意转载，版权属于作者所有。如需转载请与作者联系（ [email protected] ）。未经许可的转载，本人保留一切法律权益。