javascript / dom - 创建vs重新安排dom节点有多贵？

Question

我正在尝试优化我编写的可排序表。瓶颈在于dom操纵。我正在创建新的表行，并在每次排序表时插入它们。我想知道我是否可以通过简单的重新排列行来加快速度，而不是重新创建节点。为了使这一点产生重大影响，dom节点重新排列必须比节点创建更快捷。是这样的吗？ 谢谢， -Morgan

Answer 1

我不知道创建或操作是否更快，但我知道如果你操作整个表不在页面上然后立即将它放在所有表上会更快。除此之外，重新排列现有行可能会比较慢，除非首先从DOM中删除整个表。

This page表示克隆当前表最快，按照您的意愿操作它，然后替换DOM上的表。

Answer 2

我现在快速地使用innerHTML绘制此表的两倍，将整个内容构建为字符串，而不是逐个插入节点。

Answer 3

您可以在以下某些基准测试中找到此页面：

http://www.quirksmode.org/dom/innerhtml.html

Answer 4

如果可以，最好不要将dom操作作为实际的dom操作，而是作为脚本中的某种方法然后操作dom。因此，不是在每个节点上执行所谓的重绘，而是将每个节点上重绘的内容组合到自己的方法中，然后将这些节点附加到父节点，然后将其附加到实际的dom，从而生成仅仅两次重绘而不是数百次。我说两个b / c你需要在用新数据更新之前清理dom中的内容。

Answer 5

我一直在寻找答案，并决定设置一个快速基准http://jsfiddle.net/wheresrhys/2g6Dn/6/

它使用jQuery，因此不是纯粹的基准测试，它也可能在其他方面存在偏差。但它给出的结果是移动DOM节点的速度大约是每次创建和销毁dom节点的速度的两倍