让咱们来构建一个浏览器引擎吧（建议收藏）

时间 2021-04-16

标签 css html 前端 html5 node css3 c++ git github web 栏目浏览器繁體版

原文原文链接

DevUI是一支兼具设计视角和工程视角的团队，服务于华为云 DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。

官方网站： devui.design

Ng组件库： ng-devui（欢迎Star）

官方交流：添加DevUI小助手（devui-official）

DevUIHelper插件：DevUIHelper-LSP（欢迎Star）

引言

前端有一个经典的面试题：在浏览器地址栏输入URL到最终呈现出页面，中间发生了什么？css

中间有一个过程是获取后台返回的HTML文本，浏览器渲染引擎将其解析成DOM树，并将HTML中的CSS解析成样式树，而后将DOM树和样式树合并成布局树，并最终由绘图程序绘制到浏览器画板上。html

本文经过亲自动手实践，教你一步一步实现一个迷你版浏览器引擎，进而深刻理解渲染引擎的工做原理，干货满满。前端

主要分红七个部分：html5

第一部分：开始
第二部分：HTML
第三部分：CSS
第四部分：样式
第五部分：盒子
第六部分：块布局
第七部分：绘制 101

原文写于2014.8.8。node

原文地址：https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.htmlcss3

如下是正文：c++

第一部分：开始

我正在构建一个“玩具”渲染引擎，我认为你也应该这样作。这是一系列文章中的第一篇。git

完整的系列文章将描述我编写的代码，并向你展现如何编写本身的代码。但首先，让我解释一下缘由。github

你在造什么？

让咱们谈谈术语。浏览器引擎是web浏览器的一部分，它在“底层”工做，从Internet上获取网页，并将其内容转换成能够阅读、观看、听等形式。Blink、Gecko、WebKit和Trident都是浏览器引擎。相比之下，浏览器自己的用户界面（标签、工具栏、菜单等）被称为chrome。Firefox和SeaMonkey是两个浏览器，使用不一样的chrome，但使用相同的Gecko引擎。web

浏览器引擎包括许多子组件：HTTP客户端、HTML解析器、CSS解析器、JavaScript引擎（自己由解析器、解释器和编译器组成）等等。那些涉及解析HTML和CSS等web格式，并将其转换成你在屏幕上看到的内容的组件，有时被称为布局引擎或渲染引擎。

为何是一个“玩具”渲染引擎？

一个功能齐全的浏览器引擎很是复杂。Blink，Gecko，WebKit，它们每个都有数百万行代码。更年轻、更简单的渲染引擎，如Servo和WeasyPrint，也有成千上万行。这对一个新手来讲是不容易理解的！

说到很是复杂的软件：若是你参加了编译器或操做系统的课程，在某些时候你可能会建立或修改一个“玩具”编译器或内核。这是一个为学习而设计的简单模型；它可能永远不会由做者之外的任何人管理。可是

制做一个玩具系统对于了解真实的东西是如何工做的是一个有用的工具。

即便你从未构建过真实的编译器或内核，

了解它们的工做方式也能够帮助你在编写本身的程序时更好地使用它们。

所以，若是你想成为一名浏览器开发人员，或者只是想了解浏览器引擎内部发生了什么，为何不构建一个玩具呢？就像实现“真正的”编程语言子集的玩具编译器同样，玩具渲染引擎也能够实现HTML和CSS的一小部分。它不会取代平常浏览器中的引擎，但应该可以说明呈现一个简单HTML文档所需的基本步骤。

在家试试吧。

我但愿我已经说服你去试一试了。若是你已经有一些扎实的编程经验并了解一些高级HTML和CSS概念，那么学习本系列将会很是容易。然而，若是你刚刚开始学习这些东西，或者遇到你不理解的东西，请随意问问题，我会尽可能让它更清楚。

在你开始以前，我想告诉你一些你能够作的选择：

关于编程语言

你能够用任何编程语言构建一个玩具式的布局引擎，真的！用一门你了解和喜好的语言吧。若是这听起来颇有趣，你也能够

以此为借口学习一门新语言。

若是你想开始为主要的浏览器引擎（如Gecko或WebKit）作贡献，你可能但愿使用C++，由于C++是这些引擎中使用的主要语言，使用C++能够更容易地将你的代码与它们的代码进行比较。

我本身的玩具项目，robinson，是用Rust写的。我是Mozilla的Servo团队的一员，因此我很是喜欢Rust编程。此外，我建立这个项目的目标之一是了解更多的Servo的实现。Robinson有时会使用Servo的简化版本的数据结构和代码。

关于库和捷径

在这样的学习练习中，你必须决定是使用别人的代码，仍是从头编写本身的代码。个人建议是

为你真正想要理解的部分编写你本身的代码，可是不要羞于为其余的部分使用库。

学习如何使用特定的库自己就是一项有价值的练习。

我写robinson不只仅是为了我本身，也是为了做为这些文章和练习的示例代码。出于这样或那样的缘由，我但愿它尽量地小巧和独立。到目前为止，除了Rust标准库以外，我没有使用任何外部代码。(这也避免了使用同一版本的Rust来构建多个依赖的小麻烦，而该语言仍在开发中。)不过，这个规则并非一成不变的。例如，我之后可能会决定使用图形库，而不是编写本身的低级绘图代码。

另外一种避免编写代码的方法是省略一些内容。例如，robinson尚未网络代码；它只能读取本地文件。在一个玩具程序中，若是你想跳过一些东西，你能够跳过。我将在讨论过程当中指出相似的潜在捷径，这样你就能够绕过不感兴趣的步骤，直接跳到好的内容。若是你改变了主意，你能够在之后再补上空白。

第一步：DOM

准备好写代码了吗？咱们将从一些小的东西开始：DOM的数据结构。让咱们看看robinson的dom模块。

DOM是一个节点树。一个节点有零个或多个子节点。（它还有其余各类属性和方法，但咱们如今能够忽略其中的大部分。）

struct Node {
  // data common to all nodes:
  children: Vec<Node>,

  // data specific to each node type:
  node_type: NodeType,
}

有多种节点类型，但如今咱们将忽略其中的大多数，并将节点定义为元素节点或文本节点。在具备继承的语言中，这些是Node的子类型。在Rust中，它们能够是枚举enum（Rust的关键字用于“tagged union”或“sum type”）：

enum NodeType {
  Text(String),
  Element(ElementData),
}

元素包括一个标记名称和任意数量的属性，它们能够存储为从名称到值的映射。Robinson不支持名称空间，因此它只将标记和属性名称存储为简单的字符串。

struct ElementData {
    tag_name: String,
    attributes: AttrMap,
}

type AttrMap = HashMap<String, String>;

最后，一些构造函数使建立新节点变得容易：

fn text(data: String) -> Node {
    Node { children: Vec::new(), node_type: NodeType::Text(data) }
}

fn elem(name: String, attrs: AttrMap, children: Vec<Node>) -> Node {
    Node {
        children: children,
        node_type: NodeType::Element(ElementData {
            tag_name: name,
            attributes: attrs,
        })
    }
}

这是它！一个成熟的DOM实现将包含更多的数据和几十个方法，但这就是咱们开始所须要的。

练习

这些只是一些在家能够遵循的建议。作你感兴趣的练习，跳过不感兴趣的。

用你选择的语言启动一个新程序，并编写代码来表示DOM文本节点和元素树。
安装最新版本的Rust，而后下载并构建robinson。打开dom.rs和扩展NodeType以包含其余类型，如注释节点。
编写代码来美化DOM节点树。

