2

假设我有一个页面,其中有一堆 div 一个接一个地堆叠。有一次,我将第 30 个节点从其下方位置移动到位置,例如 5。这会导致旧节点 5 到 29 向下移动一个插槽。

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

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

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

谢谢。

4

1 回答 1

2

不久前我通读了这篇文章,它教会了我一些东西:

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

例如:

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

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

于 2013-06-04T05:16:07.293 回答