webkit渲染原理

webkit渲染过程

1. 解析HTML生成DOM树

HTML解析器：WebKit首先使用HTML解析器（HTMLParser）来解析接收到的HTML文本。解析器根据HTML规范，将文本转换成DOM节点，形成DOM树。这个过程中，错误的HTML会被尝试修正，以形成一个合理的树结构。

将输入的HTML文本转换为DOM树。这个过程大致可以分为以下几个步骤：

1.1 Tokenization（词法分析）

• 源码位置：/Source/WebCore/html/parser/HTMLTokenizer.cpp
• 过程概述：解析器首先读取HTML文本并将其分解成一系列的tokens。这些tokens包括开始标签、结束标签、注释、字符数据等。每个token代表HTML文档的一个基本构建块。

词法分析（Tokenization）是HTML解析过程的第一步，其目的是将输入的HTML字符串分解成一系列的有意义的单元，这些单元称为tokens。这一过程由词法分析器（Tokenizer）执行，是HTML解析的基础。以下是词法分析过程的更深入介绍：

Token的类型
在HTML中，主要的token类型包括：

• 开始标签Token：表示元素的开始，可能包括元素名称和属性。
• 结束标签Token：表示元素的结束。
• 自闭合标签Token：同时表示元素的开始和结束，如<img src="image.png" />。
• 字符Token：表示文本内容。
• 注释Token：表示注释内容。
• DOCTYPE Token：表示文档类型声明。

Tokenization过程

1. 输入流处理：HTML文档首先被视为一个字符流。词法分析器逐字符读取这个流，并根据当前的解析上下文决定如何处理每个字符。
2. 状态机：HTML词法分析器的核心是一个复杂的状态机。根据当前状态和输入字符，状态机会决定下一步动作：切换到新的状态、发射（emit）一个token、消耗（consume）字符等。这些状态包括“Data”状态、“Tag Open”状态、“TagName”状态等，覆盖了所有可能的HTML结构。
3. 特殊字符处理：HTML中的某些字符，如<和&，可能表示标签的开始或实体引用的开始。词法分析器需要特别处理这些字符，正确地解析它们或将它们作为文本内容的一部分。
4. 属性解析：在解析开始标签时，词法分析器还需要处理元素的属性。这涉及到解析属性名称、等号和属性值，包括处理引号包裹的属性值和无引号的属性值。
5. 错误处理：HTML词法分析器设计有容错机制，能够处理不规范的HTML。例如，遇到无效的字符或不正确的标签嵌套时，词法分析器会尝试以一种合理的方式继续解析，以保证总能生成一个DOM树。

示例
考虑以下简单的HTML片段：

<p>Hello, <em>world</em>!</p>

词法分析过程大致如下：

1. 读取<p>，进入“Tag Open”状态，然后进入“TagName”状态，发射一个开始标签Token（<p>）。
2. 读取Hello, ，发射一个字符Token。
3. 读取，重复类似于步骤1的过程，发射一个开始标签Token（）。
4. 读取world，发射一个字符Token。
5. 读取，识别为结束标签Token，发射结束标签Token（）。
6. 读取!，发射一个字符Token。
7. 读取</p>，识别为结束标签Token，发射结束标签Token（</p>）。

每个发射的Token都会被传递给后续的树构建过程（Tree Construction），用于构建DOM树。

1.2 Tree Construction（树构建）

• 源码位置：/Source/WebCore/html/parser/HTMLTreeBuilder.cpp
• 过程概述：一旦词法分析器生成了tokens，树构建器（TreeBuilder）就会使用这些tokens来构建DOM树。树构建器负责管理标签的嵌套关系、处理错误和实现文档的自动修正。树构建过程遵循HTML5规范中定义的算法，确保即使是不规范的HTML也能被适当地解析和修正。

在WebKit的HTML解析过程中，Tree Construction（树构建）是紧随Tokenization（词法分析）之后的关键步骤。此阶段利用从词法分析步骤获得的tokens来构建DOM树，这个过程涉及到将标记化的HTML元素、文本等转换成对应的DOM节点，并正确地组织这些节点的父子关系。Tree Construction的具体实现遵循HTML规范中定义的解析算法，以确保即使是不规范的HTML文档也能被适当地解析和修正。下面是Tree Construction过程的详细介绍：

DOM树的构建过程

1. 初始化: 解析开始时，创建一个Document对象作为DOM树的根。解析器维护一个节点栈（stack of open elements），最初只包含这个根Document节点。

2. 处理Tokens: 对于Tokenization阶段生成的每个token，树构建器根据token的类型和当前解析上下文来决定如何处理这个token。主要处理的token类型包括：

   • Start Tag Tokens：对于每个开始标签token，树构建器会创建一个对应的Element节点，并将其添加到当前节点（节点栈顶部的元素）的子节点列表中。然后，这个新创建的Element节点被推入节点栈中，成为新的当前节点。
   • End Tag Tokens：当遇到结束标签token时，树构建器会检查节点栈以找到匹配的开始标签。找到匹配后，从节点栈中弹出节点，直到弹出匹配的开始标签为止。这表示当前元素及其所有子元素已经完全解析。
   • Text Tokens：文本token被用来创建Text节点，这些节点被添加到当前节点（节点栈顶部的元素）的子节点列表中。
   • Comment Tokens和Doctype Tokens同样会被转换成相应的DOM节点。
3. 特殊元素的处理: 某些HTML元素（如<script>、<style>、<table>等）需要特殊的处理规则，因为它们对内容的解析方式有特殊要求或者对子元素有特定的约束。例如，当解析到<script>标签时，树构建过程可能会暂停，直到脚本执行完毕。
4. 错误处理: HTML的Tree Construction过程是"错误容忍"的。这意味着当遇到无效标记或结构错误时，解析器会尝试以一种合理的方式修正这些错误，而不是停止解析。这包括自动关闭某些元素的标签、重新组织元素的结构等。
5. 构建完成: 当解析器遍历完所有的tokens后，树构建过程完成。此时，节点栈应该只包含一个节点，即最初的Document对象。Document对象现在作为DOM树的根，包含了完整的HTML文档结构。

源码实现参考
WebKit的Tree Construction实现主要位于HTMLTreeBuilder.cpp文件中，它是根据HTML规范的算法实现的。这个类包含了逻辑来处理各种类型的tokens，并根据这些tokens来构建和修改当前的DOM树结构。
通过这种方式，WebKit确保即使是复杂和不规范的HTML文档也能被适当地解析成结构良好的DOM树，为后续的布局和渲染过程打下基础。

1.3 DOM生成

• 源码位置：依赖具体的DOM接口实现，如/Source/WebCore/dom/目录下的文件。
• 过程概述：树构建器根据tokens创建相应的DOM节点。例如，一个开始标签的token会导致创建一个Element节点，而字符数据的token会生成Text节点。这些节点按照它们在HTML文档中出现的结构关系被插入到DOM树中。

在WebKit中，DOM（文档对象模型）的生成是HTML解析过程的一个重要组成部分。这一过程主要发生在HTML文档的词法分析（Tokenization）和树构建（Tree Construction）之后，具体涉及将解析过程中生成的各种tokens转换为DOM树中的节点。这里我们深入探讨如何从WebKit的代码层面理解DOM的生成过程。

DOM树的节点
首先，理解DOM树是由各种类型的节点组成很重要，这包括但不限于：

• Element节点：对应HTML文档中的各种元素，如<div>、<p>等。
• Text节点：包含元素内部的文本内容。
• Comment节点：包含HTML文档中的注释。
• Document节点：代表整个HTML文档，是DOM树的根节点。

DOM生成过程

1. 创建Document节点：当WebKit开始解析一个HTML文档时，它首先创建一个Document节点，作为DOM树的根。这一步通常发生在文档的预解析阶段。
2. 处理Tokens：在词法分析阶段，解析器读取HTML文档的内容，将其分解为一系列的tokens，包括开始标签、结束标签、文本内容等。这些tokens随后被用于树构建阶段。

3. 树构建与节点创建：在树构建阶段，解析器根据tokens来构建DOM树。对于每个开始标签token，解析器创建一个对应的Element节点。对于文本token，创建一个Text节点。这些节点根据HTML文档的结构被适当地添加为其他节点的子节点。

   • 源码参考：在WebKit源码中，树构建的逻辑主要集中在HTMLParser和HTMLDocumentParser类中，而具体的节点创建则涉及到多个与DOM相关的类，如Element、TextNode等。
4. 设置属性：对于Element节点，解析器还会处理元素的属性。每个属性都被创建为节点的一个属性（Attribute），并且设置相应的值。
5. 特殊节点的处理：对于特殊的HTML元素，如<script>和<style>，解析器可能会执行额外的处理，比如暂停DOM构建来执行脚本，或解析CSS规则。
6. 完成DOM树构建：一旦HTML文档的所有内容都被解析并且相应的DOM节点被创建，DOM树构建完成。此时，Web页面的结构已经反映在DOM树中，可以通过JavaScript等脚本语言进行访问和操作。