在下一篇文章中，咱们将添加一个将HTML源代码转换为这些DOM节点树的解析器。

参考文献

有关浏览器引擎内部结构的更多详细信息，请参阅Tali Garsiel很是精彩的浏览器的工做原理及其到更多资源的连接。

例如代码，这里有一个“小型”开源web呈现引擎的简短列表。它们大多比robinson大不少倍，但仍然比Gecko或WebKit小得多。只有2000行代码的WebWhirr是惟一一个我称之为“玩具”引擎的引擎。

CSSBox (Java)
Cocktail (Haxe)
gngr (Java)
litehtml (c++)
LURE (Lua)
NetSurf (C)
Servo (Rust)
Simple San Simon (Haskell)
WeasyPrint (Python)
WebWhirr (C++)

你可能会发现这些有用的灵感或参考。若是你知道任何其余相似的项目，或者若是你开始本身的项目，请让我知道！

第二部分：HTML

这是构建一个玩具浏览器渲染引擎系列文章的第二篇。

本文是关于解析HTML源代码以生成DOM节点树的。解析是一个很吸引人的话题，可是我没有足够的时间或专业知识来介绍它。你能够从任何关于编译器的优秀课程或书籍中得到关于解析的详细介绍。或者经过阅读与你选择的编程语言一块儿工做的解析器生成器的文档来得到动手操做的开始。

HTML有本身独特的解析算法。与大多数编程语言和文件格式的解析器不一样，HTML解析算法不会拒绝无效的输入。相反，它包含了特定的错误处理指令，所以web浏览器能够就如何显示每一个web页面达成一致，即便是那些不符合语法规则的页面。Web浏览器必须作到这一点才能使用：由于不符合标准的HTML在Web早期就获得了支持，因此如今大部分现有Web页面都在使用它。

简单的HTML方言

我甚至没有尝试实现标准的HTML解析算法。相反，我为HTML语法的一小部分编写了一个基本解析器。个人解析器能够处理这样的简单页面：

<html>
    <body>
        <h1>Title</h1>
        <div id="main" class="test">
            <p>Hello <em>world</em>!</p>
        </div>
    </body>
</html>

容许使用如下语法:

闭合的标签：…
带引号的属性：id="main"
文本节点：world

其余全部内容都不支持，包括：

评论
Doctype声明
转义字符（如&）和CDATA节
自结束标签： 或 没有结束标签
错误处理（例如未闭合或不正确嵌套的标签）
名称空间和其余XHTML语法：<html:body>
字符编码检测

在这个项目的每一个阶段，我都或多或少地编写了支持后面阶段所需的最小代码。可是若是你想学习更多的解析理论和工具，你能够在你本身的项目中更加雄心勃勃！

示例代码

接下来，让咱们回顾一下个人HTML解析器，记住这只是一种方法（并且可能不是最好的方法）。它的结构松散地基于Servo的cssparser库中的tokenizer模块。它没有真正的错误处理；在大多数状况下，它只是在遇到意外的语法时停止。代码是用Rust语言写的，但我但愿它对于使用相似语言（如Java、C++或C#）的人来讲具备至关的可读性。它使用了第一部分中的DOM数据结构。

解析器将其输入字符串和当前位置存储在字符串中。位置是咱们尚未处理的下一个字符的索引。

struct Parser {
    pos: usize, // "usize" is an unsigned integer, similar to "size_t" in C
    input: String,
}

咱们能够用它来实现一些简单的方法来窥视输入中的下一个字符：

impl Parser {
    // Read the current character without consuming it.
    fn next_char(&self) -> char {
        self.input[self.pos..].chars().next().unwrap()
    }

    // Do the next characters start with the given string?
    fn starts_with(&self, s: &str) -> bool {
        self.input[self.pos ..].starts_with(s)
    }

    // Return true if all input is consumed.
    fn eof(&self) -> bool {
        self.pos >= self.input.len()
    }

    // ...
}

Rust字符串存储为UTF-8字节数组。要进入下一个字符，咱们不能只前进一个字节。相反，咱们使用char_indices来正确处理多字节字符。（若是咱们的字符串使用固定宽度的字符，咱们能够只将pos加1。）

// Return the current character, and advance self.pos to the next character.
fn consume_char(&mut self) -> char {
    let mut iter = self.input[self.pos..].char_indices();
    let (_, cur_char) = iter.next().unwrap();
    let (next_pos, _) = iter.next().unwrap_or((1, ' '));
    self.pos += next_pos;
    return cur_char;
}

一般咱们想要使用一个连续的字符串。consume_while方法使用知足给定条件的字符，并将它们做为字符串返回。这个方法的参数是一个函数，它接受一个char并返回一个bool值。

// Consume characters until `test` returns false.
fn consume_while<F>(&mut self, test: F) -> String
        where F: Fn(char) -> bool {
    let mut result = String::new();
    while !self.eof() && test(self.next_char()) {
        result.push(self.consume_char());
    }
    return result;
}

咱们可使用它来忽略空格字符序列，或者使用字母数字字符串：

// Consume and discard zero or more whitespace characters.
fn consume_whitespace(&mut self) {
    self.consume_while(CharExt::is_whitespace);
}

// Parse a tag or attribute name.
fn parse_tag_name(&mut self) -> String {
    self.consume_while(|c| match c {
        'a'...'z' | 'A'...'Z' | '0'...'9' => true,
        _ => false
    })
}

如今咱们已经准备好开始解析HTML了。要解析单个节点，咱们查看它的第一个字符，看它是元素节点仍是文本节点。在咱们简化的HTML版本中，文本节点能够包含除<以外的任何字符。

// Parse a single node.
fn parse_node(&mut self) -> dom::Node {
    match self.next_char() {
        '<' => self.parse_element(),
        _   => self.parse_text()
    }
}

// Parse a text node.
fn parse_text(&mut self) -> dom::Node {
    dom::text(self.consume_while(|c| c != '<'))
}

一个元素更为复杂。它包括开始和结束标签，以及在它们之间任意数量的子节点:

// Parse a single element, including its open tag, contents, and closing tag.
fn parse_element(&mut self) -> dom::Node {
    // Opening tag.
    assert!(self.consume_char() == '<');
    let tag_name = self.parse_tag_name();
    let attrs = self.parse_attributes();
    assert!(self.consume_char() == '>');

    // Contents.
    let children = self.parse_nodes();

    // Closing tag.
    assert!(self.consume_char() == '<');
    assert!(self.consume_char() == '/');
    assert!(self.parse_tag_name() == tag_name);
    assert!(self.consume_char() == '>');

    return dom::elem(tag_name, attrs, children);
}

在咱们简化的语法中，解析属性很是容易。在到达开始标记(>)的末尾以前，咱们重复地查找后面跟着=的名称，而后是用引号括起来的字符串。

// Parse a single name="value" pair.
fn parse_attr(&mut self) -> (String, String) {
    let name = self.parse_tag_name();
    assert!(self.consume_char() == '=');
    let value = self.parse_attr_value();
    return (name, value);
}

// Parse a quoted value.
fn parse_attr_value(&mut self) -> String {
    let open_quote = self.consume_char();
    assert!(open_quote == '"' || open_quote == '\'');
    let value = self.consume_while(|c| c != open_quote);
    assert!(self.consume_char() == open_quote);
    return value;
}

// Parse a list of name="value" pairs, separated by whitespace.
fn parse_attributes(&mut self) -> dom::AttrMap {
    let mut attributes = HashMap::new();
    loop {
        self.consume_whitespace();
        if self.next_char() == '>' {
            break;
        }
        let (name, value) = self.parse_attr();
        attributes.insert(name, value);
    }
    return attributes;
}

