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”查看my response更早的类似查询。

直到最后，当你只调用一次时，不要使用jQuery。此外，通过将字符串存储在数组中并使用“join”方法一次性构建字符串，也可以剪切字符串连接。

e.g。

 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代码注入，那么您将失去的控制权。

Answer 3

为整行构建HTML并将行添加到表中可能会更快，而不是一次添加一个单独的元素。您还可以将其扩展为在字符串中构建所有HTML，然后一次性添加所有HTML，这将更快。在MVC环境中，我可能会返回具有该表的局部视图（HTML），因为这将保持关注点的分离。但是，我会避免在服务器上（在控制器中）构建HTML，因为这意味着每当您想要更改表的显示方式时，您都必须更改代码。如果您使用的是PHP或其他脚本语言，请根据您的环境进行过滤。

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

  html += '<tr><td>'
             + data[key][0]
             + '</td><td class="whatever1">'
             + data[key][1]
             + '</td><td class="whatever2">'
             + data[key][2]
             + '</td></tr>';
}

$('#dataTable').append(html);

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

3 个答案: