jQuery: add(） performance;有没有更好的方法

jQuery: add() performance; is there a better way?

本文关键字：有没有 更好 方法 performance add jQuery      更新时间：2023-09-26

我想做的是：将页面上的所有类似元素（某种类型）分组到一个对象中，我以后可以对其进行迭代 - 或者对其中的每个元素进行彻底的更改。

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

add（） 函数似乎是基于我在它们周围放置的计时器的有问题的操作。起初，执行操作所需的时间是 .001，但会增长到元素数量达到 300，并且每个附加元素需要 ~.1 秒，并且继续减慢速度。

我已经研究了（以及更多）jQuery性能增强功能，并实现了其中的一些（即3个），但它们并没有给我带来任何有意义的性能提升。令人惊讶的是，对于 Firefox，此代码在 1 秒 （！） 内执行（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（） 语句转换为 += 看起来不起作用。

感谢您查看此内容;

铬： 18.0.1025.142 m火狐浏览器：11.0IE：8.0.7600.16385

第一个观察：add保存前一个元素集。请尝试rowsToChange = jQuery.merge(rowsToChange, [$this]);。

第二个观察：似乎rowsToChange最终会成为与您调用$.makeArray的元素集完全相同的元素集。为什么不直接保存原始集？

DCoder 展示了如果您使用的是for循环，如何将信息适当地合并在一起。但是，如果您来到这里并使用.each()循环，请使用以下内容。

主要区别在于括号是不必要的/必要的，具体取决于'this'的结构。人们似乎也普遍认为，.each()至少比原生的javascript for循环略慢。（2009年的证据）（时间test_copied来自上面的问题）

var $this, rowsToChange = $([]);
// slower than a for loop
$("[id^=stackLocatorLinkFillUp]:gt("+(uniqueID-1)+")").each( function() {
    // If statements <removed> that decide whether or not to include in the new container
    $this = $(this); // probably unnecessary under most situations
    rowsToChange = jQuery.merge(rowsToChange, $this);
});

对删除的 if 语句决定的新子组的每个部分进行操作！

rowsToChange.html("...");

感谢所有查看问题、花时间回答、投票等的人！

相关文章：