从 CSS 到屏幕：揭秘浏览器渲染背后的小秘密

上文介绍了关于 CSS 属性的计算过程，本文介绍浏览器从 CSS 代码到最终的样式渲染过程中各个阶段的具体细节。

📢：CSS 相关的面试题哦！

1. 解析 (Parsing)

解析是浏览器处理 CSS 的第一个阶段。浏览器会从 CSS 文件或 <style> 标签中读取规则，将这些 CSS 规则转化为内部的 CSSOM（CSS 对象模型）结构。

css">/* 样式表 */
body {font-size: 16px;color: black;
}
p {font-size: 1.5em;color: red;
}

在解析过程中，浏览器将上述 CSS 转换为一个可操作的对象模型（CSSOM），用于后续的计算。

注意事项：

1、无效的 CSS

如果浏览器遇到无法理解的 CSS 规则（例如写错了属性名），它会跳过该规则，并继续处理其他部分。例如 🌰，以下代码中的 colors 是一个无效的属性名，它将被忽略：

css">body {font-size: 16px;colors: red; /* 无效的 CSS 属性 */
}

2、@import 规则

如果在样式表中使用 @import 导入其他样式表，浏览器会先解析导入的文件，再继续解析主文件的其他内容。过多的 @import 可能导致性能问题，因为每个样式表都需要单独请求。

2. 样式层叠 (Cascade) 和继承 (Inheritance)

解析完所有的 CSS 规则后，浏览器会根据 CSS 的层叠规则和继承机制，计算每个元素的最终样式。

详细见：全面介绍 CSS 属性值计算 —— 掌握它就了解大部分 CSS-CSDN博客

3. 样式计算 (Style Calculation)

经过层叠和继承，浏览器会为每个元素计算出具体的样式。这个阶段主要是将相对值转换为绝对值。

百分比 %：许多属性可以使用百分比值（如width: 50%）。这些值通常相对于父元素的大小进行计算。

单位转换：em 和 rem 是相对单位。em 基于父元素的字体大小，而 rem 基于根元素（通常是 html标签）的字体大小。

自动计算：像 auto 这样的值（例如 margin: auto）会根据元素的上下文动态计算，例如用于居中对齐。

4. 布局计算 (Layout)

在计算出样式后，浏览器开始计算页面中每个元素的布局。这一步骤有时也称为“重排 (Reflow)”或“布局 (Layout)”。

🌰

<!DOCTYPE html>
<html lang="en">
<head><style>.container {width: 80%;margin: auto;}</style>
</head>
<body><div class="container">这是一段文本。</div>
</body>
</html>

在这个例子中，container 的 width 是页面宽度的 80%，而 margin: auto 会让它水平居中。浏览器需要计算容器的具体宽度和位置，然后应用到布局中。

注意事项：

1、重排：当页面中元素的大小、位置或几何结构发生变化时，浏览器需要重新计算布局。这会导致性能问题，特别是在页面有很多元素时。

2、避免强制同步布局：频繁读取和写入布局信息（例如频繁使用 offsetWidth、offsetHeight）会触发浏览器的重排，从而降低页面性能。

5. 绘制 (Painting)

在布局阶段完成之后，浏览器会开始将样式和颜色绘制到屏幕上。绘制是将布局信息转化为可见像素的过程。

🌰

css">div {background-color: lightblue;border: 1px solid black;
}

浏览器会在 div 元素的背景上绘制浅蓝色，并在元素的边缘绘制黑色边框。

注意事项：

1、重绘 (Repaint)：当元素的颜色、背景或边框变化时，浏览器会触发重绘。相比于重排，重绘的开销相对较小。

2、独立图层 (Layers)：有时浏览器会为某些元素创建独立图层，特别是涉及 CSS 3D 变换、透明度变化或动画时。独立图层可以优化绘制性能，但也会消耗额外的内存。

6. 合成 (Compositing)

绘制完成后，浏览器会将多个图层合成为最终的页面显示。这个阶段称为合成。

🌰

css">div {transform: translateX(50px);opacity: 0.8;
}

transform 和 opacity 会触发浏览器的 GPU 合成阶段，而不会引发重排和重绘。GPU 合成可以提升页面的渲染性能。

注意事项：

1、GPU 加速：浏览器会对某些 CSS 动画和变换（如 transform 和 opacity）进行硬件加速。如果过度使用这些属性，可能会导致 GPU 负载过大。

2、图层的数量：创建过多的独立图层会带来额外的内存开销。

7. 性能优化建议

1、减少重排和重绘：避免频繁操作 DOM 或改变布局。对于复杂的布局操作，可以使用 requestAnimationFrame。

2、合理使用 GPU 加速：transform 和 opacity 是能够触发 GPU 加速的属性，可以用来优化动画性能。避免过度使用 GPU 加速，导致性能瓶颈。

3、异步加载样式：可以使用 media 属性或 preload 来优化样式表的加载顺序，避免阻塞渲染。

总结

浏览器从 CSS 代码到最终样式渲染的过程经过了多个阶段，包括解析、样式层叠与继承、样式计算、布局计算、绘制和合成。理解这些过程有助于我们优化页面性能和构建网页应用。