假设我有一个页面,其中有一堆依次堆叠的 div。在某一时刻,我将第 30 个节点从下方位置移动到位置(例如 5)。这会导致旧节点 5 到 29 向下移动一个槽。
忽略 div 内部的内容,此操作对性能的相对影响有多大?如果我正确理解了重绘概念,这将导致大量重绘,因为许多可见项目的位置发生了变化。但我认为浏览器可以使用一些技巧来优化如此简单的东西。
免责声明:我确实尝试在 Chrome 上测试重绘,但我想我的方法还不够充分,而且我无法辨别太多。
这是后续问题:假设我移动了其中一些 div。就性能而言,什么会更好:单独移动每个节点,或者只是简单地重新附加每个节点?我的想法是,在某个时刻,最好只重新附加整个内容一次,而不是每次移动 6 或 7 个 div 并重新绘制一半屏幕(如果确实如此)。
谢谢。
最佳答案
我不久前读过这篇文章,它教会了我一些东西:
例如:
" 将动画应用于位置固定或绝对的元素。它们不会影响其他元素布局,因此它们只会导致重绘而不是完全回流。这样成本要低得多”
那里还有更多有用的提示。
关于javascript - 移动 DOM 节点和浏览器重绘性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16909929/