RenderingNG

准备好迎接新一代 Web 内容

Chris Harrelson

注意：此博文是有关 Chromium 渲染引擎的系列博文的一部分。请查看本系列中的其他内容，了解详情。

我叫 Chris Harrelson，是一名工程主管，负责在 Blink 中进行渲染（将 HTML 和 CSS 转换为像素）。8 年多来，我一直在深入了解 Web 渲染性能，我的个人目标就是竭尽所能地在 Web 上提供更快速、更轻松、更可靠的用户体验。非常高兴能够与您分享在这段时间内，我们在构建先进的新 Chromium 渲染引擎架构方面所付出的努力。 为实现这一目标，我们付出了巨大的爱心，希望您有所收获！

2021 年，我们将在很大程度上完成此架构的设计、构建和交付流程。之所以称其为 RenderingNG，是因为它确实是新一代渲染架构，性能大大优于之前的渲染架构。渲染 NG 技术已有至少 8 年时间，它代表了众多敬业 Chromium 开发者的共同努力。它充分释放了新一代快速、流畅、可靠、响应迅速的交互式 Web 内容的巨大潜力。我认为，它也是一项基准，它为所有网页呈现引擎定义了可供开发者依赖的新最低标准。

RenderingNG

本博文是系列博文中的第一篇，我们将介绍我们的开发成果、开发原因以及运作方式。在这第一篇帖子中，我将首先介绍以下内容：

• 我们的目标。
• 成功金字塔：指导我们工作的原则以及这些原则的实际示例。
• RenderingNG 提供的特性和功能。
• RenderingNG 主要项目组件的简要概览。

北极星

推动 RenderingNG 的终极目标是，浏览器引擎实现及其渲染 API 的丰富性不应成为 Web 用户体验的限制因素。

您无需担心浏览器 bug，导致功能不可靠或破坏网站呈现。

其中不应存在神秘的性能悬崖。 此外，您也不需要解决缺少内置功能的问题。

应该就能正常运作。

我认为 RenderingNG 是朝着这个目标迈出一大步的。在 RenderingNG 之前，我们（并且确实）可以（并且确实）添加渲染功能并提升性能，但在让开发者能够可靠地使用这些功能时，我们困难重重，并且存在许多性能悬崖。现在，我们有了一种架构，可以系统地解决许多此类问题，并解锁以前不可行的高级功能。其中包括：

• 它拥有跨不同平台、设备和操作系统组合的坚实核心功能。
• 具有可预测且可靠的性能。
• 最大限度地利用硬件功能（核心、GPU、屏幕分辨率、刷新率、低级别光栅 API）。
• 仅执行显示可见内容所需的工作。
• 内置了对常见视觉设计、动画和互动设计模式的支持。
• 提供开发者 API 以轻松管理渲染费用。
• 为开发者插件提供渲染流水线扩展点。
• 优化所有内容：HTML、CSS、2D 画布、3D 画布、图片、视频和字体。

与其他浏览器渲染引擎比较

Gecko 和 Webkit 也实现了这些博文中所述的大部分架构功能，在某些情况下，甚至在 Chromium 之前添加了这些功能。太棒了！ 虽然任何一款提高速度和可靠性的浏览器都备受赞誉，并产生了实质性的影响，但最终目标是推进所有浏览器的基准，让开发者能够依赖于它。

成功金字塔

我的理念是，首先实现可靠性，然后实现可伸缩的性能，最后是可扩展性。

就像在现实生活中一样，每个级别都会为上一关打下坚实的基础。

可靠性

如果要实现丰富而复杂的用户体验，我们首先需要一个坚实的平台。核心功能和基础组件必须正常运行，并持续运行。同样重要的是，这些特征具有良好的组合能力，并且没有奇怪的极端行为或 bug。

因此，可靠性是 RenderingNG 最重要的一个部分。可靠性是良好的测试、质量反馈环、指标和软件设计模式的结果。

