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） - 在函数开头“缓存”这个语句值。例如：

var $this = $(this);

现在你的脚本在jQuery中为每次迭代包装3次相同的对象 - 凌乱！

我想到的其他事情 - 一般来说， .each 方法很慢，明显慢于只是简单地遍历$的结果（“。some-选择器例子“）。编辑：我找到了文章10 ways to instantly increase jQuery performance，虽然现在已经很久了（从2009年开始），但大多数（如果不是全部）提示仍然建议使用。请仔细查看显示 .each 方法的性能的图表，与同一数据集合上的常规循环进行比较。

最后一件事可能是你的脚本中性能最高的问题 - len = $（“。results-table tr”）。filter（“：not（：first）”）选择。你能做的是至少保留select部分的结果（将这个变量保留在你正在迭代的函数之外）：

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

然后在函数中你正在使用filter进行迭代操作，你可以这样做：

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

Answer 2

试试这个。这里我已经缓存了大多数重复元素提取，避免了.hiddne-row类过滤行，只搜索一次，然后只是通过循环内的属性进行过滤，这是一个重大改进，因为属性过程大多慢于其他人。使用:gt(0)而不是`：not（：first）'也只在循环之外一次。

var $this, $parent, dupId, len ;

//This line will get all the rows from .resutls-table 
//filtered by ":not(:first):has(.hidden-row)"
//That way you dont have to search for trs and filter it everytime in the loop
var $resultsTr = $(".results-table tr.hidden-row:gt(0)");

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

    len = $resultsTr
        .filter("[duplicate-id='" + dupId + "'])").length;

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

Answer 3

你使用了太多相同的jQuery选择器。

您可以通过在变量中多次存储使用的那个进行优化。

$('.expand-collapse-icon').each(function() {

    var $this = $(this);
    var $parent = $this.parent('td');
    var dupId = $parent.attr('duplicate-id');

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

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

});

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

3 个答案: