Chrome 渲染流水线演化的未来

前段时间我写了一篇文章浏览器渲染流水线解析与网页动画性能优化,对目前 60 左右版本的 Chrome 的渲染流水线进行解析,文末也讨论了当前渲染流水线的一些不足和未来演化的方向。

当前的渲染流水线过于复杂和冗长,特别是对于非合成器动画来说,过多的线程/进程间交互增加了不少额外开销,异步光栅化的机制也是有利于合成器动画而不利于非合成器动画。而未来的演化理应需要简化渲染流水线,减少线程/进程间交互,避免非必要的额外开销,光栅化和合成不再像现在一样泾渭分明,渲染流水线可以支持更灵活和动态自适应的图层化和光栅化策略,根据硬件的能力和性能,还有页面的绘制特征采取不同的图层化和光栅化方式,从而最大化页面的动画性能。

最近通过阅读 Chrome 官方的一些文档,对 Chrome 渲染流水线未来演化的一些细节也有了更多认识。本文主要针对最近一次 Blinkon 上的演讲 What is Viz: The Future of Chrome Compositing 进行解读(如果该网址无法访问,可以从作者的 Github 上下载完整的 Slides),回馈对此感兴趣的读者。

FBI WARNING
个人解读不保证绝对正确

1 Servicification

Chrome 渲染流水线的演化是在 Chrome 整个系统架构演化的大背景下发生的,官方称这个过程为 Servicification,释义来自于维基百科

Servicification is “the migration from monolithic legacy applications into service-based components”

对 Chrome 来说,就是:

Splitting a monolithic Chrome browser up into components.

也就是说 Chrome 整体架构会朝向现代 OS 所采用的 SOA (Services Oriented Architecture) 方向发展,原来的各种模块会被重构成独立的 Services,每个 Service 都可以运行在独立进程,访问 Services 必须通过定义好的接口,通过 IPC 进行通讯,从而构建一个更内聚,松耦合,易于维护和扩展的系统,更好实现 Chrome 的目标:

  • Speed
  • Simplicity
  • Security
  • Stability

Chrome 的渲染相关模块最终会重构成两个 Services,一个负责非网页部分绘制的 UI Service,包括浏览器的 UI 界面,Chrome OS 的 GUI 界面等;一个负责网页部分绘制的 Service,也就是本文主要讨论的 Viz。

Chrome 整个系统架构演化这个题目太过庞大,本文不再过多讨论,感兴趣的读者可以阅读官方的这篇文档 —— Chrome Service Model

2 Viz

Viz 是 Visuals 的简写,按照规划:

  1. GPU 进程被改造成 Viz 进程,用于运行 Viz Service;
  2. 分布在其它进程的跟渲染有关的光栅化,多级合成器等,最终都会被整合到 Viz Service,统一运行在 Viz 进程;

最终要达成的目标:

  1. 实现 Chrome Servicification 的架构目标,Service 内部更内聚,跟外部的关系更松耦合;
  2. 光栅化,合成,GPU 调用等全部汇集在同一个 Service 内部,统一在同一个进程,使得 Chrome 可以对渲染流水线进行重组和简化,减少不必要的开销,提高整体效率;

上图显示了 Chrome 当前的渲染流水线:

  1. GPU 进程的用途是实现对 GPU 的虚拟化封装,其它进程可以通过 Command Buffer(可以看做是 Chrome 提供的一个 Virtual GL Context)跨进程地访问 GPU,Command Buffer 通过支持跨进程,带来了更好的安全性和健壮性,但是也引入了一定的额外开销;
  2. 光栅化和 Layer Compositor 运行在 Renderer 进程,光栅化器(GPU 光栅化)通过 Command Buffer 跨进程访问 GPU;
  3. Display Compositor 运行在 Browser 进程,同样通过 Command Buffer 跨进程访问 GPU;

Viz 改造是逐步进行的,每一阶段会实现一些新特性,本文后续的部分会对这些新特性的内容进行介绍。

2.1 Tadpole - Direct Compositing

Direct Compositing 实际包含前后两个步骤:

  1. 首先是 Display Compositor 要从 Browser 进程迁移到 Viz 进程(原 GPU 进程);
  2. 然后 Display Compositor 原来使用的 GLRenderer 会替换成新的 SkiaRenderer,SkiaRenderer 直接使用 Native GL 而不是通过 Command Buffer 封装的 Virtual GL;

Direct Compositing 预计能带来 10% - 15% 左右的性能提升,减少了进程间交互和 Command Buffer 带来的额外开销。在这个过程中 Renderer 进程保持不变。

2.2 OOP Rasterization

OOP 是 Out of Process 的缩写,所谓 OOP Rasterization 就是将光栅化从 Renderer 进程迁移到 Viz 进程。

