Chrome 渲染流水线演化的未来

摘要:前段时间我写了一篇文章浏览器渲染流水线解析与网页动画性能优化,对目前 60 左右版本的 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 可以对渲染流水线进行重组和简化,减少不必要的开销,提高整体效率;
Browser Render Pipeline

上图显示了 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

Browser Render Pipeline

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 进程。

Browser Render Pipeline

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

Browser Render Pipeline

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

2.3 Vulkan

Browser Render Pipeline

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

Browser Render Pipeline

对于 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

Browser Render Pipeline

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 绘制的更好支持,避免不必要的光栅化和合成;
作者:小扎zack
原文地址

识别以下二维码,干货



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/522505.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS Mach异常和signal信号

摘要: 本着探究下iOS Crash捕获的目的,学习了下Crash捕获相关的Mach异常和signal信号处理,记录下相关内容,并提供对应的测试示例代码。Mach为XNU的微内核,Mach异常为最底层的内核级异常,在iOS系统中&#x…

怎样清除手机中的html文件夹,怎么彻底清除手机APP卸载后的残留文件夹 能删与不能删文件名...

手机里的文件和手机下载了app之后,即使卸载,也很容易有垃圾残留,而且占用的空间还挺多,但是根本不知道哪些是垃圾,要怎么清除这些垃圾?  一般清理垃圾软件,如360,腾讯管家等可以清…

Kubernetes要成为一个企业友好平台,到底还缺啥?

戳蓝字“CSDN云计算”关注我们哦!Kubernetes的崛起令人惊叹。在短短几年时间内,它已经从一个由一群云原生开发者倡导的开源项目转变为由三家主要云服务提供商推广的标准运维平台。由于应用程序工作负载从VM转移到容器,Kubernetes已成为自动化…

局域网设置_局域网设置

把路由连好后,在2台机上分本地网络-(TCP/IP)里,别输入同一IP段就可以了例如:192.168.1.2255.255.255.0192.168.1.3255.255.255.0上面说的只是通过连接好路由后,不考虑上网状况,只是电脑对连可以打游戏和互传东西的方法以下是从设置路由到设置机器从而能上网和互连的过程:打开一…

10分钟上线 - API网关 + 函数计算实现图片处理服务

摘要: 阿里云函数计算服务(FunctionCompute,FC)是一个事件驱动的全托管计算服务。通过函数计算与云端各个服务的广泛集成,开发者只需要编写函数代码,就能够快速地开发出弹性高可用的后端系统。接下来我们利…

Spring Boot2 整合 MyBatis 多数据源

pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0…

如何利用阿里云打造感知零售平台

摘要&#xff1a; 一、背景介绍所谓感知零售是指的根据店铺顾客的情绪变化以及顾客在店铺内对商品货架停留位置来判断顾客对商品感兴趣程度&#xff0c;实时在线调整营销策略。帮助企业第一时间掌握顾客感受&#xff0c;第一时间下发营销策略&#xff0c;第一时间得到营销效果反…

Spark精华问答 | 怎么运行Spark?

戳蓝字“CSDN云计算”关注我们哦&#xff01;为什么要学习Spark&#xff1f;作为一个用来实现快速而通用的集群计算的平台。扩展广泛使用的MapReduce计算模型&#xff0c;而且高效地支持更多的计算模式&#xff0c;包括交互式查询和流处理。Spark的一个重要特点就是能够在内存中…

mac抹掉磁盘重装系统未能与服务器取得联系_【工具】mac笔记本rm -rf 后 如何恢复删除的文件...

本来是要cp -rf 到另一个地方的&#xff0c;然后用git管理起来的。当时不知道怎么了&#xff0c;可能是最近加班多了直接执行了rm -rf 。这种一般是可以恢复的就是要来回折腾&#xff0c;不过也没办法只有折腾了&#xff0c;写了几天的内容可不想再重写一边~这里做一下恢复的记…

基于AliOS Things玩转智能语音

摘要&#xff1a; 随着AI技术的进步&#xff0c;智能语音开始将人机交互从手眼睛的传统模式中解放出来。带给人们更便捷、更风趣、更有人情味的体验&#xff0c;让被操作对象变得不再只是一个死板的工具&#xff0c;而更像是一个有生命的助理。“帮我打开空调”&#xff0c;“明…

