javascript/dom — 创建 dom 节点与重新排列 dom 节点的成本有多高？

Question

我正在尝试优化我编写的可排序表。瓶颈在于 dom 操作。我目前正在创建新的表行，并在每次对表进行排序时插入它们。我想知道是否可以通过简单地重新排列行而不是重新创建节点来加快速度。为了产生显着的差异，dom 节点重新排列必须比节点创建更快。是这样吗？谢谢 - 莫根

Answer 1

我不知道是否创建或操纵速度更快，但我知道，如果你操纵整个表时，它不是在页面上，然后将其放在一下子它会更快。沿着这些线路，它可能会比较慢，除非整个表从DOM第一拆下重新安排在适当位置的现有行。

此页表明它会是最快的克隆当前表，操作它，你想，然后更换了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达网络/ wheresrhys / 2g6Dn / 6 /

它用了jQuery，所以是不是纯粹的标杆，这是在其他方面可能扭曲了。但它给出结果是，移动DOM节点为约快一倍创建和detroying DOM节点每次