转载请注明原文地址:http://blog.csdn.net/milado_nju/article/details/7292131

# WebKit渲染基础

## 概述

WebKit是一个渲染引擎,而不是一个浏览器,它专注于网页内容展示,其中渲染是其中核心的部分之一。本章着重于对渲染部分的基础进行一定程度的了解和认识,主要理解基于DOM树来介绍Render树和RenderLayer树的构建由来和方式。

那么什么是DOM?简单来说,DOM是对HTML或者XML等文档的一种结构化表示方法,通过这种方式,用户可以通过提供标准的接口来访问HTML页面中的任何元素的相关属性,并可对DOM进行相应的添加、删除和更新操作等。相关信息可查阅W3C的文档,这里不再赘述。

基于DOM树的一些可视(visual)的节点,WebKit来根据需要来创建相应的RenderObject节点,这些节点也构成了一颗树,称之为Render树。基于Render树,WebKit也会根据需要来为它们中的某些节点创建新的RenderLayer节点,从而形成一棵RenderLayer树。

Render树和RenderLayer树是WebKit支持渲染所提供的基础但是却非常重要的设施。这是因为WebKit的布局计算依赖它们,浏览器的渲染和GPU硬件加速也都依赖于它们。幸运地是,得益于它们接口定义的灵活性,不同的浏览器可以很方便地来实现自己的渲染和加速机制。

为了直观了解这三种树,下图给出了这三种树及其它们之间的对应关系,后面会详细介绍里面的细节。

## Render树

###Render树的建立

Render树是基于DOM树建立起来的一颗新的树, 是布局和渲染等机制的基础设施。 Render树节点和DOM树节点不是一一对应关系,那么哪些情况下需要建立新的Render节点呢?

a)      DOM树的document节点;

b)      DOM树中的可视化节点,例如HTML,BODY,DIV等,非可视化节点不会建立Render树节点,例如HEAD,META,SCRIPT等;

c)      某些情况下需要建立匿名的Render节点,该节点不对应于DOM树中的任何节点;

RenderObject对象在DOM树创建的同时也会被创建,当然,如果DOM中有动态加入元素时,也可能会相应地创建RenderObject对象。下图示例的是RenderObject对象被创建的函数调用过程。

Render树建立之后,布局运算会计算出相关的属性,这其中有位置,大小,是否浮动等。有了这些信息之后,渲染引擎才只知道在何处以及如何画这些元素。

###RenderObject类及其子类

RenderObject是Render树的节点基础类,提供了一组公共的接口。它有很多的子类,这些子类可能对应一些DOM树中的节点,例如RenderText,有些则是容器类,例如RenderBlock。下图给出了一些常用的类的继承关系图,这其中RenderBlock是一个非常重要的类。

### 匿名RenderBlock对象

CSS中有块级元素和内嵌(inline)元素之分。内嵌元素表现的是行布局形式,就是说这些元素以行进行显示。以’div’元素为例,如果设置属性’style’为’display:inline’时,则那是内嵌元素,那么它可能与前面的元素在同一行;如果该元素没有设置这个属性时,则是块级元素,那么在新的行里显示。

RenderBlock用来是用来表示块级元素, 为了处理上的方便,某些情况下需要建立匿名的RenderBlock对象,因为RenderBlock的子女必须都是内嵌的元素或者都是非内嵌的元素。所以,当它包含两种元素的时候,那么它会为相邻的内嵌元素创建一个块级RenderBlock节点,然后设置该节点为自己的子女并且设置这些内嵌元素为它的子女。

##RenderLayer树

RenderLayer树是基于Render树建立起来的一颗新的树。同样,RenderLayer节点和Render节点不是一一对应关系,而是一对多的关系。那么哪些情况下的RenderObject节点需要建立新的RenderLayer节点呢?

a)      DOM树的document节点对应的RenderView节点

b)      DOM树中的document 的子女节点,也就是HTML节点对应的RenderBlock节点

c)      显式的CSS位置

d)      有透明效果的对象

e)      节点有溢出(overflow),alpha或者反射等效果的

f)       Canvas 2D和3D (WebGL)

g)      Video节点对应的RenderObject对象

一个RenderLayer被建立之后,其所在的RenderObject对象的所有后代均包含在该RenderLayer,除非这些后代需要建立自己的RenderLayer。而后代的RenderLayer的父亲就是自己最近的祖先所在的不同的RenderLayer,这样,它们也构成了一颗RenderLayer树。

