浏览器生成CSSOM的机制及CSSOM与DOM同步生成的疑问

嘿，这个问题问到点子上了——我当年刚啃浏览器渲染流程的时候，也被CSSOM和DOM的“同步关系”搞晕过，今天给你拆解明白：

第一步：CSSOM到底是怎么生成的？ #

浏览器生成CSSOM的过程和DOM完全独立，分三步走：

• 捞取CSS资源：从HTML里的<style>标签、内联style属性，或者<link>引用的外部CSS文件里拿到代码（外部CSS会先发起请求下载，现代浏览器会做预加载优化，不会傻等）。
• 解析成语法树：CSS解析器把一堆文本转换成AST（抽象语法树）——简单说就是把p { color: red; }这种人类写的代码，拆成“选择器是p”“属性是color”“值是red”这种计算机能识别的结构化数据。
• 构建CSSOM规则库：基于AST生成CSSOM，这玩意儿本质是个样式规则的映射表，每条规则只记录「什么样的元素能匹配我」和「我要给匹配的元素加什么样式」，完全不关心当前DOM里有没有这些元素。

关于「CSSOM与DOM同步生成」的误解 #

你看到的“同步生成”说法，其实指的是浏览器会并行启动DOM和CSSOM的解析流程，而不是说两者绑定在一起构建：

• 浏览器一边解析HTML字符串生成DOM树，一边同时解析拿到的CSS代码生成CSSOM——这俩过程各干各的，互不相干。CSSOM根本不需要“知晓DOM结构”，它只是先把所有样式规则存好而已。

那为什么最终看起来CSSOM像是“附加了样式的DOM树”？因为真正把两者绑定的是**渲染树（Render Tree）**的构建阶段：
当DOM和CSSOM都准备好（现代浏览器会做渐进式渲染，不用等全量就绪），浏览器会遍历DOM树的每个节点，去CSSOM里扒拉所有能匹配这个节点的规则，把这些规则合并计算出节点的最终样式（比如多个选择器匹配同一个元素时，按优先级确定最终样式），然后把带样式的节点放进渲染树——这才是你看到的“DOM+样式”的结构。

为啥不按CSS生成对应的结构？ #

这就搞反逻辑啦：

• DOM是页面的骨架和内容，决定了页面上有哪些元素、是什么层级；CSS只是给这些骨架化妆，负责元素的外观。
• 举个例子：你写了.card { border: 1px solid #ccc; }，CSSOM里只会存这一条规则，不管HTML里有1个还是100个.card元素。如果反过来按CSS生成结构，那HTML的意义何在？总不能让CSS来决定页面要显示什么内容吧？

你提到的“不管HTML结构怎么变，样式依然能用”也正好印证了这点：CSSOM存储的是规则集合，不是绑定特定DOM节点的结构——只要某个元素能匹配CSS里的选择器，不管它是一开始就在HTML里，还是后来JS动态添加的，CSSOM里的规则都会被应用到它身上。

内容的提问来源于stack exchange，提问作者JackieWillen