jQuery:add()性能; 有没有更好的办法？

Question

我想做的事情:将页面(某种类型)上的所有相似元素分组到一个我可以在以后迭代的对象中 - 或对其中的每个元素应用彻底的更改.

我的代码成功完成了给定的任务,但是当元素数量增长到200-300 +时,性能急剧下降,用户已经注意到了.我已经隔离了有问题的代码行,并想知道是否有另一种方法来完成同样的问题.

add()函数似乎是基于我放置它们的定时器的有问题的操作.首先,执行操作所需的时间是.001但是增长直到元素数达到300并且每个附加元素需要~.1秒并且继续减慢.

我已经研究了(以及更多)jQuery性能增强功能,并实现了其中一些(即3)但他们没有给我任何有意义的性能提升.令人惊讶的是,此代码在1秒内(!)执行Firefox(300多次调用add()),而Chrome和IE大约需要10-20倍或更多...

这是我的代码:

rowsToChange = $([]);
// Grab all the ids greater than whichever one I'm currently looking at:
var arr = $.makeArray($("[id^=stackLocatorLinkFillUp]:gt("+(uniqueID-1)+")"));
for (var i=0; i<arr.length; i++) {
    $this = arr[i];
    // <<< VARIOUS CONDITIONALS that make this as selective as possible REMOVED >>>
    startTimer = new Date().getTime();
    // **************************
    // PROBLEMATIC LINE FOLLOWS when 200+ records:
    rowsToChange = rowsToChange.add($this);
    // Grows from .001 to .1xx after 300 iterations
    console.log("innertiming:"+(new Date().getTime() - startTimer)/1000);
    // **************************
}

最终结果如下(通过Chrome Inspector):

[<div style=?"display:?none" id=?"stackLocatorLinkFillUp1">?itemType=BOUND&ccLocale=PERIODICAL?</div>?, 
<div style=?"display:?none" id=?"stackLocatorLinkFillUp2">?itemType=BOUND&amp;ccLocale=PERIODICAL?</div>?,
...
]

最终我按照以下方式处理所有这些(我喜欢简单!):

var superlink = "...new <a> goodness to display for all elements...";
rowsToChange.html(superlink).css("display","block");

看起来它可能是一个有效的解决方案(不同的添加方法？)但我更愿意继续收集一起对象列表,以便最后一行可以发挥它的魔力.

(我不是指出以下情况并非如此 - 关于连接;感谢'我不是我')

似乎add()操作必须连接字符串,因为这似乎是其他人面临的主要问题之一.但是将我的add()语句转换为+ =看起来并不像它有效.

谢谢你检查一下;

Chrome:18.0.1025.142 m Firefox:11.0 IE:8.0.7600.16385

Answer 1

第一次观察:add保存前一个元素集.试试吧rowsToChange = jQuery.merge(rowsToChange, [$this]);.

第二个观察结果:似乎rowsToChange最终会成为与你所要求的完全相同的元素集$.makeArray.为什么不保存原始套装？