为了解析子节点，咱们在循环中递归地调用parse_node，直到到达结束标记。这个函数返回一个Vec，这是Rust对可增加数组的名称。

// Parse a sequence of sibling nodes.
fn parse_nodes(&mut self) -> Vec<dom::Node> {
    let mut nodes = Vec::new();
    loop {
        self.consume_whitespace();
        if self.eof() || self.starts_with("</") {
            break;
        }
        nodes.push(self.parse_node());
    }
    return nodes;
}

最后，咱们能够把全部这些放在一块儿，将整个HTML文档解析成DOM树。若是文档没有显式包含根节点，则该函数将为文档建立根节点；这与真正的HTML解析器的功能相似。

// Parse an HTML document and return the root element.
pub fn parse(source: String) -> dom::Node {
    let mut nodes = Parser { pos: 0, input: source }.parse_nodes();

    // If the document contains a root element, just return it. Otherwise, create one.
    if nodes.len() == 1 {
        nodes.swap_remove(0)
    } else {
        dom::elem("html".to_string(), HashMap::new(), nodes)
    }
}

就是这样！robinson HTML解析器的所有代码。整个程序总共只有100多行代码(不包括空白行和注释)。若是你使用一个好的库或解析器生成器，你可能能够在更少的空间中构建一个相似的玩具解析器。

练习

这里有一些你能够本身尝试的替代方法。与前面同样，你能够选择其中的一个或多个，并忽略其余。

构建一个以HTML子集做为输入并生成DOM节点树的解析器(“手动”或使用库或解析器生成器)。
修改robinson的HTML解析器，添加一些缺失的特性，好比注释。或者用更好的解析器替换它，可能使用库或生成器构建。
建立一个无效的HTML文件，致使你的(或个人)解析器失败。修改解析器以从错误中恢复，并为测试文件生成DOM树。

捷径

若是想彻底跳过解析，能够经过编程方式构建DOM树，向程序中添加相似这样的代码(伪代码，调整它以匹配第1部分中编写的DOM代码)：

// <html><body>Hello, world!</body></html>
let root = element("html");
let body = element("body");
root.children.push(body);
body.children.push(text("Hello, world!"));

或者你能够找到一个现有的HTML解析器并将其合并到你的程序中。

本系列的下一篇文章将讨论CSS数据结构和解析。

第三部分：CSS

本文是构建玩具浏览器呈现引擎系列文章中的第三篇。

本文介绍了用于读取层叠样式表(CSS)的代码。像往常同样，我不会试图涵盖该规范中的全部内容。相反，我尝试实现足以说明一些概念并为后期渲染管道生成输入的内容。

剖析样式表

下面是一个CSS源代码示例：

h1, h2, h3 { margin: auto; color: #cc0000; }
div.note { margin-bottom: 20px; padding: 10px; }
#answer { display: none; }

接下来，我将从个人玩具浏览器引擎robinson中浏览css模块。虽然这些概念能够很容易地转换成其余编程语言，但代码仍是用Rust写的。先阅读前面的文章可能会帮助您理解下面的一些代码。

CSS样式表是一系列规则。(在上面的示例样式表中，每行包含一条规则。)

struct Stylesheet {
    rules: Vec<Rule>,
}

一条规则包括一个或多个用逗号分隔的选择器，后跟一系列用大括号括起来的声明。

struct Rule {
    selectors: Vec<Selector>,
    declarations: Vec<Declaration>,
}

一个选择器能够是一个简单的选择器，也能够是一个由组合符链接的选择器链。Robinson目前只支持简单的选择器。

注意：使人困惑的是，新的 Selectors Level 3标准使用相同的术语来表示略有不一样的东西。在本文中，我主要引用CSS2.1。尽管过期了，但它是一个有用的起点，由于它更小，更独立(与CSS3相比，CSS3被分红无数互相依赖和CSS2.1的规范)。

在robinson中，一个简单选择器能够包括一个标记名，一个以'#'为前缀的ID，任意数量的以'.'为前缀的类名，或以上几种状况的组合。若是标签名为空或'*'，那么它是一个“通用选择器”，能够匹配任何标签。

还有许多其余类型的选择器(特别是在CSS3中)，但如今这样就能够了。

enum Selector {
    Simple(SimpleSelector),
}

struct SimpleSelector {
    tag_name: Option<String>,
    id: Option<String>,
    class: Vec<String>,
}

声明只是一个名称/值对，由冒号分隔并以分号结束。例如，“margin: auto;”是一个声明。

struct Declaration {
    name: String,
    value: Value,
}

个人玩具引擎只支持CSS众多值类型中的一小部分。

enum Value {
    Keyword(String),
    Length(f32, Unit),
    ColorValue(Color),
    // insert more values here
}

enum Unit {
    Px,
    // insert more units here
}

struct Color {
    r: u8,
    g: u8,
    b: u8,
    a: u8,
}

注意：u8是一个8位无符号整数，f32是一个32位浮点数。

不支持全部其余CSS语法，包括@-rules、注释和上面没有提到的任何选择器/值/单元。

解析

CSS有一个规则的语法，这使得它比它古怪的表亲HTML更容易正确解析。当符合标准的CSS解析器遇到解析错误时，它会丢弃样式表中没法识别的部分，但仍然处理其他部分。这是颇有用的，由于它容许样式表包含新的语法，但在旧的浏览器中仍然产生定义良好的输出。

Robinson使用了一个很是简单(彻底不符合标准)的解析器，构建的方式与第2部分中的HTML解析器相同。我将粘贴一些代码片断，而不是一行一行地重复整个过程。例如，下面是解析单个选择器的代码:

// Parse one simple selector, e.g.: `type#id.class1.class2.class3`
fn parse_simple_selector(&mut self) -> SimpleSelector {
    let mut selector = SimpleSelector { tag_name: None, id: None, class: Vec::new() };
    while !self.eof() {
        match self.next_char() {
            '#' => {
                self.consume_char();
                selector.id = Some(self.parse_identifier());
            }
            '.' => {
                self.consume_char();
                selector.class.push(self.parse_identifier());
            }
            '*' => {
                // universal selector
                self.consume_char();
            }
            c if valid_identifier_char(c) => {
                selector.tag_name = Some(self.parse_identifier());
            }
            _ => break
        }
    }
    return selector;
}

注意没有错误检查。一些格式不正确的输入，如###或*foo*将成功解析并产生奇怪的结果。真正的CSS解析器会丢弃这些无效的选择器。

优先级

优先级是渲染引擎在冲突中决定哪种样式覆盖另外一种样式的方法之一。若是一个样式表包含两个匹配元素的规则，具备较高优先级的匹配选择器的规则能够覆盖较低优先级的选择器中的值。

选择器的优先级基于它的组件。ID选择器比类选择器优先级更高，类选择器比标签选择器优先级更高。在每一个“层级”中，选择器越多优先级越高。

pub type Specificity = (usize, usize, usize);

impl Selector {
    pub fn specificity(&self) -> Specificity {
        // http://www.w3.org/TR/selectors/#specificity
        let Selector::Simple(ref simple) = *self;
        let a = simple.id.iter().count();
        let b = simple.class.len();
        let c = simple.tag_name.iter().count();
        (a, b, c)
    }
}

(若是咱们支持链选择器，咱们能够经过将链各部分的优先级相加来计算链的优先级。)

每一个规则的选择器都存储在排序的向量中，优先级最高的优先。这对于匹配很是重要，我将在下一篇文章中介绍。

// Parse a rule set: `<selectors> { <declarations> }`.
fn parse_rule(&mut self) -> Rule {
    Rule {
        selectors: self.parse_selectors(),
        declarations: self.parse_declarations()
    }
}

// Parse a comma-separated list of selectors.
fn parse_selectors(&mut self) -> Vec<Selector> {
    let mut selectors = Vec::new();
    loop {
        selectors.push(Selector::Simple(self.parse_simple_selector()));
        self.consume_whitespace();
        match self.next_char() {
            ',' => { self.consume_char(); self.consume_whitespace(); }
            '{' => break, // start of declarations
            c   => panic!("Unexpected character {} in selector list", c)
        }
    }
    // Return selectors with highest specificity first, for use in matching.
    selectors.sort_by(|a,b| b.specificity().cmp(&a.specificity()));
    return selectors;
}

CSS解析器的其他部分至关简单。你能够在GitHub上阅读全文。若是您在第2部分中尚未这样作，那么如今是尝试解析器生成器的绝佳时机。个人手卷解析器完成了简单示例文件的工做，但它有不少漏洞，若是您违反了它的假设，它将严重失败。有一天，我可能会用rust-peg或相似的东西来取代它。

练习

和之前同样，你应该决定你想作哪些练习，并跳过其他的:

实现您本身的简化CSS解析器和优先级计算。
扩展robinson的CSS解析器，以支持更多的值，或一个或多个选择器组合符。
扩展CSS解析器，丢弃任何包含解析错误的声明，并遵循错误处理规则，在声明结束后继续解析。
让HTML解析器将任何<style>节点的内容传递给CSS解析器，并返回一个文档对象，该对象除了DOM树以外还包含一个样式表列表。

捷径

就像在第2部分中同样，您能够经过直接将CSS数据结构硬编码到您的程序中来跳过解析，或者经过使用已经有解析器的JSON等替代格式来编写它们。

未完待续

下一篇文章将介绍style模块。在这里，全部的一切都开始结合在一块儿，选择器匹配以将CSS样式应用到DOM节点。

这个系列的进度可能很快就会慢下来，由于这个月晚些时候我会很忙，我甚至尚未为即将发表的一些文章编写代码。我会让他们尽快赶到的！

第四部分：样式

欢迎回到我关于构建本身的玩具浏览器引擎的系列文章。

本文将介绍CSS标准所称的为属性值赋值，也就是我所说的样式模块。此模块将DOM节点和CSS规则做为输入，并将它们匹配起来，以肯定任何给定节点的每一个CSS属性的值。

这部分不包含不少代码，由于我没有实现真正复杂的部分。然而，我认为剩下的部分仍然颇有趣，我还将解释一些缺失的部分如何实现。

样式树

robinson的样式模块的输出是我称之为样式树的东西。这棵树中的每一个节点都包含一个指向DOM节点的指针，以及它的CSS属性值：

// Map from CSS property names to values.
type PropertyMap = HashMap<String, Value>;

// A node with associated style data.
struct StyledNode<'a> {
    node: &'a Node, // pointer to a DOM node
    specified_values: PropertyMap,
    children: Vec<StyledNode<'a>>,
}