为了让我们了解可靠性的重要性，我们过去 8 年的大部分时间里都只研究了这一部分。首先，我们深入了解了该系统 - 从存在缺陷的 bug 报告中学习并加以修复，引导全面测试，并了解网站的性能需求和 Chromium 性能的限制。然后，我们仔细地逐步设计并推出关键设计模式和数据结构。只有那时候，我们才准备好添加真正的新一代基元，以实现自适应设计、可扩缩性和自定义渲染。

这并不是说在此期间 Chromium 中没有任何改进。 事实上，情况正好相反！ 在这些年，随着我们逐步进行重构和推出每项改进，可靠性和性能实现了稳步持续性的提升。

测试和指标

在过去 8 年中，我们新增了数万个单元测试、性能和集成测试。此外，我们还开发了全面的指标，以便从多个方面来衡量 Chromium 的渲染效果，包括在本地测试、性能基准测试以及真实网站上的真实网站上使用真实用户/设备时的表现。

但无论 RenderingNG（或其他浏览器的渲染引擎）有多棒，如果各浏览器之间存在大量 bug 或行为差异，为 Web 开发应用仍然会很困难。为了解决这个问题，我们还最大限度地利用了 Web 平台测试。每项测试都会验证所有浏览器都应通过的网络平台的使用模式。我们还会密切监控在一段时间内通过更多测试和提高核心兼容性的指标。

Web 平台测试是一项协作式成果。例如，在针对 CSS 功能的总 WPT 测试中，Chromium 工程师仅添加了约 10% 的测试；其余的浏览器供应商、独立贡献者和规范作者则贡献了这些内容。集结全村之力，打造可互操作的网络环境！

从 wpt.fyi/compat2021 开始，衡量核心功能的 WPT 通过率

良好的软件设计模式

反过来，如果代码易于理解，并且以尽可能降低出现错误的可能性进行设计，那么可靠地交付高质量的软件就会容易得多。 我们将在后续博文中详细介绍 RenderingNG 的软件设计。

可扩缩的性能

在速度、内存和功耗方面，实现出色的性能是 RenderingNG 的下一个重要方面。我们希望与所有网站的互动都流畅、响亮，同时不牺牲设备的稳定性。

但我们不仅仅需要性能，还需要可扩缩的性能 - 这种架构在低端和高端机器以及各种操作系统平台上都能可靠地运行。我称之为纵向扩容（利用硬件设备可以实现的所有特性，再进行纵向缩容），从而在需要时最大限度地提高效率并减少对系统的需求。

为了实现这一目标，我们需要充分利用缓存、性能隔离和 GPU 硬件加速。下面我们来逐一介绍这两种方法。具体而言，我们来思考一下，每种方式对网页上一项极为重要的互动效果做出的贡献是：滚动。

缓存

在 Web 等动态交互式界面平台中，缓存是显著提升性能的最重要方式之一。浏览器中最广为人知的缓存类型是 HTTP 缓存，但渲染也有很多缓存。滚动时最重要的缓存是缓存的 GPU 纹理和显示列表，它可让滚动极快，同时最大限度减少电池电量消耗并在各种设备上良好运行。

缓存有助于延长滚动的电池续航时间并缩短动画帧速率，但更重要的是，它可以释放与主线程的性能隔离。

性能隔离

在现代桌面设备上，您再也不必担心后台应用会拖慢应用的运行速度。这是因为抢占式多任务处理又是一种性能隔离：确保独立任务不会减慢彼此的运行速度。

在 Web 端，性能隔离的最佳示例是滚动。即使在包含大量缓慢 JavaScript 的网站上，滚动也可以非常流畅，因为它是在一个不依赖于 JavaScript 和布局线程的其他线程上运行。我们在 RenderingNG 中投入了大量精力来确保每项可能的滚动都是线程处理的，通过缓存（远不止于显示列表，适用于更复杂的情况）。例如，用于表示固定位置和粘性元素的代码、被动事件监听器和高质量文本渲染。

