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