Internet Explorer 渲染通过 JavaScript 生成的表的速度很慢

Question

我正在一个带有大桌子的网络应用程序上的页面上工作。在某些情况下，12 列和最多 300 行。我很难让表格在 Internet Explorer 中快速呈现。我在这段测试代码中复制了我的困难：

http://jsfiddle.net/dSFz5/

一些在具有 4GB RAM 的 Intel 四核 Q8200 上使用 IE9 进行基准测试：
50行，12列：432ms
100行，12列：1023ms
200行，12列：2701ms
400行，12列：8107ms
800 行，12 列：24619ms

指数级糟糕。

我设法找到了一些代码，可以在 Internet Explorer 上更快地呈现相同的测试表，但因为我使用 Mustache.js 模板来呈现我的单元格和行（将所有 HTML 标记保留在 JavaScript 之外），所以我没有能够使用这些 DOM 方法：

http://jsfiddle.net/bgzLG/

基准测试结果：
50行，12列：37ms
100行，12列：72ms
200行，12列：146ms
400 行，12 列：324ms
800 行，12 列：566ms

我无法像第二个示例那样逐块构建表，因为使用客户端模板我需要注入 Mustache 返回的 HTML 字符串。如果您开始将 .innerHTML 放在那里，性能会再次下降。

任何人都可以推荐一种方法来以更有效的方式构建符合客户端模板使用的表格吗？

分页是解决此问题的一种方法，但我想解决问题本身。

任何建议非常感谢！

Answer 1

首先，我建议将字符串的创建与表的实际创建分开，因为它会产生渲染时间方面的开销。接下来，您应该尝试在将其附加到正文之前创建整个表格，以最大程度地减少重绘/回流的数量。最后，我建议在 IE 中加入一个数组，因为该浏览器中的字符串串联会为每个副本重复分配越来越大的内存块。当您使用数组连接时，浏览器仅分配足够的内存来保存整个字符串。

var strings = [],
    table = ['<table>'],
    i, j;

for (i = 0; i < 1000; i += 1) {
    strings[i] = [];

    for (j = 0; j < 12; j += 1) {
        strings[i][j] = randomString();
    }        
}

var start = new Date().getTime();

for (i = 0; i < 1000; i += 1) {
    table.push('<tr>');

    for (j = 0; j < 12; j += 1) {
        table.push('<td>', strings[i][j], '</td>');
    }

    table.push('</tr>');
}

table.push('</table>');

$('body').append(table.join(''));

var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time + 'ms');​

使用这种方法，我在 IE9 中得到以下结果：

100 rows is ~9ms
200 rows is ~19ms
500 rows is ~51ms
1000 rows is ~119ms
5000 rows is ~526ms

我确信我们可以进一步优化它，但这对于最多 300 行（〜30ms）来说应该足够了，这就是你所说的你的目标。它还将其保持在任何 UI 交互的 50 毫秒以下的圣杯基准之下。

Answer 2

使用这个：

var table = $('<table></table>');

for (var a=0; a<200; a++) {


    var tr = $('<tr></tr>');    
    for (var b=0; b<12; b++) {

        tr.append('<td>'+randomString()+'</td>');        

    }

table.append(tr);
}

$('body').append(table); 

减少了大约 130 毫秒。即在将表添加到 DOM 之前在内存中构建表。

这是我的基准：

100  - 346
200  - 670
500  - 2037
1000 - 4272
2000 - 10502

And your original:

100  - 408
200  - 898
500  - 2987
1000 - 10202
2000 - 41305

Answer 3

我想说，由于性能原因，模板不适合这里。使用 DOM 操作构建表并首先包含所有行，然后才附加它是有意义的。这有很大的不同。

您也可以尝试像 jqGrid 这样的东西：它处理大量的行，而只有可见的行以 html （虚拟列表）的形式呈现在屏幕上。