GPU 加速

GPU 可以大幅加快像素生成和在屏幕上绘制的速度；在许多情况下，每个像素都可以与每隔一个像素并行绘制，从而大幅提升速度。RenderingNG 的一个关键组件是 GPU 光栅，可以随时随地进行绘制。它在所有平台和所有设备上都使用 GPU，以超加速方式渲染 Web 内容，并以动画方式呈现这些内容。 这在低端设备或非常高端的设备上尤其重要，因为这些设备的 GPU 通常比设备的其他部件要强大得多。

可扩展性：适用于作业的理想工具

一旦有了可靠性和可伸缩的性能，我们就可以在众多工具的基础上进行构建，以帮助开发者扩展 HTML、CSS 和画布的内置部分，同时不牺牲任何来之不易的性能和可靠性。

包括针对自适应设计、渐进式渲染、流畅性和响应速度以及线程式渲染的高级用例，内置了以及 JavaScript 公开的 API。

以下开放式 Web API 得到 Chromium 的倡导，是通过 RenderingNG 实现的，之前被认为是不可行的。

所有这些开发策略都是根据开放的规范与开放 Web 合作伙伴（其他浏览器、专家和 Web 开发者）的协作开发的。在后续的博文中，我们将深入探讨每一项功能，并说明 RenderingNG 如何让这些功能成为可能。

• content-visibility：使网站可以轻松避免对屏幕外内容进行渲染工作，并针对当前未显示的单页应用视图进行缓存渲染。
• OffscreenCanvas：允许画布渲染（2D canvas API 和 WebGL）在自己的线程上运行，从而获得可靠的出色性能。此项目也是 Web 的另一个重要里程碑，它是第一个允许 JavaScript（或 WebAssembly!）通过多个线程渲染单个网页文档的 Web API。
• 容器查询：允许单个组件以自适应方式布置自身，突破整个即插即用组件（目前为实验性实现）的集合。
• 源站隔离：让网站可以选择在 iframe 之间实现更强的性能隔离。
• 脱离主线程的绘制 worklet：让开发者能够通过在合成器线程上运行代码来扩展元素的绘制方式。

除了显式 Web API 之外，RenderingNG 还让我们能够提供多项重要的“自动功能”，让所有网站受益：

• 网站隔离：将跨源 iframe 放入不同的 CPU 进程中，以实现更好的安全性和性能隔离。
• Vulkan、D3D12 和 Metal：利用较低级别的 API，这些 API 使用 GPU 比 OpenGL 效率更高。
• 更多合成动画：SVG、背景颜色。

我们非常期待通过 RenderingNG 解锁的其他新功能，包括：

• 滚动链接的动画。
• 隐藏但可搜索且可访问的 DOM。
• 共享元素过渡。
• 自定义布局。
• 主线程外合成；将线程处理和合成分离。

构成 RenderingNG 的关键项目

以下是 RenderingNG 中的关键项目列表。后续博文将会深入探讨其中每一项。

CompositeAfterPaint

将合成从样式、布局和绘制中分离出来，大幅提高可靠性和可预测性能，增加吞吐量，并在不牺牲性能的情况下减少内存用量。该项目从 2014 年开始，到今年结束。

年	进度
2015	发布显示列表。
2017	提交新的失效操作。
2018	船产树第 1 部分：
2019	飞船媒体资源树第 2 部分：
2021	项目已完成交付。

LayoutNG

彻底重写所有布局算法，以大幅提升可靠性和可预测性。它从 2016 年开始，计划今年结束。

年	进度
2019	发货方块流程。
2020 年	发布弹性、编辑功能。
2021	寄出所有其他商品。

BlinkNG

系统地清理 Blink 渲染引擎，并将其重构为干净分离的流水线阶段。 这样可以实现更好的缓存、更高的可靠性以及可重入或延迟渲染功能，例如内容可见性和容器查询。它从 2014 年开始，一直在逐步改进。并于 2021 年完成。