SpringBoot2.0整合Mybatis-Plus多数据源

文章目录一、pom依赖二、application.yml多数据源配置三、持久层3.1. UserMapper 接口3.2. 接口映射UserMapper.xml(可以不写)四、逻辑处理层4.1. IUserService 接口4.2. 接口实现类IUserServiceImpl五、通用返回对象封装六、测试UserController七、启动类加扫描mapper注解八、…

百度积极回应阿波龙项目不实报道;半数开发者认为学习新语言很困难;腾讯在长沙建立首个智慧产业总部……...

关注并标星星CSDN云计算极客头条&#xff1a;速递、最新、绝对有料。这里有企业新动、这里有业界要闻&#xff0c;打起十二分精神&#xff0c;紧跟fashion你可以的&#xff01;每周三次&#xff0c;打卡即read更快、更全了解泛云圈精彩newsgo go go 惠普在其官网上公布了即将发…

精打细算使用MaxCompute搭建数仓

摘要&#xff1a; MaxCompute是一套阿里自主研发的数据仓库解决方案。产品除了功能、性能、简单等优势外&#xff0c;还能在费用上节省下一大笔前。墨迹天气使用MaxCompute&#xff0c;除了性能和稳定性也有提升外&#xff0c;整体存储和计算的费用比之前节省70%。这是如何做到…

计算机知识产权 教学目标,计算机教学设计模板

计算机教学设计模板计算机是现今学生们学习的一个重点&#xff0c;那么关于计算机的教学设计又应该怎么进行呢?下面就随小编一起去阅读计算机教学设计模板&#xff0c;相信能带给大家启发。第一篇&#xff1a;计算机教学设计模板【学习目标】了解计算机网络的发展&#xff0c;…

linux 环境 安装nginx

文章目录一、Nginx简介&#xff1a;1.1 Nginx是什么&#xff1f;1.2 能干什么&#xff1f;1.3 有什么特点&#xff1f;二、Nginx安装依赖环境2.1 安装gcc2.2 安装pcre2.3 安装zlib2.4 安装openssl2.5 综合命令安装(一步到位)三、下载/解压/安装NGINX3.1 在线下载nginx3.2 解压n…

行!这下 CSDN 玩大了!粉丝:太良心

CSDN从建立之初&#xff0c;我们的初心就是为了帮助广大开发者解决技术问题&#xff0c;成为大家最喜爱的技术社区。今年是CSDN的20周年&#xff0c;我们也为大家准备了一份良心礼物&#xff0c;可谓吐血操作。我们与AI博士唐宇迪 / Oracle认证讲师等4位讲师&#xff0c;共同为…

markdown html vue,vue项目引入markdown

npm install showdown接下来是用法&#xff1a;export default {data () {return {content:,converter:null}},watch:{content:contentChanged},mounted(){ this.init(); },methods: {init(){var showdown require(showdown);var converter new showdown.Converter();this.co…

厉害了!阿里安全图灵实验室在ICDAR2017 MLT竞赛刷新世界最好成绩

摘要&#xff1a; 近日&#xff0c;阿里安全图灵实验室&#xff08;Alibaba Turing Lab&#xff09;的ATL Cangjie OCR算法在ICDAR2017的MLT&#xff08;Competition on Multi-lingual scene text detection&#xff09;自然场景多语言文本检测竞赛中刷新了世界最好成绩&#x…

Spring Boot 一个依赖搞定 session 共享,没有比这更简单的方案了!

有的人可能会觉得题目有点夸张&#xff0c;其实不夸张&#xff0c;题目没有使用任何修辞手法&#xff01;认真读完本文&#xff0c;你就知道gblfy说的是对的了&#xff01; 文章目录一、背景二、分析思路三、实战1. 创建工程2. pom.xml3. redis配置4. 使用5. 项目打包6. 启动项…

孩子学计算机最佳年龄,孩子学编程最佳年龄是几岁

孩子学编程最佳年龄是几岁2021-01-18 16:58:11文/董玉莹孩子学习编程的最好是几岁&#xff1f;本文整理了相关内容&#xff0c;欢迎阅读。孩子学习编程的最好是几岁6-18岁&#xff01;从国内外的典型案例来看6-18岁是孩子学习“编程”的最佳时机&#xff0c;这个阶段的孩子左右…