这些 'a是什么？这些都是生存期，这是Rust如何保证指针是内存安全的，而不须要进行垃圾回收的部分缘由。若是你不是在Rust的环境中工做，你能够忽略它们；它们对代码的意义并不重要。

咱们能够向dom::Node结构添加新的字段，而不是建立一个新的树，但我想让样式代码远离早期的“教训”。这也让我有机会讨论大多数渲染引擎中的平行树。

浏览器引擎模块一般以一个树做为输入，而后产生一个不一样但相关的树做为输出。例如，Gecko的布局代码获取一个DOM树并生成一个框架树，而后使用它来构建一个视图树。Blink和WebKit将DOM树转换为渲染树。全部这些引擎的后期阶段会产生更多的树，包括层树和部件树。

在咱们完成了更多的阶段后，咱们的玩具浏览器引擎的管道将看起来像这样：

在个人实现中，DOM树中的每一个节点在样式树中只有一个节点。但在更复杂的管道阶段，几个输入节点可能会分解为一个输出节点。或者一个输入节点可能扩展为几个输出节点，或者彻底跳过。例如，样式树能够排除显示属性设置为'none'的元素。(相反，我将在布局阶段删除这些内容，由于这样个人代码会变得更简单一些。)

选择器匹配

构建样式树的第一步是选择器匹配。这将很是容易，由于个人CSS解析器只支持简单的选择器。您能够经过查看元素自己来判断一个简单的选择器是否匹配一个元素。匹配复合选择器须要遍历DOM树以查看元素的兄弟元素、父元素等。

fn matches(elem: &ElementData, selector: &Selector) -> bool {
    match *selector {
        Simple(ref simple_selector) => matches_simple_selector(elem, simple_selector)
    }
}

为了有所帮助，咱们将向DOM元素类型添加一些方便的ID和类访问器。class属性能够包含多个用空格分隔的类名，咱们在散列表中返回这些类名。

impl ElementData {
    pub fn id(&self) -> Option<&String> {
        self.attributes.get("id")
    }

    pub fn classes(&self) -> HashSet<&str> {
        match self.attributes.get("class") {
            Some(classlist) => classlist.split(' ').collect(),
            None => HashSet::new()
        }
    }
}

要测试一个简单的选择器是否匹配一个元素，只需查看每一个选择器组件，若是元素没有匹配的类、ID或标记名，则返回false。

fn matches_simple_selector(elem: &ElementData, selector: &SimpleSelector) -> bool {
    // Check type selector
    if selector.tag_name.iter().any(|name| elem.tag_name != *name) {
        return false;
    }

    // Check ID selector
    if selector.id.iter().any(|id| elem.id() != Some(id)) {
        return false;
    }

    // Check class selectors
    let elem_classes = elem.classes();
    if selector.class.iter().any(|class| !elem_classes.contains(&**class)) {
        return false;
    }

    // We didn't find any non-matching selector components.
    return true;
}

注意：这个函数使用any方法，若是迭代器包含一个经过所提供的测试的元素，则该方法返回true。这与Python中的any函数(或Haskell)或JavaScript中的some方法相同。

构建样式树

接下来，咱们须要遍历DOM树。对于树中的每一个元素，咱们将在样式表中搜索匹配规则。

当比较两个匹配相同元素的规则时，咱们须要使用来自每一个匹配的最高优先级选择器。由于咱们的CSS解析器存储了从优先级从高低的选择器，因此只要找到了匹配的选择器，咱们就能够中止，并返回它的优先级以及指向规则的指针。

type MatchedRule<'a> = (Specificity, &'a Rule);

// If `rule` matches `elem`, return a `MatchedRule`. Otherwise return `None`.
fn match_rule<'a>(elem: &ElementData, rule: &'a Rule) -> Option<MatchedRule<'a>> {
    // Find the first (highest-specificity) matching selector.
    rule.selectors.iter()
        .find(|selector| matches(elem, *selector))
        .map(|selector| (selector.specificity(), rule))
}

为了找到与一个元素匹配的全部规则，咱们称之为filter_map，它对样式表进行线性扫描，检查每一个规则并排除不匹配的规则。真正的浏览器引擎会根据标签名称、id、类等将规则存储在多个散列表中，从而加快速度。

