第一章：CSS 不只是样式表，它是浏览器渲染流程的核心

我们常把 CSS 当作“给 HTML 穿衣服”的工具——改个颜色、调个边距、做个圆角。但如果你只看到这一层，就错过了它最强大的本质。

CSS 不是装饰，而是指令。
它是你与浏览器渲染引擎之间的操作协议，直接驱动着从代码到像素的整个过程。每一行 CSS，都在向浏览器发出明确的计算、布局、绘制与合成指令。

要真正掌握 CSS，必须理解它在浏览器中的生命周期。这个过程，就是现代 Web 性能优化的底层逻辑：

解析 → 计算 → 布局 → 绘制 → 合成

---

1. 解析（Parse）：CSSOM 的构建

当浏览器下载完 CSS 文件，它不会直接应用样式，而是先进行解析，构建 CSSOM（CSS Object Model）。

这个过程和 DOM 构建类似，但更复杂：浏览器需要解析选择器优先级、处理 @media 查询、合并重复规则。更关键的是，CSSOM 是阻塞渲染的——直到它构建完成，页面才能进入下一步。

• @import 会额外发起网络请求，造成链式阻塞。
• 内联 <style> 标签虽快，但过大会拖慢主线程。
• 复杂选择器（如 body div:nth-child(2n+1) > p[class*="intro"]）需要更长的匹配时间。

真相：你写的每一个选择器，都是浏览器必须执行的一段“匹配程序”。

---

2. 计算（Style Recalculation）：样式决议

有了 DOM 和 CSSOM，浏览器开始为每个元素计算最终样式。这一步不是简单地“应用样式”，而是解决所有冲突：

• 多个规则匹配同一个元素时，谁的优先级更高？
• 媒体查询是否生效？
• 自定义属性（CSS Variables）的值是什么？

这个过程称为 Re-Resolve Styles。一旦你通过 JavaScript 修改了类名、内联样式或 CSS 变量，浏览器就必须重新计算相关元素的样式。

• 修改 classList 可能触发全页面样式重算。
• 深层嵌套的 BEM 命名（如 .header__nav__item--active）虽语义清晰，但选择器匹配成本高。
• 使用原子化 CSS（如 Tailwind）能将样式计算降至最低——每个类只对应一条规则。

---

3. 布局（Layout）：确定几何位置

也叫“重排（Reflow）”。浏览器此时知道每个元素的样式，但还不知道它们该放在哪里。

• display: flex 触发 Flexbox 布局算法。
• float 启用浮动布局模型。
• position: absolute 让元素脱离文档流，减少布局影响范围。

任何改变元素几何属性的操作都会触发布局：

• width, height, margin, padding
• 读取 offsetTop, clientWidth 等布局属性（强制同步布局）

布局是开销最大的步骤之一，尤其在复杂页面中。一个父元素的尺寸变化，可能导致整个子树重新布局。

---

4. 绘制（Paint）：填充像素

布局完成后，浏览器知道每个元素的位置和大小，接下来是绘制——将元素拆分成多个图层（Layer），在内存中生成位图。

绘制操作包括：

• 背景、边框、文本、阴影的渲染
• border-radius, box-shadow, filter 等视觉效果

高成本操作：

• 复杂渐变、模糊滤镜（filter: blur()）
• 大范围重绘（如给 body 添加 box-shadow）

绘制通常在多个线程中并行执行，但依然可能成为性能瓶颈，尤其是在低端设备上。

---

5. 合成（Composite）：图层叠加

最后一步，浏览器将各个图层按照正确的顺序合成成最终图像，提交给 GPU 渲染到屏幕上。

关键概念：合成层（Composite Layer）
当一个元素被提升为独立合成层，它的重绘不会影响其他元素。

如何创建合成层？

• transform, opacity
• will-change: transform
• perspective

最佳实践：对动画元素使用 transform 和 opacity，因为它们只触发合成，跳过布局和绘制，性能最高。

/* 高性能动画 */
.animate {
  will-change: transform;
  transform: translateX(100px);
}

/* 低性能动画（触发布局） */
.bad-animate {
  left: 100px; /* 触发重排 */
}

---

结语：CSS 是性能的开关

你写的每一行 CSS，都在决定浏览器执行哪条路径。
选择 transform 还是 left？使用原子类还是深层选择器？这些不是代码风格问题，而是性能架构决策。

从这一章开始，请忘记“CSS 只是美化页面”的旧观念。
它是你控制浏览器渲染引擎的遥控器。
用得好，丝滑流畅；用得不好，卡顿掉帧。

下一章，我们将深入“选择器性能：从 O(n) 到 O(1) 的优化之路”。