javascript - Internet Explorer 呈现通过 JavaScript 生成的表格的速度很慢

Question

我正在处理带有大表格的网络应用程序的页面。在某些情况下，12 列和多达 300 行。我很难让表格在 Internet Explorer 中快速呈现。我已经在这段测试代码中复制了我的困难:

http://jsfiddle.net/dSFz5/

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

呈指数级下降。

我设法挖掘出一些代码可以在 Internet Explorer 上更快地呈现相同的测试表，但是因为我使用 mustache.js 模板来呈现我的单元格和行(将所有 HTML 标记保留在我的 JavaScript 之外)，我我无法使用这些 DOM 方法:

http://jsfiddle.net/bgzLG/

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

我无法像第二个示例那样逐 block 构建表格，因为使用客户端模板我需要注入(inject)由 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 行(~30 毫秒)，这正是您所说的目标。对于任何 UI 交互，它还保持在 ~50 毫秒以下的 chalice 基准之下。