《WebKit 技术内幕》学习之七(4): 渲染基础

4 WebKit软件渲染技术

4.1 软件渲染过程

        在很多情况下,也就是没有那些需要硬件加速内容的时候(包括但不限于CSS3 3D变形、CSS3 03D变换、WebGL和视频),WebKit可以使用软件渲染技术来完成页面的绘制工作(除非读者强行打开硬件加速机制),目前用户浏览的很多门户网站、论坛网站、社交网站等所设计的网页,都是采用这项技术来完成页面的渲染。

        要分析软件渲染过程,需要关注两个方面,其一是RenderLayer树,其二是每个RenderLayer所包含的RenderObject子树。首先来看WebKit如何遍历RenderLayer树来绘制各个层。

        对于每个RenderObject对象,需要三个阶段绘制自己,第一阶段是绘制该层中所有块的背景和边框,第二阶段是绘制浮动内容,第三阶段是前景(Foreground),也就是内容部分、轮廓(它是CSS标准属性,绘制于元素周围的一条线,位于边框边缘的外围)等部分。当然,每个阶段还可能会有一些子阶段。值得指出的是,内嵌元素的背景、边框、前景等都是在第三阶段中被绘制的,这是不同之处。

        下图描述了一个RenderLayer层是如何绘制自己和子女的,这一过程是一个递归过程。图中的函数名未来可能会发生变化,所以读者更多关注它们的含义。图中的调用顺序可以作如下理解:这里主要节选了一些重要步骤,事实上这一绘制过程还可能包含其他一些相对较小的步骤。图中有些步骤的操作并不是总是发生。这里是一个大致的过程,下面是详细分析。

                                图 绘制RenderLayer和它的子女的调用过程

  1. 对于当前的RenderLayer对象而言,WebKit首先绘制反射层(Reflectionlayer),这是由CSS定义的。
  2. 然后WebKit开始绘制RenderLayer对象对应的RenderObject节点的背景层(PaintBackground-ForFragments),也就是调用“PaintPhaseBlockBackground”函数,读者记住这里仅是绘制该对象的背景层,而不包括RenderObject的子女。其中“Fragments”的含义是可能绘制的几个区域,因为网页需要更新的区域可能不是连续的,而是多个小块,所以WebKit绘制的时候需要更新这些非连续的区域即可,下面也是一样的道理。
  3. 图中的“paintList”(z坐标为负数的子女层)阶段负责绘制很多Z坐标为负数的子女层。这是一个递归过程。Z坐标为负数的层在当前RenderLayer对象层的后面,所以WebKit先绘制后面的层,然后当前RenderLayer对象层可能覆盖它们。
  4. 图中“PaintForegroundForFragments()”这个步骤比较复杂,包括以下四个子阶段:首先进入“PaintPhaseChildBlockBackground”阶段,WebKit绘制RenderLayer节点对应的RenderObject节点的所有后代节点的背景,如果某个被选中的话,WebKit改为绘制选中区域背景(网页内容选中的时候可能是另外的颜色);其次,进入“PaintPhaseFloat”绘制阶段,WebKit绘制浮动的元素;再次,进入“PaintPhaseForeground”阶段,WebKit绘制RenderObject节点的内容和后代节点的内容(如文字等);最后,进入“PaintPhaseChildOutlines”绘制阶段,WebKit的目的是绘制所有后代节点的轮廓。
  5. 进入“PaintOutlineForFragments”步骤。WebKit在该步骤中绘制RenderLayer对象对应的RenderObject节点的轮廓(PaintPhaseOutline)。
  6. 进入绘制RenderLayer对象的子女步骤。WebKit首先绘制溢出(Overflow)的RenderLayer节点,之后依次绘制Z坐标为正数的RenderLayer节点。
  7. 进入该RenderObject节点的滤镜步骤。这是CSS标准定义在元素之上的最后一步。

        上面是从RenderLayer节点和它所包含的RenderObject子树来解释软件绘图这一过程,那么对于RenderLayer树包含的每个RenderObject而言,它们是如何被处理的呢?

        因为RenderObject类有很多子类,每个子类都不一样,不过很多子类的绘制其实比较简单,所以,为了能比较清楚地说明RenderObject绘制的过程,这里以典型的RenderBlock类为例来说明,因为它是以框模型为基础的类,下图给出了绘制RenderBlock类的过程。

                        图RenderBlock类的绘制过程

        在上图中,“paint”是RenderObject基类的绘图函数,用来绘制该对象的入口函数,在RenderBlock类中,它被重新实现了。一个RenderObject类的“paint”函数在绘制时可能会被多次调用,因为不同的绘制阶段(前面的一张图提到的)都需要调用它来绘制不同的部分,所以读者会发现上图右侧标记了在哪些阶段才会调用该绘制函数(或者是哪些阶段该函数不会被调用),至于这些阶段的顺序则是由RenderLayer对象中的调用过程来控制的。

        图中的“paintContents”函数主要用来遍历和绘制它的子女,在某些情况下,WebKit其实并不需要该函数,例如RenderLayer对象仅需要绘制对应的RenderObject子树的根节点的时候。

        对于其他类型的节点,绘制过程大致是这一过程的一个子集。例如RenderText类没有子女,也不需要绘制框模型的边框等,所以WebKit仅需要绘制自己的内容。

        在上面这一过程中,Webkit所使用的绘图上下文都是2D的,因为没有GPU加速,所以3D的绘图上下文没有办法工作。这意味着,每一层上的RenderObject子树中不能包含使用3D绘图的节点,例如Canvas 3D(WebGL)节点等。同时,每个RenderLayer层上使用的CSS 3D变形等操作也没有办法得到支持。

        最开始的时候,也就是WebKit第一次绘制网页的时候,WebKit绘制的区域等同于可视区域大小。而这在之后,WebKit只是首先计算需要更新的区域,然后绘制同这些区域有交集的RenderObject节点。这也就是说,如果更新区域跟某个RenderLayer节点有交集,WebKit会继续查找RenderLayer树中包含的RenderObject子树中的特定一个或一些节点,而不是绘制整个RenderLayer对应的RenderObject子树。下图描述了在软件渲染过程中WebKit实际更新的区域,也就是之前描述软件渲染过程的生成结果。

                                       图WebKit绘制网页的更新区域

          WebKit软件渲染结果的储存方式,在不同的平台上可能不一样,但是基本上都是CPU内存的一块区域,多数情况下是一个位图(Bitmap)。至于这个位图如何处理,如何跟之前绘制的结果合并,如何显示出来,都跟WebKit的不同移植相关。下面介绍一下Chromium是如何处理的。

