渲染优化–重绘和回流
回流和重绘
- 回流(重排):重新触发一次布局。当渲染树中元素的位置、大小、尺寸等几何信息发生改变,需要重新计算节点的大小和位置。
- 重绘:节点的样式发生改变,不会涉及几何信息,会重新绘制到浏览器。重新触发绘制。
回流一定发生重绘,重绘不一定发生回流。
回流的触发时机
- DOM节点的几何属性发生变化
- DOM树的结构发生改变。新增或者修改DOM树的节点
- 获取特定的属性,offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollxxx、clientxxx,这些属性的获取需要页面进行一次布局,以便获得最新的属性值。
- window.getComputedStyle(Dom Element)方法。
回流优化
- GPU硬件加速
开启GPU加速实际上是合成阶段的加速,合成阶段将不同的图层合成在一起,不同的图层的布局和绘制互不影响。(本质是开启了新的图层)
开启方法:与GPU有关的属性transform、opacity。
用transform代替top,left ,margin-top, margin-left等位移属性。
用opacity 代替 visibility,但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流。
补充知识:用visibility只会触发重绘不会触发回流,可以用visibility代替display属性对节点进行隐藏。
transform不会触发回流和重绘
- JS优化