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

Question

我一次附加大量的表行元素并遇到一些主要的瓶颈.目前我正在使用jQuery,但如果它完成了工作,我会接受基于javascript的解决方案.

我需要在给定时间附加0-100个表行的任何地方(它实际上可能更多,但我将分页超过100).

现在我将每个表格行分别附加到dom ...

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

然后我立刻将它们全部淡出

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

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

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

2)我真的很喜欢淡化效果.虽然对于应用程序不是必不可少的,但我对美学和动画非常重视(当然不会分散对应用程序的使用).必须有一种很好的方法将适度的淡入淡出效果应用于大量数据.

(编辑) 3)我以较小的块/递归方式接近这个的一个主要原因是我需要将特定数据绑定到每一行.我绑定我的数据错了吗？是否有更好的方法来跟踪这些数据,而不是将其绑定到各自的数据tr？

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

有哪些情况下,做一个或另一个更好？如果是这样,选择适当方法的指标是什么？

Answer 1

看一下John Resig 的这篇文章，它解释了在对 DOM 进行大量添加时使用 DocumentFragments 的好处。

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

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