4.2 Chromium的多进程软件渲染技术

        在Chromium的设计和实现中,因为设计者引入了多进程模型,所以Chromium需要将渲染结果从Renderer进程传递到Browser进程。

        先来看看Renderer进程。前面介绍了WebKit的Chromium移植的接口类是RenderViewImpl,该类包含一个用于表示一个网页的渲染结果的WebViewImpl类。其实,RenderViewImpl类还有一个作用就是同Browser进程通信,所以它继承自RenderWidget类。RenderWidget类不仅负责调度页面渲染和页面更新到实际的WebViewImpl类等操作,而且它负责同Browser进程的通信。另一个重要的设施是PlatformCanvas类,也就是SkiaCanvas(Skia是一个2D图形库),RenderObject树的实际绘制操作和绘制结果都由该类来完成,它类似于2D绘图上下文和后端存储的结合体。

        再来看看Browser进程。第一个设施就是RenderWidgetHost类,一样的必不可少,它负责同Renderer进程的通信。RenderWidgetHost类的作用是传递Browser进程中网页操作的请求给Renderer进程的RenderWidget类,并接收来自对方的请求。第二个是BackingStore类,顾名思义,它就是一个后端的存储空间,它的大小通常就是网页可视区域的大小,该空间存储的数据就是页面的显示结果。BackingStore类的作用很明显,第一,它保存当前的可视结果,所以Renderer进程的绘制工作不会影响该网页结果的显示;第二,WebKit只需要绘制网页的变动部分,因为其余的部分保存在该后端存储空间,Chromium只需要将网页的变动更新到该后端存储中即可。

        最后来看看这两个进程是如何传递信息和绘制内容的。两个进程传递绘制结果是通过TransportDIB类来完成,该类在Linux系统下其实是一个共享内存的实现。对Renderer进程来说,Skia Canvas把内容绘制到位图中,该位图的后端即是共享的CPU内存。当Browser进程接收到Renderer进程关于绘制完成的通知消息,Browser进程会把共享内存的内容复制到BackingStore对象中,然后释放共享内存。

        Browser进程中的后端存储最后会被绘制在显示窗口中,用户就能够看到网页的结果。下图显示的是软件渲染的架构图,其思想主要来源于Chromium的官方网站,但这里做了一些扩充。

                        图Chromium的多进程软件渲染结构图

        根据上面的组成部分,一个多进程软件渲染过程大致是这样的:RenderWidget类接收到更新请求时,Chromium创建一个共享内存区域。然后Chromium创建Skia的SkCanvas对象,并且RenderWidget会把实际绘制的工作派发给RenderObject树。具体来讲,WebKit负责遍历RenderObject树,每个RenderObject节点根据需要来绘制自己和子女的内容并存储到目标存储空间,也就是SkCanvas对象所对应的共享内存的位图中。最后,RenderWidgetHost类把位图复制到BackingStore对象的相应区域中,并调用“Paint”函数来把结果绘制到窗口中。

        后面我们会介绍在哪些时候请求绘制网页内容,这里先了解两种会触发重新绘制网页中某些区域的请求,如下面所示。

  • 前端请求: 该类型的请求从Browser进程发起的请求,可能是浏览器自身的一些需求,也有可能是X窗口系统(或者其他窗口系统)的请求。一个典型的例子就是用户因操作网页引起的变化。
  • 后端请求: 由于页面自身的逻辑而发起更新部分区域的请求,例如HTML元素或者样式的改变、动画等。一个典型的例子是JavaScript代码每隔50ms便会更新网页样式,这时样式更新会触发部分区域的重绘。

        下面逼仄来解释一下当有绘制或者更新某个区域的请求时,Chromium和WebKit是如何来处理这些请求的。具体过程下图所示,下面是其中主要的步骤。

                                图Chromium的软件渲染过程

  1. Renderer进程的消息循环(Message Loop)调用处理“界面失效”的回调函数,该函数主要调用RenderWidget::DoDeferredUpdate来完成绘制请求。
  2. RenderWidget::DoDeferredUpdate函数首先调用Layout函数来触发检查是否有需要重新计算的布局和更新请求。
  3. RenderWidget类调用TransportDIB类来创建共享内存,内存大小为绘制区域的高×宽×4,同时调用Skia图形库来创建一个SkCanvas对象。SKCanvas对象的绘制目标是一个使用共享内存存储的位图。
  4. 当渲染该页面的全部或者部分时,ScrollView类请求按照从前到后的顺序遍历并绘制所有RenderLayer对象的内容到目标的位图中。Webkit绘制每个RenderLayer对象通过以下步骤来完成:首先Webkit计算重绘的区域是否和RenderLayer对象有重叠,如果有,Webkit要求绘制该层中的所有RenderObject对象。图7-14中省略了该部分的具体内容,详情请参考代码。
  5. 绘制完成后,Renderer进程发送UpdateRect的消息给Browser进程,Renderer进程同时返回以完成渲染的过程。Browser进程接收到消息后首先由BackingStoreManager类来获取或者创建BackingStoreX对象(在Linux平台上),BackingStoreX对象的大小与可视区域相同,包含整个网页的坐标信息,它根据UpdateRect的更新区域的位置信息将共享内存的内容绘制到自己的对应存储区域中。

        最后Browser进程将UpdateRect的回复消息发送到Renderer进程,这是因为Renderer进程知道Browser进程已经使用完该共享内存,可以进行回收利用等操作,这样就完成了整个过程。

        细心的读者其实可以发现,这一过程需要一些内存方面的拷贝,这是因为网页的渲染和网页的显示是在两个不同的进程,而这些拷贝在下一章介绍的硬件加速渲染机制中可以避免。当然,硬件加速渲染机制也引入一些其他方面的问题。

