背景

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

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

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

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

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

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

CSS解释器和样式布局

CSS基本功能

CSS的全称是Cascading Style Sheet，中文名是级联样式表，主要是用来控制网页的显示风格。它被广泛地使用在网页中，绝大多数的现代浏览器都支持它。CSS的一个比较重要的特征就是将网页的内容和内容的展示方式分离，这对开发者提高开发效率非常有用。另一个重要的特征是它很强大，而且不是一般的强大，特别是新的CSS3标准，不仅能提供对页面任意元素的精准控制，同时还能提供丰富多彩的样式。简而言之，CSS是一种非常出色的文本展示语言。

Web开发者有两种方法可以使用CSS，第一种就是示例代码6-1中将CSS的代码放入元素“style”中，这称为内部样式表；第二种就是形如代码＜link rel="stylesheet"type="text/css" href="css-url.css"＞这样的用法，引用了一个外部的CSS文档，这称为外部样式表。

CSS解释器和规则匹配

样式的WebKit表示类

在DOM树中，CSS样式可以包含在“style”元素中或者使用“link”来引用一个CSS文档。对于CSS样式表，不管是内嵌还是外部文档，WebKit都使用CSSStyleSheet类来表示。

一切的起源都是从DOM中的Document类开始。先看Document类之外的左上部分：包括一个DocumentStyleSheetCollection类，该类包含了所有CSS样式表；还包括WebKit的内部表示类CSSStyleSheet，它包含CSS的href、类型、内容等信息。CSS的内容就是样式信息StyleSheetContents，包含了一个样式规则(StyleRuleBase)列表。样式规则被用在CSS的解释器的工作过程中。

下面的部分WebKit主要是将解释之后的规则组织起来，用于为DOM中的元素匹配相应的规则，从而应用规则中的属性值序列。这一过程的主要负责者是StyleSheetResolver类，它属于Document类，并包含了一个DocumentRuleSets类用来表示多个规则集合(RuleSet)。每个规则集合都是将之前解释之后的结果合并起来，并进行分类，例如id类规则、标签类规则等。至于为什么是多个规则集合，是因为这些规则集合可能源自于默认的规则集合（前面提到过WebKit使用默认的CSS样式信息），或者网页自定义的规则集合等。

样式规则是解释器的输出结构，是样式匹配的输入数据。样式规则有很多类型：

• Style：这个是基本类型，大多数规则属于这个类型。
• Import：是WebKit中为了方便而引入的，其对应的是一个导入CSS文件的Style元素。
• Media：对应于CSS标准中的@media类型。
• Fontface：CSS3新引入的自定义字体的规则类型。
• Page：对应于CSS标准中的@page类型。
• Keyframes：对应于WebKit中的@-webkit-key-frames类型，可以用来定制特定帧的样式属性信息。
• Region：对CSS标准正在进行中的Regions的支持，这方便了开发者对页面进行分区域排版。

WebKit布局

基础

当WebKit创建RenderObject对象之后，每个对象是不知道自己的位置、大小等信息的，WebKit根据框模型来计算它们的位置、大小等信息的过程称为布局计算（或者称为排版）。

FrameView类主要负责视图方面的任务，例如网页视图大小、滚动、布局计算、绘图等，它是一个总入口类。图中标注了两个跟布局计算密切相关的函数——“layout”和“needsLayout”，它们用来布局计算和决定是否需要布局计算，实际的布局计算则是在RenderObject类中。

布局计算

布局计算是一个递归的过程，这是因为一个节点的大小通常需要先计算它的子女节点的位置、大小等信息。

布局计算根据其计算的范围大致可以分为两类：第一类是对整个RenderObject树进行的计算；第二类是对RenderObject树中某个子树的计算，常见于文本元素或者是overflow：auto块的计算，这种情况一般是其子树布局的改变不会影响其周围元素的布局，因而不需要重新计算更大范围内的布局。

总结

从整个网页的加载和渲染过程来看，CSS解释器和规则匹配处于DOM树建立之后，RenderObject树建立之前，CSS解释器解释后的结果会保存起来，然后RenderObject树基于该结果来进行规范匹配和布局计算。当网页有用户交互或者动画等动作的时候，通过CSSOM等技术，JavaScript代码同样可以非常方便地修改CSS代码，WebKit此时需要重新解释样式并重复以上这一过程。

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