<link rel="stylesheet"> 会阻塞 HTML 解析，因浏览器必须等待 CSSOM 构建完成才能合成渲染树；即使本地缓存、仅1KB，仍需验证头信息并解析，造成确定性阻塞。
link rel="stylesheet" 为什么一出现就卡住 HTML 解析
因为浏览器必须等它完成 CSSOM 构建，才能和 DOM 合成渲染树——这不是网络延迟导致的“慢”，而是强制行为。即使 main.css 只有 1KB 且命中本地缓存，仍要验证 Cache-Control 头、解析内容，产生确定性阻塞。
常见错误现象包括：
- 首屏白屏超过 1s，Performance 面板中
Parse HTML被Recalculate Style长时间挂起 - Network 面板里 CSS 的
Initiator列显示为parser，说明是同步拉取 - 多个
<link rel="stylesheet">串行加载：第二份 CSS 的下载必须等第一份 CSSOM 构建完才开始
link 标签放错位置的三种典型后果
<link> 必须放在 <head> 内，否则样式可能不生效；但放对位置还不够，顺序和属性同样关键。
- 写在
<meta charset>之前：部分浏览器（如旧版 Safari）会忽略charset声明，导致乱码 - 写在
<style>之后但未加media：浏览器按media="all"处理，视其为关键资源，无法跳过 - 写在
<body>中：解析器需回退重排，触发重解析，DevTools 里能看到HTML Parser多次中断
preload + onload 异步加载非关键 CSS 的实操要点
用 <link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'"> 可绕过默认阻塞，但容易漏掉关键细节。
立即学习“前端免费学习笔记（深入）”；
-
as="style"必须显式声明，否则降级为低优fetch，预加载失效 -
onload回调里建议加this.onload=null，避免重复执行 - 必须配
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>，否则无 JS 环境直接丢失样式 - 不能用于含
@import的 CSS 文件——@import会在内部触发串行请求，破坏异步意图
内联关键 CSS 的边界在哪
内联不是把 main.css 全拷进去，而是提取首屏像素生成所需的最小规则集合。体积失控反而拖慢 TTFB 和初始解析。
- 判断“关键”的真实方法：禁用网络后打开页面，能显示的部分对应的就是关键 CSS
- 伪类（
.btn:hover）、媒体查询（@media (max-width: 768px)）、动态 class（.is-loading）极易漏掉，必须用critters或purgecss + html-webpack-plugin自动提取 - gzip 后建议 ≤14KB；超过后 HTTP/2 多路复用优势显现，外链更优
- 含
@import的 CSS 绝对不能内联——它会触发同步网络请求，立刻退化为外部阻塞加载
最常被忽略的是：即使你把所有 CSS 都改成 preload，只要没处理好 media 属性或漏掉 noscript 回退，就仍可能在特定设备或环境下回归阻塞。优化不是改一个标签，而是让每个资源加载语义与渲染阶段对齐。
