# 回流与重绘

# 浏览器的渲染过程

从DOM根节点开始遍历每个可见的节点
- 不可见节点:
  - 不能渲染输出的节点:link,script,meta等等
  - 使用css隐藏的节点:display:none;
对于每个节点在CSSOM树中找到对应的规则并应用
根据每个可见节点与其对应的css样式,组合生产渲染树

计算可见的Dom节点在设备视口的位置和尺寸,这个计算阶段就是回流

为了知道每个可见节点在视口的确切大小和位置,浏览器从渲染树的根节点进行遍历

经过生成的渲染树和回流阶段,得到了所有可见节点具体的几何信息与样式,然后将渲染树的每个节点转换成屏幕上的实际像素,这个阶段就叫重绘节点

回流一定触发重绘,重绘不一定触发回流

const e = document.querySelector('#test')
e.style.color = 'white'
e.style.fontSize = '18px'

1
2
3

cssText

const e = document.querySelector('#test')
e.style.cssText += 'color:white;font-size:18px;'

1
2

class

const e = document.querySelector('#test')
el.className +='active'

1
2

需要对dom进行一系列修改时候,减少回流重绘次数方案

脱离文档流的方式

避免频繁使用 style，而是采用修改class的方式
resize、scroll 等时间进行防抖或者节流处理
添加 will-change: tranform:让渲染引擎为其单独实现一个图层，当这些变换发生时，仅仅只是利用合成线程去处理这些变换，而不牵扯到主线程，大大提高渲染效率
动画使用 transform 实现

参考