CSSOM是CSS代码转换成的树状结构，用于浏览器解析和应用样式。它是Web渲染路径的关键部分，与DOM一起工作，确保页面正确显示。CSSOM的构建和加载在页面呈现前完成，影响页面加载速度。了解CSSOM有助于优化网站性能和理解浏览器渲染过程。
在第一个HTTP请求和网页的最终交付之间发生了很多事情。 数据传输和浏览器的渲染管道需要许多不同的技术，其中之一就是CSS Object Model或CSSOM 。
CSS对象模型采用CSS代码，并将每个选择器呈现为树状结构 ，以便于解析。 对于开发人员来说，完全理解这个概念并不是至关重要的，但是如果您想了解更多有关浏览器如何将代码呈现到正常工作的网站中的知识，这是一个有价值的话题。
在本文中，我将介绍CSS对象模型的基础知识，并向您展示其工作原理。
什么是CSSOM？
术语CSS对象模型描述了所有CSS选择器的映射以及每个选择器的相关属性 。 这些样式可以是根元素，也可以具有嵌套子元素。
CSSOM与HTML中的DOM非常相似，HTML代表文档对象模型。 两者都是关键渲染路径的一部分，这是正确渲染网站必须采取的一系列步骤。 所有这些过程都是在后台自动发生的。
那么CSSOM为什么重要？ 它是浏览器用来在网页上正确呈现CSS样式的地图。 没有简单的方法告诉计算机.main-content div中的所有段落都必须具有额外的行高。
解决方案是CSS对象模型，该模型可以映射 CSS代码中的所有元素和属性 。
CSSOM使浏览器更容易在页面上呈现样式 。 整个过程是非常技术性的，但是值得对该过程进行一些了解，尤其是在构建网站时。
这个怎么运作
所有Web浏览器都广泛使用 DOM和CSSOM来解释和呈现网页。 下图来自Google Developers Web基础指南 ，并说明了如何在Web浏览器中呈现DOM 。
在DOM和CSSOM中，所有信息都从字节转换为数字地图 ，这些数字地图呈现了Web文档中的每个元素。 该过程如下：
- 浏览器下载网页HTML 。
- 在处理HTML时，解析器可能会碰到引用外部样式表的link元素。
- 然后，使用CSS对象模型规范将此CSS样式表解析为地图 。
- 然后可以将生成的代码应用于DOM中的元素 。
所有这一切都非常Swift地发生，并且与每个单页请求一起发生。 下面的另一个图展示了CSSOM的示例树结构 。
注意图中的某些属性如何具有较浅的灰色字体颜色。 这些属性是从父级继承的 。 由于主体具有特定的字体大小，因此除非被覆盖，否则主体中的所有元素也会获得该字体大小。
HTML和CSS字符串被转换为令牌 ，然后浏览器可以将其理解为节点 。 这些节点就像树结构中的对象一样，它们定义了整个页面的构造方式。
CSSOM和DOM是完全独立的数据模型 ，因此它们是彼此分开解析的 。 但是它们都具有相似的树结构 ，并且具有相同的目的：为浏览器提供一种结构，以呈现和标识页面上的不同元素。
为什么Web开发人员应该关心
由于所有渲染都发生在后端 ，因此您实际上不必担心CSSOM树。 但是了解它是如何工作的可能很有用。
要记住的一件事是，在显示Web页面之前， 必须完全加载CSSOM ，因为它将定义页面上每个元素的外观。 如果页面在CSSOM之前加载，它将首先显示为纯HTML，然后在几秒钟后显示样式。
浏览器特别避免这种情况，因为这会使最终用户感到困惑。 值得注意的是CSSOM 不能被缓存 ； 必须在每个页面上重新创建它。
可以缓存实际CSS文件以便更快地加载资产，但是在浏览器中呈现页面始终需要运行CSSOM解析器 。 这也意味着JavaScript可能会对呈现和性能产生负面影响。
我强烈建议阅读本文，以了解有关外部CSS / JS资源及其加载时间的更多信息。
优化网站的最佳方法是精心设计自然的资源级联资源， 这些资源会串联加载 。
可以使用JavaScript操作CSSOM，因为从技术上讲它是JS API 。 但是与JavaScript DOM操作相比，它并没有多大目的。
了解CSSOM的更大原因是进一步教育自己有关网站的实际工作方式。
我们认为有很多事情可以使Internet平稳运行。 当您对整个过程有更多了解时，您可以直观地看到整个过程如何组合在一起，并希望对万维网的存在有所了解。
进一步阅读
我希望这个介绍可以使您对CSS对象模型及其对网页的影响有个扎实的思路。 CSSOM中没有太多要操纵的东西 ，因此它与DOM有所不同。
但是，它仍然是Web开发中的关键技术，应该阐明浏览器渲染的主要方面。
还有许多其他资源讨论CSSOM及其工作方式。 如果您想了解更多信息，请推荐以下文章：
扫一扫
2408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
