使用JavaScript中的JSON数据动态填充表的快速方法

Question

我正在尝试jQuery,JSON等,并遇到了以下任务.我在服务器上有一个加载器脚本,它以JSON格式返回表数据.收到JSON数据后,我想用它们填充我的表格.我目前正在使用类似于以下的代码(有更多的列和一些更高级的处理,但你有了这个想法):

...
for (var key=0, size=data.length; key<size;key++) {

  $('<tr>')
            .append( $('<td>').html(
                data[key][0]
            ) )
            .append( $('<td>').addClass('whatever1').html(
                data[key][1]
            ) )
            .append( $('<td>').addClass('whatever2').html(
                data[key][2]
            ) )
            .appendTo('#dataTable');
}
...

<table id="#dataTable"></table>
...

这非常好用.但是一旦数据增长,它就变得非常缓慢.对于少数记录,它需要大约5s(Firefox,IE)来构建表,这有点慢.如果我在服务器上创建整个HTML并将其作为字符串发送,我将其包含在表中,它将非常快.

那么,是否有更快的方式来填补表格？

注意:我知道什么是分页,我最终会使用它,所以请不要说"你在页面上需要什么样的大表？".这个问题是关于如何快速填表,无论你将显示多少条记录:)

Answer 1

请参阅我对使用数组和"join"的早期类似查询的响应.

完全不要使用jQuery,直到你只调用一次.此外,通过将字符串存储在数组中并使用"join"方法一次构建字符串,也可以剪切字符串连接.

例如

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join('')); 

Answer 2

尝试将表的添加推迟到正在运行的DOM,直到尽可能晚.

var table = $('<table>');   // create a new table

// populate the rows
....  .append(table);

// replace the existing table all in one go
$('#dataTable').replaceWith(table);

这应该可以防止任何页面布局,直到整个表准备好.

如果性能是一个真正的问题,我也会避免调用需要解析字符串的方法,就像所有这些$('<td>')调用一样.对于单个元素,其开销可能相当昂贵(尽管如果你有一长串HTML,这是值得的).

据我了解,使用.append()或者.html()应该添加大量标签非常有效.如果您曾经用来.text()填充表格单元格以避免HTML代码注入,那么您将失去控制权.