Internet Explorer缓慢呈现通过JavaScript生成的表

Question

我在一个带有大表的Web应用程序的页面上工作.在某些情况下,12列和最多300行.我很难在Internet Explorer中快速呈现表格.我在这段测试代码中复制了我的困难:

http://jsfiddle.net/dSFz5/

英特尔四核Q8200与4GB RAM上的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列:仅为37微秒
100行,12列:72ms的
200行,12列:146ms
400行,12列:324ms
800行,12列:566ms

我不能像第二个例子那样逐块构造表,因为使用客户端模板我需要注入胡子返回的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交互,它还将其保持在低于~50ms的圣杯基准之下.