可以修改这个jQuery以更快地运行吗？

Question

以下jQuery each函数导致IE8呈现"停止运行脚本？此页面上的脚本导致浏览器运行缓慢..."消息.

$('.expand-collapse-icon').each(function() {
    var dupId = $(this).parent('td').attr('duplicate-id');

    var len = $(".results-table tr")
        .filter(":not(:first)")
        .filter(":has(.hidden-row[duplicate-id='" + dupId + "'])").length;

    if (len <= 0) {
        $(this).hide();
        $(this).parent('td').css('padding-left', '15px');
    }
});

基本上,我有许多可见的行(大约92),它们有相关的隐藏行.行是关联的duplicate-id每个可见行在expand-collapse-icon第一行中都有一个<td>.如果单击该图标,则会显示隐藏的行.如果可见行没有关联的隐藏行,我不想显示图标.

理想情况下,如果没有关联的行,我可以阻止页面显示图标服务器端,但是代码中潜伏着龙.

有什么明显的方法可以加快速度吗？

Answer 1

可以肯定的一件事是在函数开头删除多个 $(this) - "cache" this 语句值。例如：

var $this = $(this);

现在，您的脚本每次迭代都会在 jQuery 中包装同一个对象 3 次 - 混乱！

我想到的另一件事 - 一般来说，.each方法很慢，比简单地迭代 $(".some-selector-example") 的结果要慢得多。编辑：我发现了文章10 种立即提高 jQuery 性能的方法，虽然它现在已经很老了（从 2009 年开始），但大多数（如果不是全部）技巧仍然建议使用。特别仔细地查看图表，该图表显示了.each方法与同一数据集合上的常规循环的性能比较。

最后一件事可能是脚本中最影响性能的问题 - len = $(".results-table tr").filter(":not(:first)")选择。您可以做的是至少保留该部分选择的结果（将此变量保留在您正在迭代的函数之外）：

var cached_trs = $(".results-table tr").filter(":not(:first)");

然后，在您使用过滤器迭代操作的函数中，您可以执行以下操作：

var len = cached_trs.filter(":has(.hidden-row[duplicate-id='" + dupId + "'])").length