从整个网页的加载和渲染过程来看，CSS解释器和规则匹配处于DOM树建立之后，RenderObject树建立之前，CSS解释器解释后的结果会保存起来，然后RenderObject树基于该结果来进行规范匹配和布局计算。当网页有用户交互或者动画等动作的时候，通过CSSDOM等技术，JavaScript代码同样可以非常方便的修改CSS代码，WebKit此时需要重新解释样式并重复以上这一过程。
1. 样式来源
- 网页开发者编写的样式信息；
- 网页的读者设置的样式信息，读者可以设置一个样式，这个样式可以应用到其浏览器的网页；
- 浏览器的内在默认样式。
2. CSS中主要的选择器
- 标签选择器
- 类型选择器
- ID选择器
- 属性选择器
- 后代选择器
- 子女选择器
- 相邻同胞选择器
一般而言选择器描述的越具体，它的优先级越高，也就是说选择器指向的越准确，它的优先级越高。例如：如果用1表示标签选择器的优先级，那么类选择器的优先级就是10，ID选择器就是100，数值越大表示优先级越高。
3. 框模型
框模型（Box model，或称为盒子模型）是CSS标准中引入来表示HTML标签元素的布局结构。一个框模型大致包括四个部分，它们从外到内分别是外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content）。
CSS标准的框模型结构
框模型是布局计算的基础，渲染引擎可以根据模型来理解如何排版元素以及元素间的位置关系。
4. 包含块（Containing Block）模型
当WebKit计算元素的盒子的位置和大小时，WebKit需要计算该元素和另外一个矩形区域的相对位置，这个矩形区域称为该元素的包含块。
- 根元素的包含块称为初始包含块，通常它的大小就是可视区域（Viewport）的大小。
- 对于其他位置属性设置为“static”或者“relative”的元素，它的包含块就是最近祖先的盒子模型中的内容区域（Content）。
- 如果元素的位置属性为“fixed”，那么该元素的包含块脱离HTML文档，固定在可视区域的某个特定位置。
- 如果元素的位置属性为“absolute”，那么该元素的包含块由最近的含有属性“absolute”、“relative”或者“fixed”的祖先决定。
5. CSSOM（CSS Object Module）
CSSOM称为CSS对象模型，它的思想是在DOM中的一些节点接口中，加入获取和操作CSS属性或者接口的JavaScript接口，因而JavaScript可以动态操作CSS样式。
6. WebKit布局
6.1 基础
当WebKit创建RenderObject对象之后，每个对象都不知道自己的位置、大小等信息的，WebKit根据模型来计算它们的位置、大小等信息的过程称为布局计算（或者称为排版）。
Frame类用于描述网页的框结构，每个框都有一个FrameView类，用于表示框的视图结构。FrameView类主要负责视图方面的任务，例如网页的视图大小、滚动、布局计算、绘图等，它是一个总入口类。
布局计算中的webkit类
布局计算中根据计算范围大致可分为两类：第一类是对整个RenderObject树进行的计算；第二类是对RenderObject树中的某个子树进行计算，常见于文本元素或者overflow:auto块的计算，这种情况一般是其子树布局的改变不会影响其周围元素的布局，因而不需要重新计算更大范围内的布局。
6.2 布局计算
布局计算是一个递归的过程，这是因为一个节点的大小通常需要先计算它的子女节点的位置、大小等信息。
哪些情况下需要重新计算布局呢？总体来讲，只要样式发生变化WebKit都需要重新计算，但实际场景中，有以下一些情况：
- 当网页首次被打开的时候，浏览器设置网页的可视区域（viewport），并调用计算布局的方法。
- 网页动画会触发布局计算。
- JavaScript代码通过CSSOM等直接修改样式信息，它们也会触发WebKit重新计算布局。
- 用户的交互也会触发布局计算，例如：翻滚网页。
布局计算相对是比较耗时间的，更糟糕的是，一旦布局发生变化，WebKit就需要后面的重新绘制操作。另一方面，减少样式的变动而依赖现在HTML5的新功能可以有效地提高网页的渲染效率。
6.4 布局测试
布局测试不仅测试布局，还包括渲染等综合渲染结果。
基本测试工作方式是：预先准备大量用于单元测试的网页和期望的渲染结果，然后用webkit编译出来的DumpRenderTree来测试网页，把得到的结果和期望的结果进行对比，以检查渲染的正确性。
网友评论