急速预览版
渲染进程将HTML内容转换为能够读懂的
DOM树
结构渲染引擎将CSS样式转换为,浏览器可以理解的
stylesheets
计算出DOM节点的样式创建布局树,并计算元素的布局信息
对布局树进行分层,并生成
分层树
对每个图层生成
绘制列表
,并将其提交到合成线程合成线程会将图层分为
图块
,并在光栅化进程池
中将图块转为位图合成线程发送绘制图片命令
DrawQuad
给浏览器进程浏览器根据
DarwQuad
消息生成页面
,并显示到显示器上
重绘
如果通过JavaScript或CSS修改某些元素的 背景颜色
, 那么布局阶段将不会被执行,因为并没有引起几何位置的变换,所以 直接进入绘制阶段
,然后执行一系列子阶段,这个过程叫做 重绘(重写一遍不改变位置、大小)
,比较重排操作 重绘省去了布局和分层阶段,所以执行效率会比重排效果高、快、省性能开销
重排
那么通过JavaScript或者css修改元素的几何位属性,列如改变元素的 宽度、高度
等,那么浏览器会触发 重新布局
,解析之后的一系列子阶段,这个过程叫做 重排
。重排需要更新完整的渲染流水线,所以开销也是最大的
。
敲黑板
重排必定引起重绘,重绘不一定引起重排。
避开重绘重排
那么如何避开重绘重排呢?也就是渲染引擎跳过布局和绘制,执行后续的合成操作,我们把这个过程叫做合成。
如上图,我们在使用css的transform实现动画效果,可以避开重绘、重排阶段。直接在非主线程上执行合成动画操作。这样是效率最高的,因为在非主线程上合成,并没有占用主线程的资源,避开了布局和绘制两个阶段,所以 相对于重绘重排
,合成大大提升绘制效率。
至于如何通过这些概念去优化页面,我会在后期更新~请关注 https://www.yuque.com/qdwds