css引擎的工作流程

moz hacks 学习笔记

css引擎是如何工作的：

解析（parse）

把相关的文件解析成浏览器可以理解的对象，包括DOM对象。DOM可以知道页面的结构。包括父子关系，但是它不知道这些元素看起来是什么样子的。

parse

样式（style）

解析出所有元素看起来应该是什么样子的。对每一个DOM节点来说，css引擎计算出那些css规则进行应用，然后为每一个DOM节点计算出样式。

style

布局（layout）

计算出每一个节点的尺寸和在屏幕的位置。屏幕上的每一个元素都被创立在一个个的区块中。但是区块并不代表一个DOM节点，一个区块可能也代表一行文字。

layout

绘制（paint）

在不同的图层绘制不同的区块。我觉得这像旧时代用洋葱皮层纸手绘动画。这使得只改变相应涂层的样式，而不影响到其他图层成为可能。

paint

渲染（render）

将这些不同的图层全部折叠起来，变成一个图片，并最终渲染到屏幕上。

render

---

这就意味着，当开始计算这些样式的时候，css引擎已经有了两样东西:

• 一个完整的DOM树
• 页面完整的样式规则