原来的光栅化器(GPU 光栅化)运行在 Renderer 进程,它将 2D 绘图指令转换成 GL 绘图指令通过 Command Buffer 交给 GPU 进程运行。OOP Rasterization 后,位于 Renderer 进程的 Layer Compositor 需要支持 2D 绘图指令的序列化和反序列化,将 2D 绘图指令传递到 Viz 进程执行。

OOP Rasterization 处于跟 Direct Compositing 并行开发的阶段,并最终会进行融合。融合后的结果如上图,光栅化器(GPU 光栅化)和 Display Compositor 同样使用 SkiaRenderer,直接调用 Native GL 而不是通过 Command Buffer 封装的 Virtual GL。

2.3 Vulkan

Command Buffer 基本上是以 GL 为模板设计出来的,API 跟 GLES 也保持一一对应,这也意味着很难让 Command Buffer 同时也支持 Vulkan。Chrome 引入对 Vulkan 的支持主要是通过 Skia,SkiaRenderer 或者 Skia Ganesh Compositor(抱歉我也搞不清到底哪个会是最后官方的称谓)会同时支持使用 GL 或者 Vulkan 作为 Backend,根据设备的硬件能力进行选择。

预计使用 Vulkan 比起使用 GL 会带来 10 - 15% 的性能提升。

2.3.1 WebGL

对于 WebGL 来说,为了保证在 Renderer 进程使用 GPU 的安全性和健壮性,WebGL 对 GL 的调用还是一样要通过 Command Buffer。后端的实现可能有两种方式,一种是后端仍然在一个独立的 GL Context 上使用 GL,然后 WebGL 绘制的 FrameBuffer 通过平台相关的 API share 到 Vulkan Context;另外一种是通过 Angle for Vulkan (aka Vangle) 将 GL 指令转换成 Vulkan 指令在 Vulkan Context 上运行,个人猜测移动平台上多半是前者。

2.4 Salamander - Central Layerization

Salamander 是目前规划的 Viz 改造的最后阶段:

  1. Layer Compositor 从 Renderer 进程迁移到 Viz 进程,并和 Display Compositor 融合成 Unified Compositor;
  2. Renderer 发送给 Viz 的数据只包括每一个排版对象的绘图指令,和携带图层数据的 Property Trees,Unified Compositor 根据这些数据和其它信息来决定最终的图层化策略;
  3. OOPIF 的绘制得到更好的支持,避免不必要的光栅化和合成;

虽然官方的文档没有说明,但是个人觉得在这里 Unified Compositor 可以根据需要选择不同的光栅化策略,比如为个别图层分配 Offscreen Buffer,采用 ASync 或者 On Demand Rasterization 的光栅化策略;而另外一些图层则不分配 Buffer,采用 Direct Rasterization 的光栅化策略;

3 Summary

3.1 Viz Status

正在进行中

  • Tadpole: relocate the DisplayCompositor to Viz in 66
  • OOP Rasterization in Viz Q2 2018
  • SkiaRenderer in 67

2018 Q3 之后开始

  • Vulkan graphics
  • Salamander: central layerization

整个过程还是相当漫长,目前有明确的版本规划的只是 67 的 Direct Composting,其它只有大概的时间规划,还没有明确会在哪个版本 Landing。

3.2 Viz Take-aways

从两个角度思考 Viz:

  1. Chrome 图形子系统的 Servicification 过程;
  2. 更好的 GPU 进程;

Viz 从下面三个方面带来渲染性能的提升:

  1. 10 - 15% 的性能提升来自于移除不必要的 Command Buffer 的使用;
  2. 10 - 15% 的性能提升来自于对 Vulkan 的支持;
  3. 对 OOPIF 绘制的更好支持,避免不必要的光栅化和合成;
时间: 2024-08-03 07:58:09

Chrome 渲染流水线演化的未来的相关文章

浏览器渲染流水线解析与网页动画性能优化

若干年前,我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink),这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流水线整体进行分析,所以打算重新写一篇新的文章,从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析,能让大部分页端同学都能够看的明白,并以此作为指引来分析和优化页面的渲染/动画性能. 有些基本概念如图层,分块,光栅化基本没有发生变化,如果读者不理解的话请参考 How Rendering Work

浏览器渲染流水线解析(一)

若干年前,我写过一篇介绍浏览器渲染流水线的文章 - How Rendering Work (in WebKit and Blink),这篇文章,一来部分内容已经过时,二来缺少一个全局视角来对流水线整体进行分析,所以打算重新写一篇新的文章,从一个更高抽象层次和高度简化的方式对浏览器的渲染流水线进行解析,能让大部分页端同学都能够看的明白,并以此作为指引来分析和优化页面的渲染/动画性能. 有些基本概念如图层,分块,光栅化基本没有发生变化,如果读者不理解的话请参考 How Rendering Work

