javascript - 移动 DOM 节点和浏览器重绘性能

Question

假设我有一个页面，其中有一堆 divs 一个接一个地堆叠。有一次，我将第 30 个节点从它的下方位置向上移动到位置，比如 5。这导致旧节点 5 到 29 向下移动一个槽。

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

免责声明:我确实尝试在 Chrome 上测试重绘，但我想我的方法不够充分，我无法辨别出多少。

这是后续问题: 假设我四处移动了其中一些 div。在性能方面什么会更好:单独移动每个节点，或者说，只是简单地重新附加每个节点？我的想法是，在某个时候，将整个内容重新附加一次会更好，而不是每次移动 6 或 7 个 div 并重新绘制大约一半的屏幕(如果确实如此)。

谢谢。

Answer 1

前段时间我通读了这篇文章，它教会了我很多东西:

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

例如:

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

那里还有更多有用的提示。