非关键 CSS 不可挪至 <body> 底部异步加载，否则引发 FOUC、样式错乱及 JS 异常；正确方案是 rel="preload" + onload 切换或 media="print" 兜底，并严格遵循 href 一致、无首屏影响、noscript 备份三大约束。
非关键 CSS 不能挪到 <body> 底部“异步加载”——这么做既不生效，还会引发 FOUC、样式错乱甚至 JS 执行异常。
为什么把 <link rel="stylesheet"> 放到 </body> 前面是错的
浏览器遇到 <link rel="stylesheet"> 就会暂停 HTML 解析，直到 CSSOM 构建完成。这个行为与位置无关：哪怕它在 </body> 前最后一行，只要 DOM 解析器还没走到那，就仍会阻塞后续解析；一旦走到，照样卡住。更糟的是，此时 DOM 已基本构建完毕，但渲染树（Render Tree）仍无法生成，用户看到的是无样式的完整 DOM（FOUC），且后续依赖样式的 JS（如 getComputedStyle、offsetHeight）可能读到错误值。
- DOM 解析不会因
<link>在底部就“绕过”它——HTML 解析器是顺序执行的 -
<link>在<body>内时，部分浏览器（如旧版 Safari）会触发重排或样式重计算，导致布局抖动 - Webpack/Vite 等构建工具输出的
<link>若被手动移到底部，可能破坏资源加载优先级和缓存复用逻辑
rel="preload" + onload 是当前最可控的方案
真正起效的方式是让浏览器提前下载 CSS，但延迟其解析与应用时机。核心是两步：用 rel="preload" 抢占高优先级下载通道，再在 onload 中切换为 rel="stylesheet" 触发解析。
- 必须写
as="style"，否则 Chrome/Firefox 不识别为样式资源，不会提升优先级，甚至忽略预加载 -
onload回调里要立即执行this.rel='stylesheet'，否则资源下载完也白搭 - 务必加
this.onload=null，避免 Safari 重复触发（尤其在缓存命中时） - 示例：
<link rel="preload" href="modal.css" as="style" onload="this.rel='stylesheet'; this.onload=null;">
media="print" 是零 JS、全兼容的兜底方案
当项目不能依赖 JS（如 SEO 页面、禁用 JS 环境）或需兼容 IE11，media="print" 是目前最轻量可靠的替代路径。它利用浏览器对非匹配媒体类型的懒处理机制，实现事实上的异步加载。
立即学习“前端免费学习笔记（深入）”；
- 写法必须严格：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'; this.onload=null;"> -
onload中必须立刻改this.media='all'，否则样式永远不会生效 - IE 不支持
onload，需 fallback 到onreadystatechange（loadCSS库已内置此逻辑） - 不要用
media="(min-width: 9999px)"这类“假条件”——部分浏览器会误判为动态媒体查询，反而触发同步检查
容易被忽略的三个硬约束
所有方案都绕不开这三点，漏掉任一环节，优化即失效：
-
href值必须与最终生效的<link>完全一致（含 query 参数），否则预加载资源无法被复用，等于多下一次 - 非关键 CSS 绝不能包含影响首屏布局的选择器（如
body、html全局重置），否则即使异步加载，也会造成回流重绘 - 必须配
<noscript><link rel="stylesheet" href="..."></noscript>，否则 Safari 11.1 以下及禁 JS 场景直接丢失样式