每个RenderLayer对应的Render节点内容均会绘制在该RenderLayer所对应的层次上(或者内部存储结构上)。不同的RenderLayer可以共享同一个内部存储结构,也可以有各自的后端存储,这取决于不同的移植。在软件渲染下,通常各个RenderLayer的内容都绘制在同一块后端存储上。在GPU硬件加速的下,某些RenderLayer可能有自己独立的后端存储,而后通过合成器来把这些不同的后端合成在一起,最终形成网页的可视化内容。

RenderLayer在创建RenderObject对象的时候,如果需要,也会同时被创建,当然也有可能在执行JavaScript代码时,更新页面的样式从而需要新创建一个RenderLayer。

## 一个例子

以上说了那么多,一堆堆的类,一个个的建立规则,听起来太抽象,不太容易理解,那么一个具体的Render树和RenderLayer树到底是怎么样的呢?为了可视化理解Render树和RenderLayer树,下面给出一个具体的例子来加以解释和说明。

首先,让我们来看一个简单的HTML网页,源代码如下所示。

上面的代码结构很简单,就是一些HTML的基本元素组成的,例如HTML,HEAD,DIV,A,  IMG, TABLE等等, 然后包含一个特别的HTML5元素CANVAS,而且还有一小段JavaScript代码。照顾到一些没有相关背景的读者,简单解释一下这段代码的含义。这段代码是对CANVAS元素创建一个WebGL的Context,有了这个context,就可以在canvas元素上绘制3D的内容。这个类似于OpenGL或者OpenGLES的context,具体canvas和WebGL会有另外专门的章节来介绍。

这段HTML源代码被WebKit解析后会生成一颗DOM树。这段代码的DOM树主要结构如本章第一幅图中的‘DOM树’部分所示。当DOM树生成时,WebKit同时建立了一颗Render树,如上所说,代码的Render树被打印成如下图所示的文本信息。

首先,上图中的“layer at (x, x)”表示不同的RenderLayer节点,下面的所有RenderObject均属于该RenderLayer。以第一个layer为例,它对应于DOM中的Document节点。后面的(0, 0)表示该节点在坐标系中的位置,最后的1028x683表示该节点的大小。它包含的RenderView节点后面的信息也是同样的意思。

其次,看其中最大的部分-第二个layer,包含了HTML中的绝大部分元素。这里有三点需要解释一下:第一,Head元素没有相应的RenderObject,如上面所解释的,因为它不是一个可视的元素。第二,Canvas元素不在其中,而是在第三个layer中(RenderHTMLCanvas)。但是它仍然是RenderBody节点的子女。第三,匿名的RenderBlock节点,它包含了RenderText, RenderInline等节点,原因如前所说。

再次,来看一下第三个layer。因为从Canvas创建了一个WebGL3D Context对象,这里需要重新生成一个新的layer。

最后,来说明一下三个layer的创建时间。第一和第二个layer在创建DOM树后,会触发创建;第三个layer测试资源加载解析好之后,执行后面的JavaScript代码后所创建。

基于上面的描述,相信大家已经对Render树和RenderLayer树有了一定的了解。现在让我们回忆一下本章的第一幅图。该图其实是给出了示例的HTML网页在WebKit中三种树的对应关系(仅选取其中重要的部分),相信现在你已经了解它们的含义了。

## 源代码目录

WebKit/Source/WebCore/rendering

WebKit为支持渲染所涉及的各个类

WebKit/Source/WebCore/dom/

DOM树的相关文件,包括一些基础类及其接口定义

WebKit/Source/WebCore/html/

为HTML网页的元素所定义的相关的基础类,它们基于DOM的Node类

## 参考文献

1.      Google design documents:

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

By yongsheng@chromium.org

转载于:https://www.cnblogs.com/xiaowangba/archive/2012/02/24/6313876.html

