当我们加载页面时 CSS 会发生什么？

在加载页面时，浏览器会解析 HTML 和 CSS ，并将它们应用于页面中的元素。

CSS 解析

首先，浏览器会根据 HTML 中的 link 和 style 标签获取 CSS 文件，或者直接读取内联 CSS 样式。然后，它会解析 CSS 文件并构建出 CSS 对象模型（CSSOM），它代表了样式规则和它们的属性。

在构建 CSSOM 的过程中，浏览器会执行以下步骤：

1. 分词（Tokenization）：将 CSS 代码分解成词汇单元，如选择器、属性和值等。

2. 解析（Parsing）：将 CSS 词法单元转换为能够被计算机处理的结构，如表示 CSS 规则的对象模型。

3. 构建 CSSOM：根据 CSS 规则构建 CSS 对象模型，它由一系列层级结构的节点组成。

CSS 应用

一旦浏览器构建了 CSSOM，它就会根据 CSSOM 和 HTML 文档一起渲染页面。具体来说，浏览器会执行以下步骤：

1. 构建文档对象模型（DOM）：将 HTML 代码分解为一系列层级结构的节点，如元素、文本和属性等。

2. 执行布局（Layout）：根据 DOM 和 CSSOM 中的样式信息计算出每个元素在屏幕上的位置和大小。

3. 绘制（Paint）：将元素渲染到屏幕上。

总结

在加载页面时，CSS 会被解析、构建 CSSOM 和应用。这些步骤是浏览器解析 HTML 和 CSS ，并将它们应用于页面中的元素的必要过程。对于程序员而言，了解这些过程有助于优化网页性能和调试 CSS 问题。