外部CSS必然阻塞HTML解析和首屏渲染，解决方向是关键部分优先、非关键部分延迟；将<link>移至<body>底部反而引发FOUC、JS计算错误及缓存失效；rel="preload"+onload切换rel或media="print"+onload是可控方案，需严格遵循as="style"、href一致、onload立即赋值及noscript兜底等要求。
外部 CSS 一定会阻塞 HTML 解析和首屏渲染，这不是 bug，是浏览器保障样式与 DOM 同步的必要机制；解决方向不是“去掉它”，而是让关键部分快、非关键部分晚。
为什么把 <link> 挪到 <body> 底部反而更糟
HTML 解析器是顺序执行的，遇到 <link rel="stylesheet"> 就会停在那一行，不管它在 <head> 还是 </body> 前——DOM 构建完但没样式，用户看到 FOUC；JS 调用 getComputedStyle() 或 offsetHeight 可能读错值；旧版 Safari 还可能触发重排。
Webpack/Vite 输出的 <link> 若被手动移到底部，还会破坏资源优先级和缓存复用逻辑。
rel="preload" + onload 切换 rel 是最可控方案
它让浏览器提前下载 CSS，但延迟解析与应用，适合你明确知道某份 CSS 会在交互后立即用到（比如深色主题 dark.css 或弹窗组件 modal.css）。
立即学习“前端免费学习笔记（深入）”；
-
as="style"必须写，否则 Chrome/Firefox 不识别为样式资源，不提升优先级，甚至忽略预加载 -
href值要和最终<link rel="stylesheet">完全一致（含 query 参数），否则缓存不复用 -
onload回调里必须立刻执行this.rel='stylesheet'，否则资源下载完也白搭 - 必须加
this.onload=null，避免 Safari 在缓存命中时重复触发 - 务必配
<noscript><link rel="stylesheet" href="..."></noscript>，覆盖禁 JS 场景和 Safari 11.1 以下
错误写法：<link rel="preload" href="main.css" as="style"> —— 这行只“偷偷下个文件放着”，对渲染零影响。
media="print" + onload 是零 JS 兼容兜底方案
它利用浏览器对 media="print" 的懒处理机制：下载不阻塞 HTML 解析，也不参与初始 CSSOM。IE11 都能跑通，适合 SEO 页面或 JS 禁用环境。
- 写法必须严格：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'; this.onload=null;"> -
onload中必须立刻执行this.media='all'，否则样式永不生效 - 别用
media="(min-width: 9999px)"这类假条件，2026 年起部分浏览器已拒绝识别 - IE 不支持
onload，需 fallback 到onreadystatechange（loadCSS库已内置）
真正容易被忽略的是：非关键 CSS 里如果含 @font-face、大图背景或 @import，这些子资源会在样式挂载后才拉取，照样挤占首屏带宽；动态创建 <link> 时，onload 在 Firefox 69 之前和部分 Android WebView 中根本不可靠。
