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

Posted 2023-03-05

【中文标题】用 JavaScript 中的 JSON 数据动态填充表格的快速方法

【英文标题】：Fast way to dynamically fill table with data from JSON in JavaScript

【发布时间】：2011-07-18 17:20:39

【问题描述】：

我正在尝试使用 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 并将其作为我包含在表中的字符串发送它会非常快。

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

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

【参考方案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('')); 

【讨论】：

+1 非常好，大大提高了我的代码速度！

@Neil - 您可以通过将最后一行更改为 $('#dataTable')[0].innerHTML = r.join(''); 来缩短几毫秒。 jQuery 的 html 方法不仅仅是粘贴到生成的 html 代码中。

@Brandon，谢谢。我经常忘记 jQuery 中有一些开销可以通过直接使用 DOM 元素来消除。

我的建议，不要使用 Jquery，它在 IE 中很慢，使用原生 DOM 方法。下面看我的详细分析。

【参考方案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 代码注入，您将失去的控制权。

【讨论】：

我正在按照 Alnitak 所说的去做。 +1

我最后通过 .detach() 和 .appendTo() 做了同样的事情。可能会快一点+1

【参考方案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);

【讨论】：

如果您要添加一个新表，您也可以将整个表构建为一个字符串，然后简单地将其添加到 DOM 的适当位置。由于您将表格作为 HTML 元素提供，因此我在示例中坚持使用这种方法。

这绝对是我可以做的事情，但是添加元素而不是一个字符串的解决方案对我来说似乎更优雅。但我可能会牺牲这一点:)

@Jan - IE（至少在 9 之前，我还没有测试过 9）在添加元素时特别慢，可能是因为它们使用的内部数据结构。我总是发现构建整个字符串并一次添加所有字符串更快。