你不知道的浏览器渲染流程

首先需要了解什么是浏览器渲染大体分为几步：

渲染线程
合成线程

渲染线程做了什么：

解析 html
生成 dom
生成 cssom
通过样式计算生成带 style 的 dom tree
进行布局生成 layout tree
进行分层
生成绘制指令

合成线程做了什么：

通过渲染线程最后生成的绘制指令，进行分块
光栅化：优先渲染可视区域的块
计算 transform 的属性
进行绘制

衍生---重排（reflow）、重绘（repaint）

什么是重排（reflow）

元素的几何位置发生了变化，导致dom、cssom重新生成，而引发浏览器的重新渲染，被称为重排

可以诱发重排的属性：width、height、fontsize、padding、margin 等

什么是重绘（repaint）

元素的可见属性发生了变化，导致重新布局，进行的重绘绘制，被称为重绘