4.3 实践:软件渲染过程

        为了直接理解Chromium的多进程软件渲染过程,本节中笔者使用Chromium项目提供的“about:tracing”工具来分析,该工具可以收集Chromium内部函数调用的时间分布等信息。具体步骤如下。

  1. 使用Chrome浏览器打开标签页输入“chrome://flags”,找到选项“对所有网页执行GPU合成Mac, Windows, Linux”,选择“停用”,这样确保使用了软件渲染机制。
  2. 打开网页http://www.chromium.org/developers/design-documents,并打开一个新的标签页,输入“chrome://tracing”。
  3. 在标签页“chrome://tracing”中单击“record”按钮并切换到第二步打开的网页“Design Document”,重新加载该网页,之后再切换到“chrome://tracing”标签页中,单击“stop tracing”按钮,这样数据收集完毕,读者会发现有很多如下图中下面的图层所示的信息,它们表示的是浏览器的各个进程和线程的信息。

                          图浏览器“chrome://tracing”结果和任务管理器

  1. 单击浏览器地址栏最右侧的“设置”按钮,选择“工具->任务管理器”,读者会发现三个任务(如果读者的浏览器没有安装其他Chrome扩展或者启动插件等),这三个任务分别是网页“Design Documents”(Renderer进程1)、标签页“chrome://tracing”(Renderer进程2)和浏览器(Browser进程)。下图中显示的任务管理器,读者看到三个任务的进程ID同“chrome://tracing”中一一对应。下面首先分析进程2312。
  2. 在进程2312中,选择线程“CrRendererMain”,通过放大数据图,读者可以看到下图所示的信息,这是Chromium的多进程模型绘制网页使用的一些函数和它们消耗的时间,读者可以将这些函数同图7-14中的Renderer进程中的调用过程作对比。

                               图“Design Documents”网页对应的Renderer进程

  1. 在进程3660中,选择线程“CrBrowserMain”,在Renderer进程完成图7-16中的操作之后,通过放大数据图,读者可以看到如图7-17所示的信息,这是Chromium更新共享内存的数据并把数据绘制到BackingStore对象中,最后绘制到窗口。读者同样可以将这些函数同下图中的Browser进程的调用过程作对比。

                        图“Design Documents”网页对应的Renderer进程

        至此,WebKit的基础部分已介绍完毕。通过前面的分析和介绍,读者应该可以对网页的基本知识和基本的渲染过程有了一些了解。同时,结合Chromium的实现,读者应该理解浏览器是如何使用WebKit和扩展浏览器能力的。当然,WebKit的能力远不止这些,在高级篇中会介绍更多有关WebKit的高级技术。

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

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

