示例代码托管在：http://www.github.com/dashnowords/blogs

博客园地址：《大史住在大前端》原创博文目录

华为云社区地址：【你要的前端打怪升级指南】

附件PPT来自chromium官方网站开发文档。术语里的cc指的是Chromium Compositor

一直以来都想了解浏览器合成层的运作机制，但是相关的中文资料大多比较关注框架和开发技术，这方面的资料实在是太少了，后来在chromium官方网站的文档里找到了项目组成员malaykeshav在 2019年4月的一份关于浏览器合成流水线的演讲PPT，个人感觉里面讲的非常清楚了，由于没有找到视频，有些部分只能自行理解，本文仅对关键信息做一些笔记，对此感兴趣的读者可以在文章开头的github仓库或附件中拿到这个PPT自行学习。

摘要

1.合成流水线

合成流水线，就是指浏览器处理合成层的工作流程，其基本步骤如下：

大致的流程就是说Paint环节会生成一个列表，列表里登记了页面元素的绘制指令，接着这个列表需要经过Raster光栅化处理，并在合成帧中处理纹理，最后的Draw环节才是将这些纹理图展示在浏览器内容区。

2. 预定义UI层

chromium中预定义了一些指定类型的UI层，大致分为：

• Not Drawn - 为了处理透明度或滤镜效果、transform变形或者clip剪裁的非绘制层
• Solid color layer - 固有颜色层
• Painted texture layer - Texture纹理会在这个层执行paint渲染和后续的rasterized光栅化任务
• Transferable resource layer - 共享资源层，可能是GPU里面的Texture纹理也可能未来会发给GPU的位图
• Surface layer - 临时占位层，因为自顶向下遍历layer树时子树都还没处理，需要先占位最后再填充
• Nine patch layer - 用于实现阴影的层

3. paint是什么意思

每个层layer是由若干个views组成的，所谓paint，就是每个views将自己对应图形的绘制指令添加到层的可展示元素列表Display Item List里，这个列表会被添加到一个延迟执行的光栅化任务中，并最终生成当前层的texture纹理（可以理解为当前层的绘制结果），考虑到传输性能以及未来增量更新的需求，光栅化的结果会以tiles瓦片形式保存。在chrome中也可以看到页面瓦片化拆分的结果:

4. 分层的优势和劣势

分层的优势和劣势也在此进行了说明，和之前我们主动思考的答案基本一致（暗爽一下）。

5. 视图属性及其处理方式