// Find all CSS rules that match the given element.
fn matching_rules<'a>(elem: &ElementData, stylesheet: &'a Stylesheet) -> Vec<MatchedRule<'a>> {
    stylesheet.rules.iter().filter_map(|rule| match_rule(elem, rule)).collect()
}

一旦有了匹配规则，就能够为元素找到指定的值。咱们将每一个规则的属性值插入到HashMap中。咱们根据优先级对匹配进行排序，所以在较不特定的规则以后处理更特定的规则，并能够覆盖它们在HashMap中的值。

// Apply styles to a single element, returning the specified values.
fn specified_values(elem: &ElementData, stylesheet: &Stylesheet) -> PropertyMap {
    let mut values = HashMap::new();
    let mut rules = matching_rules(elem, stylesheet);

    // Go through the rules from lowest to highest specificity.
    rules.sort_by(|&(a, _), &(b, _)| a.cmp(&b));
    for (_, rule) in rules {
        for declaration in &rule.declarations {
            values.insert(declaration.name.clone(), declaration.value.clone());
        }
    }
    return values;
}

如今，咱们已经拥有遍历DOM树和构建样式树所需的一切。注意，选择器匹配只对元素有效，所以文本节点的指定值只是一个空映射。

// Apply a stylesheet to an entire DOM tree, returning a StyledNode tree.
pub fn style_tree<'a>(root: &'a Node, stylesheet: &'a Stylesheet) -> StyledNode<'a> {
    StyledNode {
        node: root,
        specified_values: match root.node_type {
            Element(ref elem) => specified_values(elem, stylesheet),
            Text(_) => HashMap::new()
        },
        children: root.children.iter().map(|child| style_tree(child, stylesheet)).collect(),
    }
}

这就是robinson构建样式树的所有代码。接下来我将讨论一些明显的遗漏。

级联

由web页面的做者提供的样式表称为做者样式表。除此以外，浏览器还经过用户代理样式表提供默认样式。它们可能容许用户经过用户样式表(如Gecko的userContent.css)添加自定义样式。

级联定义这三个“起源”中哪一个优先于另外一个。级联有6个级别:一个用于每一个起源的“正常”声明，另外一个用于每一个起源的!important声明。

Robinson的风格代码没有实现级联；它只须要一个样式表。缺乏默认样式表意味着HTML元素将不具备任何您可能指望的默认样式。例如，<head>元素的内容不会被隐藏，除非你显式地把这个规则添加到你的样式表中：

head { display: none; }

实现级联应该至关简单：只需跟踪每一个规则的起源，并根据起源和重要性以及特殊性对声明进行排序。一个简化的、两级的级联应该足以支持最多见的状况：普通用户代理样式和普通做者样式。

计算的值

除了上面提到的“指定值”以外，CSS还定义了初始值、计算值、使用值和实际值。

初始值是没有在级联中指定的属性的默认值。计算值基于指定值，但可能应用一些特定于属性的规范化规则。

根据CSS规范中的定义，正确实现这些须要为每一个属性单独编写代码。对于一个真实的浏览器引擎来讲，这项工做是必要的，但我但愿在这个玩具项目中避免它。在后面的阶段，当指定的值缺失时，使用这些值的代码将(某种程度上)经过使用默认值模拟初始值。

使用值和实际值是在布局期间和以后计算的，我将在之后的文章中介绍。

继承

若是文本节点不能匹配选择器，它们如何得到颜色、字体和其余样式？答案是继承。

当属性被继承时，任何没有级联值的节点都将接收该属性的父节点值。有些属性，如'color'，是默认继承的；其余仅当级联指定特殊值“inherit”时使用。

个人代码不支持继承。要实现它，能够将父类的样式数据传递到specified_values函数，并使用硬编码的查找表来决定应该继承哪些属性。

样式属性

任何HTML元素均可以包含一个包含CSS声明列表的样式属性。没有选择器，由于这些声明自动只应用于元素自己。

<span style="color: red; background: yellow;">

若是您想要支持style属性，请使用specified_values函数检查该属性。若是存在该属性，则将其从CSS解析器传递给parse_declarations。在普通的做者声明以后应用结果声明，由于属性比任何CSS选择器都更特定。

练习

除了编写本身的选择器匹配和值赋值代码以外，你还能够在本身的项目或robinson的分支中实现上面讨论的一个或多个缺失的部分:

级联
初始值和/或计算值
继承
样式属性

另外，若是您从第3部分扩展了CSS解析器以包含复合选择器，那么如今能够实现对这些复合选择器的匹配。

未完待续

第5部分将介绍布局模块。我尚未完成代码，因此在我开始写这篇文章以前还会有另外一个延迟。我计划将布局分红至少两篇文章(一篇是块布局，一篇多是内联布局)。

与此同时，我但愿看到您根据这些文章或练习建立的任何东西。若是你的代码在某个地方，请在下面添加一个连接！到目前为止，我已经看到了Martin Tomasi的Java实现和Pohl longsin的Swift版本。

第5部分：盒子

这是关于编写一个简单的HTML渲染引擎的系列文章中的第5篇。

本文将开始布局模块，该模块获取样式树并将其转换为二维空间中的一堆矩形。这是一个很大的模块，因此我将把它分红几篇文章。另外，在我为后面的部分编写代码时，我在本文中分享的一些代码可能须要更改。

布局模块的输入是第4部分中的样式树，它的输出是另外一棵树，即布局树。这使咱们的迷你渲染管道更进一步：

我将从基本的HTML/CSS布局模型开始讨论。若是您曾经学习过如何开发web页面，那么您可能已经熟悉了这一点，可是从实现者的角度来看，它可能有点不一样。

盒模型

布局就是方框。方框是网页的一个矩形部分。它具备页面上的宽度、高度和位置。这个矩形称为内容区域，由于它是框的内容绘制的地方。内容能够是文本、图像、视频或其余框。

框还能够在其内容区域周围有内边距、边框和边距。CSS规范中有一个图表显示全部这些层是如何组合在一块儿的。

Robinson将盒子的内容区域和周围区域存储在下面的结构中。[Rust注:f32是32位浮点型。]

// CSS box model. All sizes are in px.

struct Dimensions {
    // Position of the content area relative to the document origin:
    content: Rect,

    // Surrounding edges:
    padding: EdgeSizes,
    border: EdgeSizes,
    margin: EdgeSizes,
}

struct Rect {
    x: f32,
    y: f32,
    width: f32,
    height: f32,
}

struct EdgeSizes {
    left: f32,
    right: f32,
    top: f32,
    bottom: f32,
}

块和内联布局

注意:这部分包含的图表若是没有相关的视觉样式，就没有意义。若是您是在一个提要阅读器中阅读这篇文章，尝试在一个常规的浏览器选项卡中打开原始页面。我还为使用屏幕阅读器或其余辅助技术的读者提供了文本描述。

CSS display属性决定一个元素生成哪一种类型的框。CSS定义了几种框类型，每种都有本身的布局规则。我只讲其中的两种:块和内联。

我将使用这一点伪html来讲明区别:

<container>
  <a></a>
  <b></b>
  <c></c>
  <d></d>
</container>

块级框从上到下垂直地放置在容器中。

a, b, c, d { display: block; }

行内框从左到右水平地放置在容器中。若是它们到达了容器的右边缘，它们将环绕并继续在下面的新行。

a, b, c, d { display: inline; }

每一个框必须只包含块级子元素或行内子元素。当DOM元素包含块级子元素和内联子元素时，布局引擎会插入匿名框来分隔这两种类型。(这些框是“匿名的”，由于它们与DOM树中的节点没有关联。)

