浏览器渲染流程

avatar
作者
筋斗云
阅读量:2

渲染流水线

生成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属性

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!