浏览器将CSS转化成DOM后是如何运作的？

前端

2023-09-24 13:43:21

浏览器每收到一段html的文本之后，就会把它序列化成一个个的tokens，依次遍历这些token，实例化成对应的html结点并插入到DOM树里面。在这一篇文章中，我将介绍第二步Style的过程，即CSS的处理。

一、加载CSS

上文中，rel指明了它是一个样式文件。加载CSS属于异步加载，不会阻塞页面的加载。

二、词法解析

这一步会把代码文本解析成一个个的Token，这个步骤和html的词法解析类似。具体的解析规则如下：

空白符直接跳过。
如果是开大括号，直接当作Token，下同。
如果是闭大括号，直接当作Token，下同。
如果是逗号，直接当作Token，下同。
如果是分号，直接当作Token，下同。
CSS有一部分的字符串需要加引号，一部分的字符串不需要加引号。对于加引号的部分，如果引号前后都是普通字符（非空白符、非换行符、非转义符），可以直接当作字符串Token。
如果遇到url的话，直接当作字符串Token，引号前后都必须是空格符或换行符或分号。
上述没有匹配的，直接当作普通字符Token。

词法解析完之后，得到的是一个个的Token，接下来要做的是把Token重新组成一个个的规则。

三、语法解析

具体规则如下：

一个完整的规则需要选择器和花括号里面的声明块组成。
花括号里面的内容由若干声明组成，声明以分号结尾，以声明的名值对组成。
花括号里面的声明也是有规则的，比如在声明语句的右边如果是反斜杠、左引号、右引号、反引号、问号、逗号这些字符，那必须加引号。

语法解析完成后，即得到了一个规则，规则是包括选择器和声明块的。但是我们最终需要的不是规则，而是要把规则翻译成一颗DOM结构，DOM结构上会有很多样式对应的属性值，而这些值来自这个规则里的声明块。

四、计算DOM上的值

对于DOM的每一个结点，它会有很多的属性，比如width，height，这些属性都可以被CSS的属性值所覆盖，比如width：100px， height:100px，这时候结点的宽度和高度就变成100px。因此，首先需要遍历结点树，然后为每一个结点找出匹配的选择器，找到多个匹配选择器之后，再从中找出匹配度最高的一个，然后按照匹配的选择器里面的声明块里的值计算结点的最终的CSS值。