背景

去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。

没有计划的阅读，收效甚微。

新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。

这个“玩法”虽然常见且板正，但是有效，已经坚持阅读五个月。

已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（中卷）》、《你不知道的JavaScript（下卷）》、《数据结构与算法JavaScript描述》。

当前阅读周书籍：《WebKit技术内幕》。

渲染基础

RenderObject树

RenderObject基础类

一个RenderObject对象保存了为绘制DOM节点所需要的各种信息，例如样式布局信息，经过WebKit的处理之后，RenderObject对象知道如何绘制自己。这些RenderObject对象同DOM的节点对象类似，它们也构成一棵树，在这里我们称之为RenderObject树。RenderObject树是基于DOM树建立起来的一棵新树，是为了布局计算和渲染等机制而构建的一种新的内部表示。RenderObject树节点和DOM树节点不是一一对应关系，那么哪些情况下为一个DOM节点建立新的RenderObject对象呢？以下是三条规则，从这些规则出发会为DOM树节点创建一个RenderObject对象。

• DOM树的document节点。
• DOM树中的可视节点，例如html、body、div等。而WebKit不会为非可视化节点创建RenderObject节点，例如上面提到的一些例子。
• 某些情况下WebKit需要建立匿名的RenderObject节点，该节点不对应于DOM树中的任何节点，而是WebKit处理上的需要，典型的例子就是匿名的RenderBlock节点。

RenderObject树

RenderObject对象构成了一棵树。RenderObject树的创建过程主要是由NodeRenderingContext类来负责。

基本思路是，首先WebKit检查该DOM节点是否需要创建RenderObject对象。如果需要，WebKit建立或者获取一个创建RenderObject对象的NodeRenderingContext对象，NodeRenderingContext对象会分析需要创建的RenderObject对象的父亲节点、兄弟节点等，设置这些信息后完成插入树的动作。

网页层次和RenderLayer树

WebKit会为网页的层次创建相应的RenderLayer对象。当某些类型RenderObject的节点或者具有某些CSS样式的RenderObject节点出现的时候，WebKit就会为这些节点创建RenderLayer对象。一般来说，某个RenderObject节点的后代都属于该节点，除非WebKit根据规则为某个后代RenderObject节点创建了一个新的RenderLayer对象。

RenderLayer树是基于RenderObject树建立起来的一棵新树。根据上面所述笔者可以得出这样的结论：RenderLayer节点和RenderObject节点不是一一对应关系，而是一对多的关系。那么哪些情况下的RenderObject节点需要建立新的RenderLayer节点呢？以下是基本规则。

• DOM树的Document节点对应的RenderView节点。
• DOM树中的Document的子女节点，也就是HTML节点对应的RenderBlock节点。
• 显式的指定CSS位置的RenderObject节点。· 有透明效果的RenderObject节点。
• 节点有溢出(Overflow)、alpha或者反射等效果的RenderObject节点。
• 使用Canvas 2D和3D(WebGL)技术的RenderObject节点。
• Video节点对应的RenderObject节点。

除了根节点也就是RenderLayer节点，一个RenderLayer节点的父亲就是该RenderLayer节点对应的RenderObject节点的祖先链中最近的祖先，并且祖先所在的RenderLayer节点同该节点的RenderLayer节点不同。基于这一原理，这些RenderLayer节点也构成了一棵RenderLayer树。

渲染方式

绘图上下文(GraphicsContext)

绘图上下文可以分成两种类型，第一种是用来绘制2D图形的上下文，称之为2D绘图上下文(GraphicsContext)；第二种是绘制3D图形的上下文，称之为3D绘图上下文(GraphicsContext3D)。这两种上下文都是抽象基类，也就是说它们只提供接口，因为WebKit需要支持不同的移植。而这两个抽象基类的具体绘制则由不同的移植提供不同的实现，每个移植使用的实际绘图类非常不一样，依赖的图形率也不一样。

PlatfromGraphicsContext类和PlatformGraphicsContext3D类是两个表示上下文的类，其实它们的类定义取决于各个移植。在WebKit的Safari移植中，这两个类其实是CGContext和CGLContextObj；而在Chromium移植中，它们则是PlatformContextSkia和GrContext。同之前描述的基类和子类的关系不一样，这些不是父子类关系，而是WebKit直接通过C语言的typedef来将每个不同移植的类重命名成PlatfromGraphicsContext和PlatformGraphicsContext3D。

渲染方式

在完成构建DOM树之后，WebKit所要做的事情就是构建渲染的内部表示并使用图形库将这些模型绘制出来。提到网页的渲染方式，目前主要有两种方式，第一种是软件渲染，第二种是硬件加速渲染。其实这种描述并不精确，因为还有一种混合模式。

每个RenderLayer对象可以被想象成图像中的一个层，各个层一同构成了一个图像。在渲染的过程中，浏览器也可以作同样的理解。每个层对应网页中的一个或者一些可视元素，这些元素都绘制内容到该层上，在本书中，一律把这一过程称为绘图操作。如果绘图操作使用CPU来完成，那么称之为软件绘图。如果绘图操作由GPU来完成，称之为GPU硬件加速绘图。理想情况下，每个层都有个绘制的存储区域，这个存储区域用来保存绘图的结果。最后，需要将这些层的内容合并到同一个图像之中，本书中称之为合成(Compositing)，使用了合成技术的渲染称之为合成化渲染。

WebKit软件渲染技术

软件渲染过程

WebKit可以使用软件渲染技术来完成页面的绘制工作（除非读者强行打开硬件加速机制），目前用户浏览的很多门户网站、论坛网站、社交网站等所设计的网页，都是采用这项技术来完成页面的渲染。

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对象中，然后释放共享内存。

总结

实际上，WebKit的布局计算使用RenderObject树并保存计算结果到RenderObject树中。RenderObject树同其他树（如RenderLayer树等），构成了WebKit渲染的主要基础设施。

本篇介绍实现WebKit为网页渲染而构造的各种类型的内部结构表示，并介绍基本的网页软件渲染方式，这些内部结构和渲染方式设施对WebKit而言既是必要的组成，又能对性能问题产生重要的影响。

作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。