在这个例子中，内联框b和c被一个匿名块框包围，粉红色显示:

a    { display: block; }
b, c { display: inline; }
d    { display: block; }

注意，内容默认垂直增加。也就是说，向容器中添加子元素一般会使容器更高，而不是更宽。另外一种说法是，默认状况下，块或行的宽度取决于其容器的宽度，而容器的高度取决于其子容器的高度。

若是你覆盖了属性的默认值，好比宽度和高度，这将变得更加复杂，若是你想要支持像垂直书写这样的特性，这将变得更加复杂。

布局树

布局树是一个框的集合。一个盒子有尺寸，它可能包含子盒子。

struct LayoutBox<'a> {
    dimensions: Dimensions,
    box_type: BoxType<'a>,
    children: Vec<LayoutBox<'a>>,
}

框能够是块节点、内联节点或匿名块框。(当我实现文本布局时，这须要改变，由于行换行会致使一个内联节点被分割成多个框。但如今就能够了。)

enum BoxType<'a> {
    BlockNode(&'a StyledNode<'a>),
    InlineNode(&'a StyledNode<'a>),
    AnonymousBlock,
}

要构建布局树，咱们须要查看每一个DOM节点的display属性。我向style模块添加了一些代码，以获取节点的显示值。若是没有指定值，则返回初始值'inline'。

enum Display {
    Inline,
    Block,
    None,
}

impl StyledNode {
    // Return the specified value of a property if it exists, otherwise `None`.
    fn value(&self, name: &str) -> Option<Value> {
        self.specified_values.get(name).map(|v| v.clone())
    }

    // The value of the `display` property (defaults to inline).
    fn display(&self) -> Display {
        match self.value("display") {
            Some(Keyword(s)) => match &*s {
                "block" => Display::Block,
                "none" => Display::None,
                _ => Display::Inline
            },
            _ => Display::Inline
        }
    }
}

如今咱们能够遍历样式树，为每一个节点构建一个LayoutBox，而后为节点的子节点插入框。若是一个节点的display属性被设置为'none'，那么它就不包含在布局树中。

// Build the tree of LayoutBoxes, but don't perform any layout calculations yet.
fn build_layout_tree<'a>(style_node: &'a StyledNode<'a>) -> LayoutBox<'a> {
    // Create the root box.
    let mut root = LayoutBox::new(match style_node.display() {
        Block => BlockNode(style_node),
        Inline => InlineNode(style_node),
        DisplayNone => panic!("Root node has display: none.")
    });

    // Create the descendant boxes.
    for child in &style_node.children {
        match child.display() {
            Block => root.children.push(build_layout_tree(child)),
            Inline => root.get_inline_container().children.push(build_layout_tree(child)),
            DisplayNone => {} // Skip nodes with `display: none;`
        }
    }
    return root;
}

impl LayoutBox {
    // Constructor function
    fn new(box_type: BoxType) -> LayoutBox {
        LayoutBox {
            box_type: box_type,
            dimensions: Default::default(), // initially set all fields to 0.0
            children: Vec::new(),
        }
    }
    // ...
}

若是块节点包含内联子节点，则建立一个匿名块框来包含它。若是一行中有几个内联子元素，则将它们都放在同一个匿名容器中。

// Where a new inline child should go.
fn get_inline_container(&mut self) -> &mut LayoutBox {
    match self.box_type {
        InlineNode(_) | AnonymousBlock => self,
        BlockNode(_) => {
            // If we've just generated an anonymous block box, keep using it.
            // Otherwise, create a new one.
            match self.children.last() {
                Some(&LayoutBox { box_type: AnonymousBlock,..}) => {}
                _ => self.children.push(LayoutBox::new(AnonymousBlock))
            }
            self.children.last_mut().unwrap()
        }
    }
}

这是有意从标准CSS框生成算法的多种方式简化的。例如，它不处理内联框包含块级子框的状况。此外，若是块级节点只有内联子节点，则会生成一个没必要要的匿名框。

未完待续

哇，比我想象的要长。我想我就讲到这里，可是不要担忧：第6部分很快就会到来，它将讨论块级布局。

一旦块布局完成，咱们就能够跳转到管道的下一个阶段：绘制！我想我可能会这么作，由于这样咱们最终能够看到渲染引擎的输出是漂亮的图片而不是数字。

然而，这些图片将只是一堆彩色的矩形，除非咱们经过实现内联布局和文本布局来完成布局模块。若是我在开始绘画以前没有实现这些，我但愿以后再回到它们上来。

第六部分：块布局

欢迎回到我关于构建一个玩具HTML渲染引擎的系列文章，这是系列文章的第6篇。

本文将继续咱们在第5部分中开始的布局模块。这一次，咱们将添加布局块框的功能。这些框是垂直堆叠的，好比标题和段落。

为了简单起见，这段代码只实现了正常流：没有浮动，没有绝对定位，也没有固定定位。

遍历布局树

该代码的入口点是layout函数，它接受一个LayoutBox并计算其尺寸。咱们将把这个函数分为三种状况，目前只实现其中一种：

impl LayoutBox {
    // Lay out a box and its descendants.
    fn layout(&mut self, containing_block: Dimensions) {
        match self.box_type {
            BlockNode(_) => self.layout_block(containing_block),
            InlineNode(_) => {} // TODO
            AnonymousBlock => {} // TODO
        }
    }

    // ...
}

一个块的布局取决于它所包含块的尺寸。对于正常流中的块框，这只是框的父。对于根元素，它是浏览器窗口(或“视口”)的大小。

您可能还记得在前一篇文章中，一个块的宽度取决于它的父块，而它的高度取决于它的子块。这意味着咱们的代码在计算宽度时须要自顶向下遍历树，所以它能够在父类的宽度已知以后布局子类，并自底向上遍历以计算高度，所以父类的高度在其子类的高度以后计算。

fn layout_block(&mut self, containing_block: Dimensions) {
    // Child width can depend on parent width, so we need to calculate
    // this box's width before laying out its children.
    self.calculate_block_width(containing_block);

    // Determine where the box is located within its container.
    self.calculate_block_position(containing_block);

    // Recursively lay out the children of this box.
    self.layout_block_children();

    // Parent height can depend on child height, so `calculate_height`
    // must be called *after* the children are laid out.
    self.calculate_block_height();
}

该函数对布局树执行一次遍历，向下时进行宽度计算，向上时进行高度计算。一个真正的布局引擎可能会执行几回树遍历，一些是自顶向下，一些是自底向上。

计算宽度

宽度计算是块布局函数的第一步，也是最复杂的一步。我要一步一步来。首先，咱们须要CSS宽度属性的值和全部左右边的大小:

fn calculate_block_width(&mut self, containing_block: Dimensions) {
    let style = self.get_style_node();

    // `width` has initial value `auto`.
    let auto = Keyword("auto".to_string());
    let mut width = style.value("width").unwrap_or(auto.clone());

    // margin, border, and padding have initial value 0.
    let zero = Length(0.0, Px);

    let mut margin_left = style.lookup("margin-left", "margin", &zero);
    let mut margin_right = style.lookup("margin-right", "margin", &zero);

    let border_left = style.lookup("border-left-width", "border-width", &zero);
    let border_right = style.lookup("border-right-width", "border-width", &zero);

    let padding_left = style.lookup("padding-left", "padding", &zero);
    let padding_right = style.lookup("padding-right", "padding", &zero);

    // ...
}