在WebKit的代码库中，DOM生成主要涉及以下几个组件：

• Document对象：代表整个HTML文档，并作为DOM树的根节点。在WebKit的源代码中，Document类继承自Node类，位于/Source/WebCore/dom/Document.cpp。
• 节点类：对于不同类型的HTML元素，WebKit定义了一系列的节点类，如HTMLElement、HTMLImageElement等，这些类继承自Element类，而Element类又继承自Node类。这些节点类的实现分散在/Source/WebCore/html/目录下。

• 解析器：WebKit的HTML解析器负责读取和解析HTML文档，位于/Source/WebCore/html/parser/目录。解析器在解析HTML文档时会创建和配置节点对象，然后将它们添加到DOM树中。

  1.4 错误处理

过程概述：HTML解析器采用“错误容忍”的策略来处理不规范的HTML。当遇到无法正常解析的结构时，解析器会尝试修正错误，如关闭遗漏的标签或重新组织节点的结构，以形成一个合法的DOM树。

错误处理的原则
WebKit在解析HTML时遵循以下几个基本原则：

• 容错性：当遇到不符合规范的标记时，尽量采取措施解析和渲染内容，而不是简单地报错或停止解析。
• 用户优先：在处理错误时，优先考虑最终用户的浏览体验。这意味着尽量展示所有可展示的内容，即使HTML源码中存在错误。
• 规范一致性：尽管WebKit对错误采取宽容的态度，但它的错误处理机制仍旨在尽可能符合HTML规范，特别是HTML5的解析规则。

错误处理的类型和策略
在HTML解析过程中，常见的错误类型和WebKit的处理策略包括：

• 缺失标签：如果遇到缺失的结束标签，WebKit会尝试自动插入这个标签以闭合元素。例如，如果<p>标签后直接跟随了另一个<p>标签，WebKit会在它们之间自动插入一个</p>标签。
• 错误嵌套：HTML规范定义了哪些元素可以嵌套哪些其他元素。如果发现不允许的嵌套（例如，<p>直接包含<div>），WebKit会调整DOM树的结构，使其符合规范。
• 未知标签：对于HTML规范中未定义的标签，WebKit会将它们解析为通用的HTMLElement对象，并保留它们的内容。
• 属性错误：如果元素的属性格式不正确（如属性值缺失引号），WebKit会尽量猜测开发者的意图，并正确解析该属性。

实现细节
WebKit的错误处理逻辑主要集中在HTML解析器中。HTML解析器负责将原始HTML文本转换成DOM树，它包含了一系列复杂的状态和规则，用于处理各种正常和异常情况。错误处理代码遍布于解析器的各个部分，特别是在以下文件中：

• HTMLParser.cpp：包含HTML解析器的主体逻辑。
• HTMLTreeBuilder.cpp：负责根据解析器产生的tokens构建DOM树，包含了大量错误处理逻辑。

示例
考虑以下HTML代码：

<p>This is a paragraph
<div>This is a div</div>

根据HTML规范，<p>标签不能直接包含<div>元素。遇到这种情况时，WebKit的解析器会自动关闭<p>标签，然后再处理<div>标签，从而保证生成的DOM树符合规范。

1.5 脚本执行

过程概述：在解析HTML文档的过程中，当遇到<script>标签时，解析器可能会暂停DOM树的构建，以便执行脚本。这可能会影响到后续DOM树的构建，因为脚本可以修改当前文档的结构。
在WebKit中，脚本执行是HTML解析过程中的一个重要环节，特别是在构建DOM树的同时。JavaScript代码可以修改DOM，注册事件监听器，以及影响网页的加载过程。理解脚本执行如何与DOM构建过程交互，需要掌握几个关键概念和步骤。

脚本执行的基本流程

1. 遇到脚本标签：当HTML解析器遇到<script>标签时，它会根据src属性判断是执行内联脚本还是下载外部脚本。

   • 外部脚本：如果<script>标签有src属性，浏览器会请求指定的URL下载脚本。下载过程可能会阻塞文档的解析，除非脚本被标记为async或defer。
   • 内联脚本：如果是内联脚本，则直接准备执行脚本内容。
