浏览器渲染页面前需要先构建 DOM 树和 CSSOM 树。而 DOM 树 和 CSSOM 树是基于 HTML 文件和 CSS 文件构建的。
文档对象模型的构建过程。
字节(Bytes) => 字符(Characters) => 令牌(Tokens) => 节点(Nodes) => 文档对象模型(DOM)
<html>
、<body>
,以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。body
对象的父项,body
是 paragraph
对象的父项,依此类推。整个流程的最终输出是我们这个简单页面的文档对象模型 (DOM),浏览器对页面进行的所有进一步处理都会用到它。
浏览器每次处理 HTML 标记时,都会完成以上所有步骤:将字节转换成字符,确定令牌,将令牌转换成节点,然后构建 DOM 树。这整个流程可能需要一些时间才能完成,有大量 HTML 需要处理时更是如此。
与处理 HTML 时一样,我们需要将收到的 CSS 规则转换成某种浏览器能够理解和处理的东西。因此,我们会重复 HTML 过程,不过是为 CSS 而不是 HTML:
字节(Bytes) => 字符(Characters) => 令牌(Tokens) => 节点(Nodes) => CSS 对象模型(CSSOM)
CSS 字节转换成字符,接着转换成令牌和节点,最后链接到一个称为 CSS 对象模型(CSSOM)的树结构内:
CSSOM 为何具有树结构?为页面上的任何对象计算最后一组样式时,浏览器都会先从适用于该节点的最通用规则开始(例如,如果该节点是 body
元素的子项,则应用所有 body
样式),然后通过应用更具体的规则(即规则向下级联)以递归方式优化计算的样式。
还请注意,以上树并非完整的 CSSOM 树,它只显示了我们决定在样式表中替换的样式。每款浏览器都提供一组默认样式(也称为 User Agent 样式),即我们不提供任何自定义样式时所看到的样式,我们的样式只是替换这些默认样式(例如 默认 IE 样式)。