浏览器渲染过程

1.解析html

• 解析css会单独开一个预解析线程去执行，等解析完毕后合并至dom树
• 在遇到 script 标签会暂停解析（这也是为什么js会暂停渲染 css不会的原因）
• html和css最后生成两棵树， dom树与cssom

2.样式计算 （computed)

• 两棵树进行遍历让dom树上都有css样式，并且在生成后css样式会转为绝对单位

3.布局（layout）

• 在此阶段dom树变为layout树，该阶段重点在布局，前面的样式计算列如20px这种绝对单位，但auto无法计算，并且需要了解相对于谁去margin。（联想重排）

4.分层（layer）

5.绘制（paint）

• 到此为止主渲染线程不在执行交给其他线程执行

6.分块（Tiling）

• 在此主渲染线程交给合成线程完成

7.光栅化

• 之后交给gpu线程处理

8.画（draw）

• 重排会引起样式计算后所有流程 而重绘只有样式计算和绘制后的流程

解析html -> 样式计算->布局->分层->绘制->分块->光栅化

8.transform性能高的原因在于只有后面的画

上面代码中生成两个圆当点击时会阻塞主线程5秒cir2因为是以left进行循环的动画效果 而left会发生在样式会触发样式计算之后所有步骤，所以会形成卡顿。但transform值发生在drwa步骤与主线程无关并不会受到影响