6

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

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

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

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

然后我立即将它们全部淡入

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

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

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

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

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

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

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

4

2 回答 2

3

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

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

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

于 2010-12-20T18:29:05.580 回答
2

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

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

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

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

于 2010-12-20T17:44:35.897 回答