浏览器渲染过程
- 解析HTML生成DOM树。
- 解析CSS生成CSSOM规则树。
- 将DOM树与CSSOM规则树合并在一起生成渲染树。
- 遍历渲染树开始布局,计算每个节点的位置大小信息。
- 将渲染树每个节点绘制到屏幕。
回流(reflow): 当浏览器发现某个部分发生了变化影响了布局(某个元素的显示与隐藏,宽度高度的改变),需要重新渲染。也就是会导致浏览器重新生成渲染树,reflow 会从根节点开始递归往下,依次计算所有的结点几何尺寸和位置。
重绘(repaint): 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,会发生重绘,重绘简单的说就是重新绘制,将渲染树每个节点绘制到屏幕上。
不同点: 回流一定会重绘,而重绘不一定会引起回流
注意点
-
display:none
会触发 reflow,而visibility:hidden
只会触发 repaint,因为没有发生位置变化。 - 有些情况下,比如修改了元素的样式,浏览器并不会立刻 reflow 或 repaint 一次,而是会把这样的操作积攒一批,然后做一次 reflow,这又叫异步 reflow 或增量异步 reflow。
- 有些情况下,比如 resize 窗口,改变了页面默认的字体等。对于这些操作,浏览器会马上进行 reflow。
- 使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘
- 对于动画的其它属性,比如background-color这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。
如何减少重排重绘?
- 用 JavaScript 修改样式时,最好不要直接写样式,而是替换 class 来改变样式(合并多次对DOM和样式的修改,然后一次性修改)。
- 如果要对 DOM 元素执行一系列操作,可以将 DOM 元素脱离文档流,修改完成后,再将它带回文档。
- 对于复杂动画效果,使用绝对定位让其脱离文档流
网友评论