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

Question

我一次性添加大量表格行元素，但遇到了一些主要瓶颈。目前我正在使用jQuery，但如果有JavaScript解决方案可以完成工作，我也不排斥。

我需要一次性添加0-100个表格行（实际上可能更多，但超过100个的部分将被分页）。

现在我是将每个表格行单独附加到DOM中...

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

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

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

这里有几个需要考虑的问题...

1) 我正在将数据绑定到每个表格行，这就是为什么我从批量添加切换到首先添加单个行的原因。

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

(编辑) 3) 我以较小的块/递归方式处理这个问题的一个主要原因是我需要将特定的数据绑定到每行。我绑定数据错了吗？有没有更好的方法来跟踪这些数据，而不是将其绑定到它们各自的tr上？

---

在大块或小块的递归函数中应用效果/DOM操作哪个更好？

是否有情况下，其中一个方法比另一个更好？如果有，选择合适的方法的指标是什么？

- Derek Adair

---

“bind” 是什么意思？你是在给 tr 添加数据属性还是为每一行绑定事件？ - Jaime

我正在使用jQuery的.DATA API来绑定数据属性。 - Derek Adair

Answer 1

看一下John Resig的帖子, 它解释了在对DOM进行大量添加时使用DocumentFragments的好处。

DocumentFragment是一个容器，您可以向其中添加节点，而不会实际更改DOM。当您准备好时，将整个片段添加到DOM中，并将其内容作为单个操作放置在DOM中。

此外，在每次迭代中执行$("#myTable")真的不被推荐 - 在循环之前执行一次。

- Sean Kinsey

---

这是一篇非常有趣的文章！ - Derek Adair

DocumentFragments是我的新宠 =) - Derek Adair

Answer 2

我猜测您的性能问题是因为在循环中多次修改DOM。相反，尝试在获取所有行后一次性修改它。浏览器非常擅长使用innerHTML替换。尝试类似以下的内容：

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

注意，您可能需要使用不同的选择器来获取正确位置的DOM。但主要思想是使用innerHTML，并尽可能少地使用它。

- hvgotcodes