重绘与回流是浏览器渲染的时候进行的操作,当页面内容发生改变的时候,就会触发重绘或者回流
当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color
,则就叫称为重绘Repaint
,重绘不一定触发回流。
当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,这就称为回流Reflow
,有些地方也称为重排,可理解为重新布局。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建渲染树,回流一定触发重绘。
Reflow
的成本比Repaint
的成本高得多的多。DOM Tree
里的每个结点都会有reflow
方法,一个结点的reflow
很有可能导致子结点,甚至父点以及同级结点的reflow。在一些高性能的电脑上也许还没什么,但是如果reflow
发生在手机上,那么这个过程就会卡顿与耗电。
DOM
结点时Resize
窗口的时候,或是滚动的时候DOM
的位置,或是做个动画的时候浏览器本身携带一些优化方式,浏览器会把回流和重绘的操作积攒一批,当操作达到一定数量或者到达时间阈值,然后做一次reflow
,称为异步reflow
或增量异步reflow
。但是有些情况浏览器是不会这么做的,例如resize
窗口,改变了页面默认的字体等等。对于这些操作,浏览器会马上进行reflow
。
由于重绘和回流可能代价比较昂贵,因此最好就是可以减少它的发生次数,为了减少发生次数,我们可以合并多次对DOM
和样式的修改,然后一次处理掉,或者将样式事先设计好,动态去改变class
。
使用documentFragment
对象在内存里操作DOM
,在内存中的DOM
修改就是让元素脱离文档流,当然是不会触发重绘的,将对DOM
的所有修改批量完成,想怎么改就怎么改,然后将节点再放入文档流中,只触发一次回流。
对于复杂动画效果,由于会经常的非常频繁的引起回流重绘,可以使用绝对定位,让它脱离文档流,否则会引起父元素以及后续元素频繁的回流。
通过style
属性动态设置样式是在操作一个很小的DOM
片段,容易导致多次回流。避免设置多级内联样式,样式应该合并在一个外部类,这样当该元素的class
属性可被操控时仅会产生一个reflow
。
尽可能在DOM
树的最末端或者是层级较低的节点改变class
,回流可以自上而下,或自下而上的回流的信息传递给周围的节点。回流是不可避免的,但可以减少其影响。末端节点或者低层级节点的修改可以限制回流的范围,使其影响尽可能少的节点,当然其也有可能引发大面积回流。
Opera
还建议我们牺牲平滑度换取速度,其意思是指若可能想每次1
像素移动一个动画,但是如果此动画及随后的回流使用了100%
的CPU
,动画就会看上去是跳动的,因为浏览器正在与更新回流做斗争。动画元素每次移动3
像素可能在非常快的机器上看起来平滑度低了,但它不会导致CPU
在较慢的机器和移动设备中抖动。
在布局完全建立之前,table
经常需要多个关口,因为table
是个很罕见的可以影响在它们之前已经进入的DOM
元素的显示的元素。想象一下,因为表格最后一个单元格的内容过宽而导致纵列大小完全改变,这就是为什么所有的浏览器都逐步地不支持table
表格的渲染。然而有另外一个原因为什么表格布局是很糟糕的主意,即使一些小的变化将导致表格table
中的所有其他节点回流。
CSS3
硬件加速也就是GPU
加速,可以transform
、opacity
、filters
这些动画不会引起回流重绘,但是对于动画的其它属性,比如background-color
这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。但是也会有一些问题,如果为太多元素使用css3
硬件加速,会导致内存占用较大,会有性能问题。在GPU
渲染字体会导致抗锯齿无效。这是因为GPU
和CPU
的算法不同。因此如果不在动画结束的时候关闭硬件加速,会产生字体模糊。
在很多浏览器的开发者工具中提供了渲染操作的性能分析,以谷歌浏览器为例,其performance
就可以查看各构建过程的性能消耗,在Rendering
中可以使用Paint flashing
高亮重绘区域、Layout Shift Regions
高亮页面进行交互的布局变化、FPS meter
显示FPS
帧率等操作来进行性能分析测试