Javascript 移动DOM节点和浏览器重新绘制性能

假设我有一个页面，一个接一个地叠着一堆div。在某一点上，我将第30个1从它下面的位置向上移动到位置，比如说，5。这导致旧节点5至29向下移动插槽

忽略div内部的内容，此操作对性能的相对影响有多大？如果我正确理解了重绘的概念，这将导致一个大的重绘，因为许多可见项的位置都发生了变化。但我认为浏览器使用一些技巧可以优化如此简单的东西

免责声明：我确实尝试过在Chrome上测试重新喷漆，但我想我的方法不够充分，我看不出有多少

下面是一个后续问题：假设我移动了其中一些div。在性能方面，哪一个更好：单独移动每个节点，或者，比方说，只是简单地重新附加每个节点？我的想法是，在某一点上，只需重新添加整个内容一次，而不是每次移动6或7个div并在屏幕的一半处重新绘制（如果确实是这样的话）

---

谢谢。

不久前我读了这篇文章，它教会了我一点：

例如：

" 将动画应用于位置固定或绝对的元素。它们不会影响其他元素的布局，因此它们只会导致重新绘制，而不是完全回流。这成本要低得多。”

---

还有更多有用的提示。

那么这应该在中测试或使用。不要使用

innerHTML

作为“重新绘制”的“优化”——这实际上可能会使浏览器不得不做更多的工作，并将内容解析到新的DOM子树中。使用现有节点对DOM进行更改时，请跳过此步骤。只要DOM节点是智能移动的（例如，插入后，而不是一些糟糕的O（n^2）循环），那么在大多数情况下，它应该足够快。除非存在[可验证的]性能问题，否则没有性能问题。@user2246674 innerHTML只是一个例子，因为我想不出一个快速的方法来说明这一点。我将修改我的帖子。@chenglou将

innerHTML

替换为

someCleverHack

，我的评论仍然有效。浏览器在回流（定位元素，比如在DOM或CSS更新之后）和重新绘制（将元素渲染到视口）方面非常快。非常复杂的网站在“眨眼间”呈现；有一些退化的情况（例如使用“自动布局”的深嵌套表），但不要“过早地优化”。@user2246674感谢您的回复。我更新了我的问题：忘记innerHTML，只是重新添加所有内容（这不是一个黑客行为，对吗）？