在所有位置实现 GPU 加速

我们长期致力于在所有平台上实现 GPU 光栅化、绘制和动画。GPU 加速可以极大地提升大多数内容的速度，因为每个像素都可以并行处理。这也是提高低端设备性能（通常仍配有 GPU）的有效方法。该项目于 2014 年开始，并于 2020 年完成。

年	进度
2014	支持 Canvas。已在 Android 上提供用户自选的内容。
2016	在 Mac 上提供。
2017	超过 60% 的 Android 网页浏览使用了 GPU。
2018	可在 Windows、ChromeOS 和 Android Go 上运行。
2019	线程式 GPU 光栅化。
2020 年	发布剩余的 Android 内容。

线程滚动、动画和解码

一项长期的工作是将所有滚动、非布局诱导动画和图片解码移出主线程。它从 2011 年开始，并且一直在持续。

年	进度
2011	对线程滚动和动画的初步支持。
2015	层合并。
2016	通用溢出滚动。
2017	在合成器线程上解码图像。
2018	合成器线程上的图片动画。
2020 年	始终合成固定位置。
2021	百分比转换动画、SVG 动画。

可视化

Chromium 的集中式光栅和绘制进程，可提高吞吐量、优化内存并允许最充分地利用硬件功能。此外，它还有其他一些对 Web 开发者不易察觉，但对用户来说非常明显的优势，例如取消屏蔽网站隔离以及将渲染流水线与浏览器界面渲染分离。该项目从 2016 年开始，并将于 2021 年完成。

年	进度
2018	OOP-R 适用于 Android、Mac 和 Windows。
2019	OOP-D 已发货。OOP-R 寄送到任何地方（Canvas 除外）。SkiaRenderer 已在 Linux 上提供。
2020 年	SkiaRenderer 适用于 Windows 和 Android。Vulkan 在 Android 上提供。
2021	SkiaRenderer 现已在 Mac（以及 ChromeOS 很快）上推出。

上表中术语的定义：

OOP-D 模式

进程外显示合成器。 屏幕合成与 OS 合成器属于同一类型的 activity。进程外意味着在可视化进程中执行此操作，而不是在网页的呈现进程或浏览器界面进程中执行。

OOP-R

进程外光栅。光栅正在将显示列表转换为像素。进程外意味着在可视化进程中（而不是在网页的呈现进程中）执行此操作。

SkiaRenderer

一种新的显示合成器实现，可以支持在各种不同的底层 GPU API（例如 Vulkan、D3D12 或 Metal）上执行。

线程和加速画布渲染

这个项目运用了各种架构设计，让 OffscreenCanvas 成为可能。该项目从 2015 年开始，并将于 2021 年结束。

年	进度
2018	发布 OffscreenCanvas。
2019	发布 ImageBitmapRenderingContext。
2021	寄送 OOP-R.

VideoNG

我们长期致力于在网络上提供高效、可靠且高质量的视频播放体验。

年	进度
2014	引入了基于 Mojo 的渲染框架。
2015	新增了 Project Butter 和视频叠加层，可使视频呈现更流畅。
2016	提供了统一的 Android 和桌面设备解码和渲染流水线。
2017	随附的 HDR 和色彩校正视频渲染功能。
2018	发布了基于 Mojo 的视频解码流水线。
2019	随附的基于 Surface 的视频渲染流水线。
2021	在 ChromeOS 上提供了 4K 受保护内容渲染支持。

上表中术语的定义：

表情包

Chromium 的新一代 IPC 子系统。

Surface

Viz 项目设计中所包含的一个概念。

总结

网页和 Chromium 呈现的改进速度让我们无比激动。 我预计这项工作将在未来几年继续加快，因为我们能够在 RenderingNG 坚实的基础的基础上进行开发。

请继续关注更多后续博文，其中会详细介绍新架构、新架构的构建方式和工作原理。

设备照片由 Eirik Solheim 提供，由 Unsplash 用户

插图：Una Kravets。