浏览器渲染流水线解析(二)

2. 网页动画 动画可以看做是一个连续的帧序列的组合.我们把网页的动画分成两大类 -- 一类是合成器动画,一类是非合成器动画(UC 内部也将其称为内核动画,虽然这不是 Chrome 官方的术语). 合成器动画顾名思义,动画的每一帧都是由 Layer Compositor 生成并输出的,合成器自身驱动着整个动画的运行,在动画的过程中,不需要新的 Main Frame 输入: 内核动画,每一帧都是由 Blink 生成,都需要产生一个新的 Main Frame: 2.1 合成器动画 合成器动画又可以分

Chrome 渲染引擎 Blink 的 2014 年计划

Google工程师公布了Chrome渲染引擎Blink的2014年工作目标.Google在2013年4月宣布从WebKit切换到Blink.Blink的2014年目标主要是集中在改进移动版性能,包括改进平滑滚动.动画和输 入响应,以及减少内存占用和电力消耗. 其它目标集中在改进浏览器移动Web平台,模糊本地应用和浏览器Web应用的界限,支持应用离线模式,Web应用支 持推送通知和硬件特定功能. Google还将继续从Blink中清理它不需要的代码.Blink的路线图过度向移动倾斜可能与Boss

浏览器渲染流水线解析(四)

5 非合成器动画性能分析和优化指南 前面已经我们已经把非合成器动画区分为 Blink 触发,无法由合成器运行的动画和由 Timer/RAF 驱动的 JS 动画两类,因为前者可以认为是后者的一个简化版本,所以这一章主要讨论 Timer/RAF 驱动的 JS 动画. 5.1 动画流水线 从上图可以看出非合成器动画的流水线比合成器动画更长更复杂,并且非合成器动画的后半段跟合成器动画是一致的. JavaScipt 部分是页端实现的逻辑,可能包含了计算的部分,和调用浏览器提供的 API 的部分(修改 DO

Chrome Frame让你能在IE内使用Chrome

Google有一个名为Chrome Frame的开源项目,该插件允许Chrome的渲染引擎在微软的IE 6.7.8内部运行.这个插件允许开发人员让用户选择是否切换到Chrome渲染和JavaScript引擎.用户可以继续使用IE,完全无缝式切换,用户界面不会发生明显变化. Chrome钻进IE里 谈到这个插件,Google的Mike Smith 和 Alex Russell告诉我们,很多公司确实离不开IE.毕竟,这些企业的很多基础设施投入只能和IE兼容.但同时Google也指出,这(只能兼容IE

DT观察 | DT化进程持续展开:未来十年科技是什么样子?

约100年前的1910年,有感于曼哈顿的灯火通明,美国意象派诗人埃兹拉-庞德这样赞颂新奇的电力:"这就是文明诗一样的美景,因为我们已把星星摘了下来,终于遂了心愿".无数的热议.想象.憧憬.幻想,同样发生于100年后的今天--DT时代! DT时代的模式升级与范式转移之产业篇 相关阅读: DT时代的模式升级与范式转移之范式篇 DT时代的模式升级与范式转移之模式篇 DT时代的模式升级与范式转移之文化篇 宋斐 潘永花 田丰  如果说IT时代类似工业时代的第一次工业革命,标志着信息文明的开端,那

浏览器的渲染性能

用户都 希望他们访问的web应用是可交互且运行流畅的.因此,作为web开发者,你也要在这方面多花点功夫.你所做的页面,不但要能被快速加载,还要能流畅运行:页面的滚动要快速响应手指的动作,动画和交互效果更要如丝般顺滑. 要想编写高性能的web站点或应用,你需要充分了解浏览器是如何处理HTML/JavaScript/CSS的,从而确保你写的代码(或引用的第三方代码)是尽可能高效的. 60fps和设备刷新率 当今大多数设备的屏幕刷新率都是 60次/秒 .因此,如果在页面中有一个动画或渐变效果,或者用户

斐讯发力渲染云 打造“互联网+”文创产业链

不久前引爆全球的<魔兽>历经近两年后期渲染制作,最终拿下超14亿国内票房.而同样拥有众多炫酷特效的<独立日:卷土重来>上映几天已揽下了近4亿票房.随着CG技术的不断进步和国家对文化产业的日益重视,影视.动漫.游戏等行业迎来了爆发式增长.2015年,国内文化创意产业规模近2000亿元.市场规模和发展速度空前的同时,对渲染的要求和标准也越来越高. 然而,对于制作团队来说,如果自购渲染硬件,单套应用引入成本巨大,而且维护也是一笔不菲的费用.采用传统手工操作式的渲染农场,一方面需要消耗极大