浏览器渲染流程

渲染流水线

生成dom树

根据html生成dom树

生成cssom树

解析css生成一颗cssom树

document.styleSheets

构建布局树-layout

根据dom树与cssom树构建一棵layout布局树,会移除不可见部分, 如display:none的dom, 但visible: hidden这种会保留
同时会计算可见部分的几何位置

划分图层-layer

页面的显示其实是类似于photoshop多图层模式
不同的元素或显示情况对应不同的图层, 根据图层最后合成一张图片

绘制-paint

为每个图层生成包含绘制信息的绘制列表, 将绘制列表提交给渲染进程的合成线程用于绘制

重排、重绘、合成

重排

修改dom的几何属性时，会触发完整的渲染流水线，此情况成为重排

重绘

修改的dom属性不涉及几何属性，会省略layout、layer，此过程称为重绘

合成

修改的属性不涉及上述重排重绘的属性时，省略layout、layer、paint，仅执行合成线程的绘制工作
这种情况称为合成

如transform属性