一次JQuery性能优化实战

一次JQuery性能优化实战2011-04-15 Robin"s Java World 同事写了段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毫秒。