<link rel="stylesheet"> 会阻塞 HTML 解析和页面渲染，以避免 FOUC；应置于 <head> 靠前位置，配合 preload（需成对使用）和关键 CSS 提取优化首屏性能。
link rel="stylesheet" 会阻塞 HTML 解析和页面渲染
浏览器遇到 <link rel="stylesheet"> 就会暂停 HTML 解析，等 CSS 下载、解析完成并构建好 CSSOM 后才继续。这不是 bug，是规范行为——为避免 FOUC（无样式内容闪现），它必须阻塞渲染。
这意味着：如果把 <link> 放在 <head> 底部，或者 CSS 文件体积大、服务器响应慢，首屏内容就会延迟显示，用户看到白屏或乱排版的时间变长。
实操建议：
- 确保
<link rel="stylesheet">在<head>中尽可能靠前（紧贴<title>后） - 避免在
<head>里混入大量同步 JS（如未加defer的<script>），否则会进一步拖慢 CSS 加载时机 - 用 Chrome DevTools 的 **Network** 面板看
waterfall图：关注DOMContentLoaded和Load时间点，CSS 请求是否卡在前面、是否长时间处于Stalled或Waiting (TTFB)
preload 关键 CSS 不等于应用样式
<link rel="preload" as="style" href="critical.css"> 只是提前下载，不会触发解析或应用。它不改变 CSSOM 构建时机，也不能替代 rel="stylesheet"。
立即学习“前端免费学习笔记（深入）”；
常见误操作是只写 preload，忘了配一个真正的 rel="stylesheet"，结果资源下了，但页面还是没样式。
实操建议：
- 必须成对使用：
<link rel="preload" as="style" href="critical.css">+<link rel="stylesheet" href="critical.css"> - 不要对整站 CSS 做 preload：只对首屏必需的规则（比如按钮、导航、标题）提取为
critical.css，其余用普通rel="stylesheet"或异步加载 - 注意
as="style"不可省略，漏掉会导致浏览器按as="fetch"处理，优先级降级
多个 link 标签的顺序影响样式层叠和加载竞争
CSS 规则按 <link> 出现顺序层叠，后加载的同名选择器会覆盖前面的；但加载本身是并发的，浏览器不保证谁先完成。
例如：<link href="base.css"> 和 <link href="theme.css"> 并发请求，若 theme.css 先返回，它里面定义的 .btn 就可能被还没加载完的 base.css 覆盖（取决于解析顺序），造成样式抖动或不一致。
实操建议：
- 关键基础样式（重置、工具类、通用组件）放最前，主题/覆盖样式放后
- 避免跨域或 CDN 域名过多：每个新域名都要额外 DNS 查询和 TCP 握手，拖慢整体 CSS 加载启动时间
- 用
media属性做条件加载（如media="print"）可让非关键 CSS 不阻塞主流程，但注意media值要合法，写错（如media="screen and (min-width: 768px)"拼错括号）会导致该<link>被忽略
本地双击打开 HTML 时路径和协议导致的假性“加载成功”
用 file:// 协议双击打开 HTML 时，href="css/button.css" 可能看似生效，但一部署到 http:// 或 https:// 服务就 404——因为 file:// 下路径解析松散，而 HTTP 服务严格按 URL 基准计算。
更隐蔽的是：某些浏览器在 file:// 下会静默忽略 rel="stylesheet" 缺失，但仍尝试加载 CSS，造成“本地能用，线上全白”的幻觉。
实操建议：
- 本地开发一律用轻量 HTTP 服务：Python 用户跑
python -m http.server，前端工程师用vite preview或npx serve - 检查 Network 面板中每个 CSS 请求的
Initiator列，确认发起者是目标 HTML，且状态码是 200 而非 0（file://下常见） - 根相对路径
href="/css/button.css"是最稳的选择，但前提是你的服务部署在域名根目录；若部署在子路径（如/blog/），就得配合构建工具重写 publicPath，不能硬编码/
真正容易被忽略的点是：CSS 加载性能不是单看“有没有加载”，而是看“何时开始加载”“是否参与阻塞”“是否与关键渲染路径对齐”。哪怕所有 <link> 都写对了，一个 500KB 的 all.css 放在 <head> 里，照样会让首屏等上几百毫秒。