相关文章

Kafka 生产者投递内存池源码刨铣

大体逻辑是这样的。。 初始化BufferPool的时候会指定BufferPool的大小 以及内存块(poolableSize)的大小。 在申请内存的时候如果申请的内存大小大于指定的内存块大小就会抛出异常,无法申请。 如果是等于poolableSize的话,就会判断free中是否有&#xff0…

图卷积网络(GCN)

本文主要分为两部分,第一部分介绍什么是GCN,第二部分将进行详细的数学推导。 一、什么是GCN 1、GCN 概述 本文讲的GCN 来源于论文:SEMI-SUPERVISED CLASSIFICATION WITH GRAPH CONVOLUTIONAL NETWORKS,这是在GCN领域最经典的论文…

TS 学习笔录 (一)

TS学习笔录 1、TS 数据类型有哪些?2、元组是什么?3、union(联合类型)& Literal(字面量类型)?4、any 和 unknown 的区别?5、Object 对象类型?6、type 、interface 、 class 之间…

1.23 力扣图论

841. 钥匙和房间 有 n 个房间,房间按从 0 到 n - 1 编号。最初,除 0 号房间外的其余所有房间都被锁住。你的目标是进入所有的房间。然而,你不能在没有获得钥匙的时候进入锁住的房间。 当你进入一个房间,你可能会在里面找到一套不…

无刷电机学习-方波电调 电路篇

想要彻底的理解无刷电机的驱动,那必然少不了学习他的驱动电路和程序。这里用开源的AM32无刷电调(方波驱动)来作为学习无刷电机笔记。 https://github.com/AlkaMotors附上作者github地址 AM32_Hardware: 基于AT32MCU的AM32PCB另一位大佬开源…

niushop靶场漏洞查找-文件上传漏洞等(超详细)

实战漏洞-niushop 一.端口扫描 http://www.xxx.com/index.php?s/admin/login 这里查询到后面的url有且仅有一个,目测估计是后台 访问url 发现确实是后台 二、找漏洞 Sql注入漏洞1: 点击进去 修改id www.xxx.com/index.php?s/goods/goodslist&…

网络要素服务(WFS)详解

文章目录 1. 概述2. GetCapabilities3. DescribeFeatureType4. GetFeature4.1 Get访问方式4.2 Post访问方式 5. Transaction5.1 Insert5.2 Replace5.3 Update5.4 Delete 6 注意事项 1. 概述 前置文章: 地图服务器GeoServer的安装与配置 GeoServer发布地图服务&#…

C语言爬虫采集图书网站百万数据