这使用了一个名为lookup的助手函数，它只是按顺序尝试一系列值。若是第一个属性没有设置，它将尝试第二个属性。若是没有设置，它将返回给定的默认值。这提供了一个不完整(但简单)的简写属性和初始值实现。

注意:这相似于JavaScript或Ruby中的如下代码:

margin_left = style["margin-left"] || style["margin"] || zero;

由于子对象不能改变父对象的宽度，因此它须要确保本身的宽度与父对象的宽度相符。CSS规范将其表达为一组约束和解决它们的算法。下面的代码实现了该算法。

首先，咱们将边距、内边距、边框和内容宽度相加。to_px帮助器方法将长度转换为它们的数值。若是一个属性被设置为'auto'，它会返回0，所以它不会影响和。

let total = [&margin_left, &margin_right, &border_left, &border_right,
             &padding_left, &padding_right, &width].iter().map(|v| v.to_px()).sum();

这是盒子所须要的最小水平空间。若是它不等于容器的宽度，咱们须要调整一些东西使它相等。

若是宽度或边距设置为“auto”，它们能够扩展或收缩以适应可用的空间。按照说明书，咱们首先检查盒子是否太大。若是是这样，咱们将任何可扩展边距设置为零。

// If width is not auto and the total is wider than the container, treat auto margins as 0.
if width != auto && total > containing_block.content.width {
    if margin_left == auto {
        margin_left = Length(0.0, Px);
    }
    if margin_right == auto {
        margin_right = Length(0.0, Px);
    }
}

若是盒子对容器来讲太大，就会溢出容器。若是过小，它就会下泄，留下额外的空间。咱们将计算下溢量，即容器内剩余空间的大小。(若是这个数字是负数，它其实是一个溢出。)

let underflow = containing_block.content.width - total;

咱们如今遵循规范的算法，经过调整可扩展的尺寸来消除任何溢出或下溢。若是没有“自动”尺寸，咱们调整右边的边距。(是的，这意味着在溢出的状况下，边界多是负的!)

match (width == auto, margin_left == auto, margin_right == auto) {
    // If the values are overconstrained, calculate margin_right.
    (false, false, false) => {
        margin_right = Length(margin_right.to_px() + underflow, Px);
    }

    // If exactly one size is auto, its used value follows from the equality.
    (false, false, true) => { margin_right = Length(underflow, Px); }
    (false, true, false) => { margin_left  = Length(underflow, Px); }

    // If width is set to auto, any other auto values become 0.
    (true, _, _) => {
        if margin_left == auto { margin_left = Length(0.0, Px); }
        if margin_right == auto { margin_right = Length(0.0, Px); }

        if underflow >= 0.0 {
            // Expand width to fill the underflow.
            width = Length(underflow, Px);
        } else {
            // Width can't be negative. Adjust the right margin instead.
            width = Length(0.0, Px);
            margin_right = Length(margin_right.to_px() + underflow, Px);
        }
    }

    // If margin-left and margin-right are both auto, their used values are equal.
    (false, true, true) => {
        margin_left = Length(underflow / 2.0, Px);
        margin_right = Length(underflow / 2.0, Px);
    }
}

此时，约束已经知足，任何'auto'值都已经转换为长度。结果是水平框尺寸的使用值，咱们将把它存储在布局树中。你能够在layout.rs中看到最终的代码。

定位

下一步比较简单。这个函数查找剩余的边距/内边距/边框样式，并使用这些样式和包含的块尺寸来肯定这个块在页面上的位置。

fn calculate_block_position(&mut self, containing_block: Dimensions) {
    let style = self.get_style_node();
    let d = &mut self.dimensions;

    // margin, border, and padding have initial value 0.
    let zero = Length(0.0, Px);

    // If margin-top or margin-bottom is `auto`, the used value is zero.
    d.margin.top = style.lookup("margin-top", "margin", &zero).to_px();
    d.margin.bottom = style.lookup("margin-bottom", "margin", &zero).to_px();

    d.border.top = style.lookup("border-top-width", "border-width", &zero).to_px();
    d.border.bottom = style.lookup("border-bottom-width", "border-width", &zero).to_px();

    d.padding.top = style.lookup("padding-top", "padding", &zero).to_px();
    d.padding.bottom = style.lookup("padding-bottom", "padding", &zero).to_px();

    d.content.x = containing_block.content.x +
                  d.margin.left + d.border.left + d.padding.left;

    // Position the box below all the previous boxes in the container.
    d.content.y = containing_block.content.height + containing_block.content.y +
                  d.margin.top + d.border.top + d.padding.top;
}

仔细看看最后一条语句，它设置了y的位置。这就是为何块布局具备独特的垂直堆叠行为。为了实现这一点，咱们须要确保父节点的内容。高度在布局每一个子元素后更新。

子元素

下面是递归布局框内容的代码。当它循环遍历子框时，它会跟踪总内容高度。定位代码(上面)使用这个函数来查找下一个子元素的垂直位置。

fn layout_block_children(&mut self) {
    let d = &mut self.dimensions;
    for child in &mut self.children {
        child.layout(*d);
        // Track the height so each child is laid out below the previous content.
        d.content.height = d.content.height + child.dimensions.margin_box().height;
    }
}

每一个子节点占用的总垂直空间是其边距框的高度，咱们是这样计算的:

impl Dimensions {
    // The area covered by the content area plus its padding.
    fn padding_box(self) -> Rect {
        self.content.expanded_by(self.padding)
    }
    // The area covered by the content area plus padding and borders.
    fn border_box(self) -> Rect {
        self.padding_box().expanded_by(self.border)
    }
    // The area covered by the content area plus padding, borders, and margin.
    fn margin_box(self) -> Rect {
        self.border_box().expanded_by(self.margin)
    }
}

impl Rect {
    fn expanded_by(self, edge: EdgeSizes) -> Rect {
        Rect {
            x: self.x - edge.left,
            y: self.y - edge.top,
            width: self.width + edge.left + edge.right,
            height: self.height + edge.top + edge.bottom,
        }
    }
}

为简单起见，这里没有实现边距折叠。一个真正的布局引擎会容许一个框的底部边缘与下一个框的顶部边缘重叠，而不是每一个框都彻底放在前一个框的下面。

“高度”属性

默认状况下，框的高度等于其内容的高度。但若是'height'属性被显式设置为长度，咱们将使用它来代替:

fn calculate_block_height(&mut self) {
    // If the height is set to an explicit length, use that exact length.
    // Otherwise, just keep the value set by `layout_block_children`.
    if let Some(Length(h, Px)) = self.get_style_node().value("height") {
        self.dimensions.content.height = h;
    }
}

这就是块布局算法。如今你能够在一个HTML文档上调用layout()，它会生成一堆矩形，包括宽度、高度、边距等。很酷,对吧?

练习

对于雄心勃勃的实现者，一些额外的想法：

崩溃的垂直边缘。
相对定位。
并行化布局过程，并测量对性能的影响。

若是您尝试并行化项目，您可能想要将宽度计算和高度计算分离为两个不一样的通道。经过为每一个子任务生成一个单独的任务，从上至下遍历宽度很容易并行化。高度的计算要稍微复杂一些，由于您须要返回并在每一个子元素被布局以后调整它们的y位置。

未完待续

感谢全部跟随我走到这一步的人！

随着我深刻到布局和渲染的陌生领域，这些文章的编写时间愈来愈长。在我试验字体和图形代码的下一部分以前，会有一段较长的时间中断，但我会尽快恢复这个系列。

更新：第7部分如今准备好了。

第七部分：绘制 101

欢迎回到个人关于构建一个简单HTML渲染引擎的系列，这是第7篇，也是最后一篇。