2. 执行脚本：默认情况下，当脚本下载完成（对于外部脚本）或者当解析器遇到内联脚本时，脚本会立即执行。脚本执行可能会修改当前的DOM结构，比如添加、删除或修改元素。

3. 阻塞与异步行为：

   • 阻塞行为：默认情况下，脚本的执行是同步且阻塞的，意味着HTML解析器会暂停解析，直到脚本执行完毕。这是因为脚本可能会操作DOM，影响后续内容的解析。
   • async和defer属性：脚本标签的async和defer属性允许开发者控制脚本的加载和执行方式，以避免阻塞。async脚本会并行下载，下载完成后立即执行；defer脚本会按照出现的顺序在文档解析完成后执行。

脚本执行与DOM构建的交互

• 修改DOM：脚本可以创建新的节点、修改现有节点的属性或内容、甚至是删除节点。这些操作可能会影响当前正在构建的DOM树的结构。
• 文档状态：脚本可以查询和修改文档的当前状态，如检查document.readyState属性来确定文档是否已经加载和解析完成。

WebKit中的实现细节
在WebKit源代码中，脚本的加载和执行通过多个组件协作完成，主要涉及以下几个方面：

• HTMLScriptElement：这个类代表HTML文档中的<script>元素。它处理脚本的加载逻辑，包括处理src属性指定的外部脚本的下载以及内联脚本的执行。
• ScriptRunner：这个类负责管理和调度脚本的执行。对于有defer或async属性的脚本，ScriptRunner会根据脚本的类型和加载状态安排它们的执行顺序。
• JavaScriptCore：WebKit的JavaScript引擎，负责解析和执行JavaScript代码。当HTMLScriptElement确定一个脚本准备好执行时，它会通过JavaScriptCore来执行脚本。

在WebKit中，脚本执行是一个与HTML解析过程紧密结合的复杂过程。它需要仔细管理脚本的加载、执行时机，以及脚本对DOM的修改。通过使用async和defer属性，开发者可以优化脚本的加载和执行，减少对页面渲染的影响。

示例：解析一个简单的HTML文档
假设我们有如下HTML文档：

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

Tokenization：解析器将文档分解为DOCTYPE token、开始标签和结束标签token（如<html>、<head>、<title>等）、字符数据token（如"Hello, World!"）等。
Tree Construction：树构建器使用这些tokens来构建DOM树，为每个标签创建对应的DOM节点，并将字符数据作为文本节点插入。
DOM生成：最终生成的DOM树准确地反映了HTML文档的结构。

2. CSS解析与样式计算

在WebKit中，CSS的解析和样式计算是渲染过程的关键部分，涉及将CSS样式表转换为浏览器能够理解并应用于DOM元素的样式规则。这个过程大致可以分为几个阶段：CSS文本的解析、样式规则的构建、样式的匹配、以及最终样式的计算。以下是从WebKit源码层面对这些步骤的具体分析。

2.1 CSS解析

CSS解析的任务是读取CSS文件或<style>标签中的CSS文本，然后将这些样式描述转换成WebKit内部可以理解的结构。

• 源码位置：CSS解析器的实现主要位于/Source/WebCore/css目录下，尤其是CSSParser.cpp文件。
• 解析过程：解析过程开始于将CSS文本分解为tokens（词法分析），然后根据CSS的语法规则将这些tokens组织成各种CSS规则（语法分析）。WebKit使用自己的CSS解析器来执行这个任务，它支持CSS3规范。

CSS解析是将CSS源代码转换成浏览器能够理解和使用的结构化格式的过程。在WebKit这样的现代浏览器引擎中，CSS解析涉及多个步骤，包括词法分析（tokenization）、语法分析（parsing）、构建解析树等。这一过程旨在从CSS代码中提取样式规则，然后将这些规则应用于对应的DOM元素上。

