将大型元素/数据集附加到 dom 的性能答案

【问题标题】：Performance for appending large element/datasets to the dom将大型元素/数据集附加到 dom 的性能
【发布时间】：2011-05-28 09:24:34
【问题描述】：

我一次添加大量表格行元素并遇到了一些主要瓶颈。目前我正在使用 jQuery，但如果能完成工作，我愿意接受基于 javascript 的解决方案。

我需要在给定时间附加 0-100 个表行（实际上可能更多，但我将分页超过 100 个）。

现在我正在将每个表格行单独附加到 dom...

loop {
  ..build html str...
  $("#myTable").append(row);
}

然后我一次将它们全部淡入

$("#myTable tr").fadeIn();

这里有几件事需要考虑...

1) 我将数据绑定到每个单独的表行，这就是为什么我首先从批量追加切换到追加单独的行。

2) 我真的很喜欢渐变效果。虽然对应用程序来说不是必需的，但我非常注重美学和动画（当然不会分散应用程序的使用）。必须有一种很好的方法来对大量数据应用适度的淡入淡出效果。

（编辑） 3）我以较小的块/递归方式处理此问题的一个主要原因是我需要将特定数据绑定到每一行。我的数据绑定错误吗？有没有比将其绑定到各自的tr 更好的方法来跟踪这些数据？

在递归函数中应用大块或小块中的影响/dom操作更好吗？

在某些情况下最好选择其中的一种吗？如果有，选择合适方法的指标是什么？

【问题讨论】：

【解决方案1】：

看看这个post by John Resig，它解释了在对 DOM 进行大量添加时使用 DocumentFragments 的好处。

DocumentFragment 是一个容器，您可以向其中添加节点，而无需以任何方式实际更改 DOM。准备好后，您将整个片段添加到 DOM，然后通过一次操作将其内容放入 DOM。

另外，确实不建议在每次迭代时执行$("#myTable") - 在循环之前执行一次。

【讨论】：

【解决方案2】：

我怀疑您的性能问题是因为您在循环中多次修改 DOM。

相反，请在获得所有行后尝试对其进行一次修改。浏览器真的很擅长innerHTML 替换。尝试类似

$("#myTable").html("all the rows dom here");

请注意，您可能必须使用要使用的确切选择器，才能将 dom 放在正确的位置。但主要思想是使用innerHTML，并尽可能少地使用它。

【讨论】：