Question

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

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

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

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

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

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

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

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

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

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

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

是否有哪种情况可以做一个或另一个？如果是这样，选择适当方法的指标是什么？

Answer 1

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

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

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

Answer 2

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

相反，请在获得所有行后尝试修改一次。浏览器非常擅长innerHTML替换。尝试像

这样的东西

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

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