CSS必须放在head里是浏览器渲染机制决定的硬性性能需求：放body底部会导致白屏更久、整页闪现和大规模重排；放head中则支持渐进渲染、增量重排与首屏快速呈现。
CSS 放在 <head> 里不是“习惯”或“规范要求”，而是浏览器渲染机制决定的硬性性能需求：不放这里，页面会白屏更久、重排更频繁、首屏体验更差。
浏览器渲染流水线卡在 CSSOM 构建阶段
HTML 解析过程中，一旦遇到 <link rel="stylesheet"> 或 <style>，解析会暂停，直到 CSS 文件下载、解析完成并构建出 CSSOM（CSS 对象模型）。这是阻塞行为——因为浏览器必须知道每个元素“长什么样、占多大位置”，才能安全地构建渲染树（Render Tree）。
如果 CSS 放在 <body> 底部：
- HTML 解析先跑完，DOM 树建好了，但没有 CSSOM，渲染树无法生成 → 页面持续白屏
- 等 CSS 终于加载完，浏览器要一次性把所有已解析的 DOM 节点和新 CSSOM 合并计算 → 触发一次大规模、不可控的初始重排
- 用户看到的是“全黑→突然整页闪现”，而不是“从上到下渐进渲染”
放在 head 中能触发增量式重排与重绘
当 CSS 提前就位，浏览器可以在解析 HTML 的同时，对已解析的 DOM 片段逐步应用样式、构建渲染树、分块绘制（paint）。
立即学习“前端免费学习笔记（深入）”；
这意味着：
- 首屏关键内容（比如导航栏、标题）能更快出现在屏幕上，哪怕整个页面还没加载完
- 后续 DOM 插入或样式变更时，重排范围更小（只影响局部），不会牵连整页
- 避免因“延迟样式注入”导致的 layout thrashing（布局抖动）——比如 JS 在 DOM 加载后立刻读取
offsetHeight，再改style.width，反复触发重排
哪些情况会让 head 里的 CSS 失效甚至加重重排
放对位置只是第一步，以下操作会抵消甚至逆转收益：
- 使用
@import在 CSS 文件内引入其他样式表：它会异步加载，等同于把 CSS 拖到 body 底部的效果 - 在
<head>中动态插入<style>或通过 JS 创建<link>：仍会阻塞，但可能错过预加载器（preload scanner）的优化，且容易引发多次小重排 - CSS 文件体积过大（> 100KB）：即使位置正确，下载+解析耗时仍会导致白屏延长；应拆分关键 CSS（critical CSS）内联，非关键部分异步加载
- 在 head 中写大量低效选择器（如
div div div p span）：虽不触发重排，但拖慢 CSSOM 构建速度，间接拉长渲染启动时间
真正关键的不是“CSS 是否在 head”，而是“浏览器能否在渲染第一行像素前，拿到足够描述首屏样式的 CSSOM”。位置只是最直接的控制手段，后面所有优化都建立在这个前提之上。