理解WebKit和Chromium: WebKit渲染基础相关推荐

  1. 理解WebKit和Chromium: WebKit的CSS实现

    转载请注明原文地址:http://blog.csdn.net/milado_nju/article/details/7685517 # CSS在WebKit和Chromium中的实现 ## 概述 前面 ...

  2. 理解WebKit和Chromium: WebKit, WebKit2, Chromium和Chrome介绍

    转载请注明原文地址:http://blog.csdn.net/milado_nju/article/details/7292164 ##概述 在介绍本系列各个专题之前,有必要先解释一下极其容易混淆的几 ...

  3. 理解WebKit和Chromium: WebKit和Blink

    转载请注明出处:http://blog.csdn.net/milado_nju/ 关注Web和HTML5领域的人最近应该都有了解WebKit项目的重磅消息,那就是Google退出WebKit项目,创建 ...

  4. 理解WebKit和Chromium: WebKit和Chromium组成

    转载请注明原文地址:http://blog.csdn.net/milado_nju/article/details/7300074 在"WebKit,WebKit2,Chromium和Chr ...

  5. 理解WebKit和Chromium: 前言

    注:朱永盛老师的<理解WebKit和Chromium>系列非常经典,在这里转发一下目录. 转载请注明原文地址:http://blog.csdn.net/milado_nju 这几年来,我阅 ...

  6. 【读书笔记】【WebKit 技术内 幕(一)】浏览器架构与浏览器内核;chromium、webkit和blink的渲染过程;chromium、webkit的架构与代码结构;webkit2架构

    文章目录 前言 Something great 第1章 浏览器和浏览器内核 浏览器 用户代理和浏览器行为 内核特征 WebKit与blink 第2章 HTML网页和结构 网页构成与结构 WebKit的 ...

  7. 【读书笔记】【WebKit技术内 幕(二)】Chromium Webkit资源加载与网络栈、DOM树、HTML解释器、影子DOM、CSS解释器和样式布局、网页层次与渲染、绘图上下文、

    文章目录 前言 Something great 第4章 资源加载和网络栈 Webkit 资源加载 Chromium多进程资源加载 Chromium 网络栈 第5章 HTML解释器和DOM模型 DOM模 ...

  8. 理解WebKit和Chromium: Canvas2D及其实现

    转载请注明原文地址:http://blog.csdn.net/milado_nju/article/details/7293012 # Canvas 2D及其在WebKit和Chromium中的实现 ...

  9. 理解WebKit和Chromium: Content API和CEF3

    转载请注明原文地址:http://blog.csdn.net/milado_nju/article/details/7455373 # Content API及CEF3 ## 概述 相信你一定看过下面 ...

最新文章

  1. 怎样解决VMware虚拟机无法连接外网问题
  2. 元素水平垂直居中的方法
  3. Windows 服务全攻略(1)
  4. python类与对象示意图_2020Python作业——类与对象,
  5. Colly实现豆瓣电影Top250爬取
  6. python简单爬虫代码-python简单爬虫(二)
  7. 异星工场服务器直连,Factorio 异星工厂 搭建服务器
  8. 合肥工业大学计算机和信息学院,合肥工业大学计算机与信息学院
  9. 离散数学——集合运算
  10. 微信收不到客服消息require subscribe hint
  11. 在互联网时代,读书人如何更好的养活自己
  12. Android Netty的使用-入门指南
  13. 你写论文时发现了哪些非常神的网站?
  14. 用字符数组作函数参数编程实现如下功能:在字符串中删除与某字符相同的字符。
  15. 小米方法论总结:雷军首部商业思考著作《小米创业思考》面世
  16. 核磁共振成像读片指南(二)
  17. 支付宝小程序获取复选框选中值id,使其显示且可编辑
  18. 一些我平常用到的软件
  19. 设备更新,工作室搬迁
  20. python 二级 —— turtle

热门文章

  1. 安徽省计算机vfp,安徽省计算机二级VFP理论考试模拟题
  2. DingTalk「开发者说」第7期 钉钉前端开放及其业务思考
  3. 如何批量将simulink文件保存为前期版本
  4. 文件服务器拷贝资料需要解锁,如何加密U盘文件防止复制,怎样实现U盘文件防拷贝?...
  5. UVA11419 SAM I AM —— 最小点覆盖 + 输出覆盖点集
  6. freecad安装记录
  7. 微软不再为 DNS over HTTPS (DoH) 提供 Google PublicDNS 和 Cloudflare DNS 服务提供商
  8. 华为5G商用全球首例 深圳地铁车地超宽带通讯
  9. 计算机音乐致爱丽丝,致爱丽丝 MIDI File Download :: MidiShow
  10. 西门子s7 200smart与3台欧姆龙E5cc温控器通讯控