:hover
)getComputedStyle
方法,或者IE里的 currentStyle
时,也会触发重排,原理是一样的,都为求一个“即时性”和“准确性”。cssText
变量中编辑。虽然现在大部分现代浏览器都会有 Flush
队列进行渲染队列优化,但是有些老版本的浏览器比如IE6的效率依然低下。当我们修改了元素的几何属性,导致浏览器触发重排或重绘时。它会把该操作放进渲染队列,等到队列中的操作到了一定的数量或者到了一定的时间间隔时,浏览器就会批量执行这些操作。
display:none
时(只有一次重排重绘),元素便不会再存在在渲染树中,相当于将其从页面上“拿掉”,我们之后的操作将不会触发重排和重绘,添加足够多的变更后,通过 display
属性显示(另一次重排重绘)。通过这种方式即使大量变更也只触发两次重排。另外,visibility : hidden
的元素只对重绘有影响,不影响重排。body
的一个子元素,重排开销比较小,不会对其它节点造成太多影响。当你在这些节点上放置这个元素时,一些其它在这个区域内的节点可能需要重绘,但是不需要重排。position
属性为 absolute
或 fixed
的元素上,这样对其他元素影响较小。GPU
硬件加速是指应用 GPU
的图形性能对浏览器中的一些图形操作交给 GPU
来完成,因为 GPU
是专门为处理图形而设计,所以它在速度和能耗上更有效率。GPU
加速通常包括以下几个部分:Canvas2D,布局合成, CSS3转换(transitions),CSS3 3D变换(transforms),WebGL和视频(video)。