在这篇文章中，我将添加很是基本的绘画代码。这段代码从布局模块中获取框树，并将它们转换为像素数组。这个过程也称为“栅格化”。

浏览器一般在Skia、Cairo、Direct2D等图形api和库的帮助下实现光栅化。这些api提供了绘制多边形、直线、曲线、渐变和文本的函数。如今，我将编写我本身的光栅化程序，它只能绘制一种东西:矩形。

最后我想实现文本渲染。在这一点上，我可能会抛弃这个玩具绘画代码，转而使用“真正的”2D图形库。但就目前而言，矩形足以将个人块布局算法的输出转换为图片。

迎头遇上

从上一篇文章开始，我对之前文章中的代码作了一些小的修改。这包括一些小的重构，以及一些更新，以保持代码与最新的Rust夜间构建兼容。这些更改对理解代码都不是相当重要的，可是若是您好奇的话，能够查看提交历史记录。

构建显示列表

在绘制以前，咱们将遍历布局树并构建一个显示列表。这是一个图形操做列表，如“绘制圆圈”或“绘制文本字符串”。或者在咱们的例子中，只是“画一个矩形”。

为何要将命令放入显示列表中，而不是当即执行它们?显示列表之因此有用有几个缘由。你能够经过搜索来找到被后期操做彻底掩盖的物品，并将其移除，以消除浪费的油漆。在只知道某些项发生了更改的状况下，能够修改和重用显示列表。您可使用相同的显示列表生成不一样类型的输出:例如，用于在屏幕上显示的像素，或用于发送到打印机的矢量图形。

Robinson的显示列表是显示命令的向量。目前，只有一种类型的DisplayCommand，一个纯色矩形:

type DisplayList = Vec<DisplayCommand>;

enum DisplayCommand {
    SolidColor(Color, Rect),
    // insert more commands here
}

为了构建显示列表，咱们遍历布局树并为每一个框生成一系列命令。首先，咱们绘制框的背景，而后在背景顶部绘制边框和内容。

fn build_display_list(layout_root: &LayoutBox) -> DisplayList {
    let mut list = Vec::new();
    render_layout_box(&mut list, layout_root);
    return list;
}

fn render_layout_box(list: &mut DisplayList, layout_box: &LayoutBox) {
    render_background(list, layout_box);
    render_borders(list, layout_box);
    // TODO: render text

    for child in &layout_box.children {
        render_layout_box(list, child);
    }
}

默认状况下，HTML元素是按照它们出现的顺序堆叠的:若是两个元素重叠，则后面的元素画在前面的元素之上。这反映在咱们的显示列表中，它将按照它们在DOM树中出现的顺序绘制元素。若是这段代码支持z-index属性，那么各个元素将可以覆盖这个堆叠顺序，咱们须要相应地对显示列表进行排序。

背景很简单。它只是一个实心矩形。若是没有指定背景颜色，那么背景是透明的，咱们不须要生成显示命令。

fn render_background(list: &mut DisplayList, layout_box: &LayoutBox) {
    get_color(layout_box, "background").map(|color|
        list.push(DisplayCommand::SolidColor(color, layout_box.dimensions.border_box())));
}

// Return the specified color for CSS property `name`, or None if no color was specified.
fn get_color(layout_box: &LayoutBox, name: &str) -> Option<Color> {
    match layout_box.box_type {
        BlockNode(style) | InlineNode(style) => match style.value(name) {
            Some(Value::ColorValue(color)) => Some(color),
            _ => None
        },
        AnonymousBlock => None
    }
}

边框是类似的，可是咱们不是画一个单独的矩形，而是每条边框都画4 - 1。

fn render_borders(list: &mut DisplayList, layout_box: &LayoutBox) {
    let color = match get_color(layout_box, "border-color") {
        Some(color) => color,
        _ => return // bail out if no border-color is specified
    };

    let d = &layout_box.dimensions;
    let border_box = d.border_box();

    // Left border
    list.push(DisplayCommand::SolidColor(color, Rect {
        x: border_box.x,
        y: border_box.y,
        width: d.border.left,
        height: border_box.height,
    }));

    // Right border
    list.push(DisplayCommand::SolidColor(color, Rect {
        x: border_box.x + border_box.width - d.border.right,
        y: border_box.y,
        width: d.border.right,
        height: border_box.height,
    }));

    // Top border
    list.push(DisplayCommand::SolidColor(color, Rect {
        x: border_box.x,
        y: border_box.y,
        width: border_box.width,
        height: d.border.top,
    }));

    // Bottom border
    list.push(DisplayCommand::SolidColor(color, Rect {
        x: border_box.x,
        y: border_box.y + border_box.height - d.border.bottom,
        width: border_box.width,
        height: d.border.bottom,
    }));
}

接下来，渲染函数将绘制盒子的每一个子元素，直到整个布局树被转换成显示命令为止。

光栅化

如今咱们已经构建了显示列表，咱们须要经过执行每一个DisplayCommand将其转换为像素。咱们将把像素存储在画布中:

struct Canvas {
    pixels: Vec<Color>,
    width: usize,
    height: usize,
}

impl Canvas {
    // Create a blank canvas
    fn new(width: usize, height: usize) -> Canvas {
        let white = Color { r: 255, g: 255, b: 255, a: 255 };
        return Canvas {
            pixels: repeat(white).take(width * height).collect(),
            width: width,
            height: height,
        }
    }
    // ...
}

要在画布上绘制矩形，只需循环遍历它的行和列，使用helper方法确保不会超出画布的范围。

fn paint_item(&mut self, item: &DisplayCommand) {
    match item {
        &DisplayCommand::SolidColor(color, rect) => {
            // Clip the rectangle to the canvas boundaries.
            let x0 = rect.x.clamp(0.0, self.width as f32) as usize;
            let y0 = rect.y.clamp(0.0, self.height as f32) as usize;
            let x1 = (rect.x + rect.width).clamp(0.0, self.width as f32) as usize;
            let y1 = (rect.y + rect.height).clamp(0.0, self.height as f32) as usize;

            for y in (y0 .. y1) {
                for x in (x0 .. x1) {
                    // TODO: alpha compositing with existing pixel
                    self.pixels[x + y * self.width] = color;
                }
            }
        }
    }
}

注意，这段代码只适用于不透明的颜色。若是咱们添加了透明度(经过读取不透明度属性，或在CSS解析器中添加对rgba()值的支持)，那么它就须要将每一个新像素与它所绘制的任何内容混合在一块儿。

如今咱们能够把全部东西都放到paint函数中，它会构建一个显示列表，而后栅格化到画布上:

// Paint a tree of LayoutBoxes to an array of pixels.
fn paint(layout_root: &LayoutBox, bounds: Rect) -> Canvas {
    let display_list = build_display_list(layout_root);
    let mut canvas = Canvas::new(bounds.width as usize, bounds.height as usize);
    for item in display_list {
        canvas.paint_item(&item);
    }
    return canvas;
}

最后，咱们能够编写几行代码，使用Rust图像库将像素数组保存为PNG文件。
漂亮的图片

最后，咱们已经到达渲染管道的末端。在不到1000行代码中，robinson如今能够解析这个HTML文件了:

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

和这个CSS文件:

* { display: block; padding: 12px; }
.a { background: #ff0000; }
.b { background: #ffa500; }
.c { background: #ffff00; }
.d { background: #008000; }
.e { background: #0000ff; }
.f { background: #4b0082; }
.g { background: #800080; }

获得如下效果：

耶！