最近需要查阅一些资料,只给到相关项目名称以及关键词,想通过图书文库找到对应书籍,那么怎么才能在百万数据库中找到自己需要的文献呢? 今天我依然用C语言写个爬虫程序,从百万数据库中查找到适合的文章,能节…

【GitHub项目推荐--Go语言学习指南】【转载】

Go语言学习指南是一份涵盖大部分 Golang 程序员所需要掌握的核心知识,拥有 Go语言教程、Go开源书籍、Go语言入门教程、Go语言学习路线。零基础学习 Go语言、Go编程,首选 GoGuide。 地址:https://github.com/coderit666/GoGuide

剑指offer面试题8 旋转数组的最小数字

考察点 算法二分搜索知识点 二分搜索算法是针对排序的数组,先找到中间元素,如果待查找元素比中间元素大,说明待查 找元素肯定不在左边那片区域内,如果待查找元素比中间元素小,说明待查找元素肯定不在右 边那片区域内…

方法(java)

方法(method)是程序中最小的执行单元 实际开发中,重复的代码、具有独立功能的代码可以抽取到方法中 实际开发中,方法的好处: 1.可以提高代码的复用性 2.可以提高代码的可维护性 方法定义:把一些代码打…

【设计模式】美团三面:你连装饰器都举不出例子?

什么是装饰器模式? 装饰器模式,这个设计模式其实和它的名字一样,非常容易理解。 想象一下,每天出门的时候,我们都会思考今天穿什么。睡**衣、睡裤加拖鞋,还是西装、领带加皮鞋?又或者说是&…

【开发随想】如何快速入手一个Linux开源项目

🐚作者简介:花神庙码农(专注于Linux、WLAN、TCP/IP、Python等技术方向)🐳博客主页:花神庙码农 ,地址:https://blog.csdn.net/qxhgd🌐系列专栏:开发随想&#…

记录 js 过滤到tree上面的多余的数据

代码如下(示例): filterTree(arr, ids,firsttrue) {if(first){//首次传入深度克隆数据防止修改源数据arrJSON.parse(JSON.stringify(arr))}let emptyArr [];for (let item of arr) {if (ids.includes(item.id)) {if (item.children &&am…

【Foxmail】客户端发送邮件错误:SSL Recv :服务器断开连接, errorCode: 6

Foxmail客户端发送邮件提示:SSL Recv :服务器断开连接, errorCode: 6 错误代码 处理方式: 去邮箱生成新的16位授权码,输入到 密码框 内即可。 注:一旦开通授权码,在Foxmail验证时 密码框 里输入的就是 授权码

shell脚本概念构成及脚本变量详解

目录 一、前言 1、程序编程风格 2、编程语言 3、编程的三种处理逻辑 二、shell脚本 1、shell脚本基础 1.1 什么是shell 1.1.1 shell的概念 1.1.2 linux中常见的shell类型及信息 1.1.3 shell脚本的功能 1.2 shell脚本及构成 1.3 shell脚本执行方式 1.4 脚本错误调试…

spring和springboot的区别

在当今的软件开发领域,Spring和Spring Boot无疑是Java开发者最常用的框架之一。尽管它们都源于Spring项目,但它们在设计和使用上有很大的不同。本文将深入探讨Spring和Spring Boot之间的主要区别,以及为什么有时候选择其中一个而不是另一个是…

STL标准库(二)序列容器之array

容器 容器的本质是类模板,分为序列容器和关联容器 序列容器 array 固定数组 应用包含arrry库 vector 动态数组 应用包含 vector库 deque 双端队列 list 双向链表 forward_list 单向链表 stack 栈 queue 队列 prority 优先队列 array应用 int main() { …

现代密码学基础(2)

目录 一. 介绍 二. 举例:移位密码 (1)密文概率 (2)明文概率 三. 举例:多字母的移位密码 四. 完美安全 五. 举例:双子母的移位密码 六. 从密文角度看完美安全 七. 完美保密性质 一. 介绍…

NVIDIA 再现逆天刀法,千元级 RTX 新卡曝光

这年头,价格 1 字开头入门甜品显卡几乎真就成 N、A 两家弃子了。 以 NVIDIA RTX 4060 与 AMD RX 7600 为例,这两块显卡同为两家新品中最低端型号,其价格直接来到 2K 左右起步。 要知道目前很多普通用户选购一台日常办公、游戏电脑主机&#…