浏览器渲染流程

浏览器拿到HTML文档过后，按照以下步骤进行首页渲染：

1. 构建DOM树
2. 构建CSSOM树
3. 将DOM树与CSSOM树进行合并，合并成渲染树（Render Tree）
4. 布局：浏览器根据渲染树，计算出每个节点具体坐标位置以及大小
5. 绘制：填充颜色，背景边框等
6. 合成：浏览器将各个图层分别绘制过后，最后由GPU合成在一起

回流(Reflow)：当渲染树发生变化的时候，在布局这一步就会重新计算 重绘(Repaint)：当布局发生变化的时候，绘制这一步就会重新计算

回流和重绘

reference

https://www.explainthis.io/zh-hans/swe/repaint-and-reflow