Question

我有一张巨大的桌子（最多10 000行）。我必须遍历每一行，计算一些数据并将其写在每一行的两个单元格中。

我做了类似的事情：

$('#table tbody').find('tr:visible').each(function() {
        var tr = $(this);
        var a = tr.children('.cell3').text();
        tr.children('.cell4').html(xxx.calculate(parseFloat(tr.children('.cell1').text()), a, b ));
        tr.children('.cell5').html(xxx.calculate(parseFloat(tr.children('.cell2').text()), a, b));
    });

我看，分析，这是计算过程中花费的大部分时间。

我试图缓存所有孩子（var tds tr.children（'。cell1，.cell2，.cell3'）），然后使用tds.get（）获取检索值。
我尝试使用innerHTML js native方法

但我没有任何重大改进。

您有任何建议或在我的代码中看到不好的内容吗？这是我能获得的最好的吗？

PS：单元格的顺序可能不同，所以我必须通过类名

访问它们

Answer 1

要遍历10000行，为了获得一些收益，尽可能尝试使用本机方法。

一些快速的建议，不知道它是否会带来巨大收益，但应该相对较快：

<强> 1。使用plain for循环，缓存长度

10000行循环是检查$ .each与plain for循环之间性能差异的最佳测试用例。

var items = $('#table tbody').find('tr:visible');

var length = items.length;
for(var i = 0; i< length; i++)
{

  var tr = $(items[i]); 
  var a = tr.children('.cell3').text();
        tr.children('.cell4').html(xxx.calculate(parseFloat(tr.children('.cell1').text()), a, b ));
        tr.children('.cell5').html(xxx.calculate(parseFloat(tr.children('.cell2').text()), a, b));
}

<强> 2。使用find（）代替children（），检查jsperf here

var items = $('#table tbody').find('tr:visible');

var length = items.length;
for(var i = 0; i< length; i++)
{

  var tr = $(items[i]); 
  var a = tr.find('.cell3').text();
        tr.find('.cell4').html(xxx.calculate(parseFloat(tr.find('.cell1').text()), a, b ));
        tr.find('.cell5').html(xxx.calculate(parseFloat(tr.find('.cell2').text()), a, b));
}

使用jQuery在一个巨大的表上读取，计算和写入数据

1 个答案: