CSSOM

定义

CSSOM（CSS Object Model，CSS 对象模型）是浏览器解析 CSS 后在内存中构建的对象表示，将样式表、规则与声明映射为可编程接口，与 DOM 相对应。

构成

• document.styleSheets 暴露所有样式表（CSSStyleSheet）；
• 每个样式表包含 CSSRule 列表，可通过 insertRule、deleteRule 动态增删；
• getComputedStyle 返回元素的最终计算样式；
• 构造式样式表（Constructable Stylesheets）允许脚本直接创建样式表并共享给 Shadow DOM。

渲染中的角色

CSSOM 构建完成前浏览器无法确定元素样式，因此 CSS 被视为渲染阻塞资源；同时,由于后续脚本可能查询样式，CSS 加载还会阻塞其后 JavaScript 的执行。CSSOM 与 DOM 合并生成渲染树，进入布局与绘制。

应用

CSS-in-JS 库的运行时注入、主题动态切换、读取元素实际尺寸等操作都建立在 CSSOM 之上；理解其阻塞特性也是优化首屏渲染的前提。