词法分析
过程概述：词法分析是解析过程的第一步，其目的是将CSS文本分解成一系列的tokens。Token是代码的最小单位，例如标识符、属性名、属性值、选择器、括号、分号等。
实现细节：WebKit使用一个词法分析器（lexer）来执行这一任务。这个分析器读取CSS文本，并根据CSS语法规则识别出各种tokens。
语法分析
过程概述：语法分析接收词法分析生成的tokens，并根据CSS的语法规则将它们组织成有意义的结构，如样式规则（包括选择器和一组声明）。
实现细节：这一步通常由一个解析器（parser）完成，它根据CSS的语法构建出一个抽象语法树（AST）。AST是一个树形结构，其中每个节点代表CSS代码的一个构造，如一个完整的样式规则或一个声明。
构建解析树
过程概述：构建解析树是将语法分析的结果转换成浏览器可以用来应用样式的内部表示形式。这个表示形式包含了所有的样式规则及其选择器和声明。
实现细节：在WebKit中，解析树的构建涉及到将AST转换成浏览器的内部样式表示，即将样式规则转换成浏览器可以直接应用的格式。这一格式通常涉及到样式规则的具体化，即解析选择器、计算值（如将相对单位转换为绝对单位）等。
样式规则的存储
过程概述：一旦CSS被解析，样式规则需要以某种形式存储，以便后续的样式计算和应用。
实现细节：WebKit内部使用CSSStyleSheet对象来表示整个样式表，而CSSRule对象用于表示单个样式规则。这些对象支持Web APIs，允许通过JavaScript访问和修改样式。
源码中的实现
在WebKit的源码中，CSS解析的相关代码主要位于Source/WebCore/css目录下。CSSParser类是核心，负责将CSS文本转换成可用的样式规则。解析过程大致如下：

CSSParser类读取CSS文本，并使用词法分析器将其分解成tokens。
然后，这些tokens被送入语法分析器，构建出AST。
接着，CSSParser将AST转换成WebKit内部使用的样式规则表示，存储在CSSStyleSheet对象中。
CSS解析是一个复杂且性能敏感的过程，WebKit在这方面做了大量优化，以确保页面能够快速加载和渲染。

2.2 构建样式规则

解析完CSS文本后，WebKit会构建一系列的样式规则，这些规则是内部对象，用于表示CSS中定义的各种样式。

• 样式规则对象：样式规则在WebKit中通过CSSRule及其子类（如CSSStyleRule）表示，这些类定义在/Source/WebCore/css目录中。
• 样式表对象：所有的样式规则被组织在CSSStyleSheet对象中，这个对象代表了一个完整的CSS样式表。

2.3 样式匹配

当有了内部表示的样式规则后，WebKit需要确定哪些规则应用于文档中的哪些元素。这个过程称为样式匹配。

• 选择器匹配：每个CSSStyleRule对象包含一个或多个选择器（通过CSSSelector类表示）。WebKit遍历DOM树，对于每个元素，它使用选择器引擎来找出所有匹配该元素的样式规则。
• 样式上下文：匹配到的样式规则用于创建或更新RenderStyle对象，这个对象表示元素的最终计算样式，并与对应的RenderObject关联。

2.4 样式计算

最终样式的计算涉及到确定元素应用哪些具体的样式值，这包括解析相对单位（如em、%）、计算继承的值、以及应用CSS的层叠规则。

• 计算过程：这一过程主要在RenderStyle对象的构建和更新中进行。WebKit首先根据匹配到的规则和继承的样式计算出每个属性的值，然后处理层叠和重写逻辑，最后生成最终的样式值。
• 应用样式：一旦RenderStyle对象计算完成，它就会应用到对应的RenderObject上，影响元素的布局和绘制。

3. 构建渲染树

创建RenderObject：对于DOM树中的每个可见节点，WebKit创建一个对应的RenderObject（也称为渲染器）。RenderObject是渲染树的节点，负责计算布局和绘制内容。
类型映射：不同类型的DOM节点会映射到不同类型的RenderObject。例如，<div>可能对应一个RenderBlock，而<img>对应一个RenderImage。
RenderTree构建：RenderObject之间保持与DOM树相同的父子关系，形成了渲染树。但渲染树只包含可见元素，如display: none的元素不会被包含。

4. 布局（Layout）

布局过程：WebKit对渲染树进行布局计算，确定每个RenderObject的准确位置和大小。这一步是递归的，从渲染树的根节点开始，逐个处理所有子节点。
重布局：当DOM变化影响到布局时（如元素大小变化），可能会触发重布局。

5. 绘制（Painting）

图层（Layers）：某些RenderObject可能会创建自己的图层（RenderLayer），特别是对于需要复合操作的元素（如使用了CSS动画、变换等）。
绘制过程：WebKit遍历渲染树，将每个RenderObject的内容绘制到它所在的图层上。这个过程可能会利用图形硬件加速。
复合（Compositing）：如果有多个图层，WebKit还需要进行复合操作，将这些图层合并到一个最终的图像上，然后显示在屏幕上。

6. 交互

事件处理：RenderObject树还处理用户交互，如点击、滚动等事件。