用 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>
...

这工作得很好。但是一旦数据增长，它就会变得非常缓慢。对于几条记录，构建表需要大约 5 秒（Firefox，IE），这有点慢。如果我例如在服务器上创建整个 HTML 并将其作为我包含在表中的字符串发送它会非常快。

那么，有没有更快的方法来填表呢？

注意：我知道什么是分页，我会在最后使用它，所以请不要说“你的页面上需要这么大的表格做什么？”。这个问题是关于如何快速填写表格，无论您将显示多少条记录:)

Answer 1

请参阅my response 以了解先前使用数组和“连接”的类似查询。

不要使用 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 代码注入，您将失去的控制权。

Answer 3

为整行构建 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);