在控制台的Layers下，可以看到合成层。
- overlap：元素覆盖在其他合成层元素上，则该元素被隐式提升为合成层，demo代码如下
demo中的上层div，本不具备提升为合成层的因素，但由于其覆盖在了下层div上，如果上层div不隐式提升为合成层，它就会和和父元素共用一个合成层，此时渲染顺序就会出错。为了保证渲染顺序，因此上层被隐式提升为合成层。在控制台也可以看到原因：might overlap other composited content.
渲染层是为保证页面元素以正确的顺序，合成层是为了减少渲染的开销。
提升为合成层的好处：
-
合成层的位图，会采用硬件加速，也就是会交由 GPU 合成，比 CPU 处理要快
-
当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
-
对于已提升为合成层中的 transform 和 opacity 效果，都只是几何变换，透明度变换等，不会触发 layout 和 paint，直接由GPU完成即可
因此，在开发中，建议对于需要频繁移动的元素，建议将其提升为单独的合成层，可减少不必要的重绘，同时可以利用硬件加速，提高渲染效率。
4.2层绘制paint
分好层后，就需要对每个层进行绘制了。绘制并不是一蹴而就，而是像画画一样，是按顺序一笔一笔画出来的，渲染引擎也是类似。对于每一个合成层，渲染引擎的渲染过程：
-
先绘制下面的渲染层，再绘制上面的渲染层；
-
在绘制一个渲染层时，将一个渲染层的绘制拆分成很多小的绘制指令。
常见的指令如下：
-
drawReact(rect, paint)：使用paint画一个矩形rect
-
drawTextBlob(x,y,paint)：使用paint以x、y为起始坐标绘制文字
-
drawPaint(paint)：用paint填充画布
-
color：采用ARGB的方式
各指令的含义可参考链接[7]
打开“开发者工具”的“Layers”标签，任意选择一层合成层，可查看该层detail下的详细渲染列表paint profiler。绘制指令demo代码如下
合成层一
合成层二
比如选择composite-1的合成层，绘制列表如下：
这里顺便也可以看到一点：渲染层2在渲染层1的后面，但由于其z-index较大（说明其渲染层层级较高），因此优先渲染层2。
需要说明一点，绘制列表只是用来记录绘制顺序和绘制指令的列表，并没有真正的绘制出页面。
4.3栅格化
生成了绘制指令，就到了真正绘制页面的时候了，真正的绘制过程不是在主线程完成的，而是在得到绘制指令后，主线程会将这些信息交给合成线程，由合成线程来完成绘制。
合成线程是如何工作的呢？
页面可能很大，但用户只能看到一部分，在这种情况下如果全部绘制，就会产生很大的性能开销，因此需要优先绘制视口（即用户看到的区域）区域内的元素。
基于此原因，绘制前，合成线程会对页面进行分块，然后将每个图块发送给栅格线程，栅格线程将图块转换为位图。合成器线程可以优先处理不同的栅格线程，这样就可以首先对视口（或附近）中的事物进行栅格化。
通常，栅格化过程都会使用 GPU 来加速生成，生成的位图被保存在 GPU 内存中。
栅格化的过程：
5、合成与显示
栅格化完成后，每一个图层都对应一张“图片”，合成线程会将这些图片合成为一张“图片”。此时，页面数据已经完成绘制，现在只需要显示给用户即可，此时就需要显卡和显示器就上场了。
显卡分为前缓冲区和后缓冲区，合成线程生成的“图片”会被发送至后缓冲区。显卡对图片进行处理完成后，系统就会让后缓冲区和前缓冲区互换，这样显示器就总能读到显卡最新产生的数据了。
通常显卡和显示器的刷新频率是一致的，都会60次/秒，但对于一些复杂的场景，显卡处理速度比较慢，显卡的刷新频率就会低于显示器，此时页面就会出现卡顿现象。
因此在开发中，我们需要尽量保证一帧画面的处理总时长（以上的所有步骤）不超过1/60s = 16.7ms，这样画面才不会出现卡顿现象。不过量化地衡量渲染时间比较困难，但基于以上分析的渲染过程，我们就可以从渲染的各个步骤着手优化渲染流程，提高渲染效率。
6、相关拓展
6.1 CSS如何影响DOM的构建
JavaScript脚本由于可能会修改DOM，因此会阻塞DOM的构建，这一点我们都知道；而CSS并不会操作或者改变DOM，因此通常我们认为CSS不会影响DOM的构建，只会影响后续的布局、绘制等过程，即会影响DOM的渲染。但其实CSS可以通过JavaScript来阻塞DOM的构建。
因为JavaScript是可以改变样式的，也就是具有修改CSS规则树的能力，而JavaScript脚本里是否有改变样式的操作，这一点在执行JavaScript之前是不可知的。因此，为保证JavaScript脚本的正确执行，在执行JavaScript之前，CSS规则树必须要先准备好（不然万一有修改CSS的操作呢）。
也就是说，若在构建DOM的中途存在阻塞DOM构建的JavaScript脚本，而此页面中还包含了外部 CSS 文件的引用，那么此时就需要等目前的CSS规则树（基于目前生成完的部分DOM树）构建完毕后，再开始JavaScript脚本的执行，等一切结束了，再继续DOM的构建。
整个流程如图：（其中CSSOM表示CSS规则树）
demo代码如下：
清空dom
将控制台Network中的网络调为Slow 3G，点击按钮清空dom后，刷新页面观察Element中DOM元素出现的时机。
-
当不存在script时，所有div全部很快出现
-
存在script时，script后的div元素要等一会（css加载完成）才会出现
说明CSS可以通过JavaScript来阻塞DOM的构建。
6.2重排、重绘、合成
-
重排会改变元素的几何位置，需要更新完整的渲染流水线，所以开销也是最大的
-
重绘只是修改元素的颜色等非位置属性，所以省去了布局和分层阶段，开销比重排小
-
合成只会由已提升会合成层的transform或opacity触发，只涉及几何变换或透明度变换， 会跳过前面的流程，直接进入合成阶段，开销最小。（transform或opacity若未提升为合成层，则依然会触发paint）
另外在合成小节提到，生成绘制指令之后的分开、栅格化等工作是在合成线程中进行，这也就意味着在执行合成操作时，是不会影响到主线程执行的，这也是合成动画性能好的原因之一。也就揭示了为什么经常主线程卡住了，但是 CSS 动画依然能执行的原因。
6.3层爆炸
前面提到overlap会导致生成隐式合成层，极端情况下就可能会产生大量的不在预期内的额外合成层，导致层爆炸。demo[8]
因此，在开发过程中，建议：
-
为防止层爆炸，在提升为合成层的元素上，建议加上z-index，防止overlap引起的层提升。
-
不要创建太多层，因为每层都需要内存和管理开销；不要在不分析的情况下提升元素。
7、参考
-
极客时间专栏-浏览器工作原理与实践[9]
-
无线性能优化:composite[10]
-
Inside look at modern web browser (part 3)[11]
-
详谈层合成[12]
参考资料
[1]
极客时间专栏-浏览器工作原理与实践: https://time.geekbang.org/column/intro/216
[2]
Vue.js的HTMLParser实现: https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js
[3]
链接: https://www.cnblogs.com/xiaohuochai/p/5848335.html
[4]
few talks from BlinkOn Conference: https://www.youtube.com/watch?v=Y5Xa4H2wtVA
[5]
层叠上下文-MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
[6]
链接: https://fed.taobao.org/blog/taofed/do71ct/performance-composite/
[7]
链接: https://api.flutter.dev/flutter/dart-ui/Canvas/restore.html
[8]
demo: http://fouber.github.io/test/layer/?size=20
总结
-
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
-
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
扫一扫
7055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
