CSS放不能避免闪烁，真正有效的是内联关键CSS（≤10KB、无media、置于最顶部）+预加载非关键CSS+避免@import和JS动态插入。
把 CSS 放在 中本身**不能避免页面闪烁**，只是触发浏览器阻塞渲染的必要条件；真正起作用的是“关键 CSS 是否在首次绘制前就绪”，而这个目标必须靠内联 + 预加载 + 避免串行加载三者配合才能达成。
为什么 <link rel="stylesheet"> 放在
浏览器确实会在解析到 中的 <link rel="stylesheet"> 时发起请求，但以下情况会让它“形同虚设”：
-
media属性不匹配当前环境（比如media="(min-width: 768px)"在手机上），浏览器直接跳过预加载，降级为异步加载 - CSS 文件里用了
@import：HTML 解析器看不见，必须等主 CSS 下载并解析完才发起下一次请求，首屏样式链断裂 -
<link>是 JS 动态插入的（如document.head.appendChild()），预加载器完全扫描不到，彻底绕过阻塞逻辑 - 服务端返回了错误的
Content-Type（比如text/plain而非text/css），浏览器拒绝解析，样式不生效
验证是否真被阻塞：打开 Chrome DevTools → Network → 筛选 css → 看 Initiator 列是不是 parser。不是？说明没进阻塞链。
内联 <style></style> 是唯一 100% 可控的解法
网络不可控，但 HTML 是同步交付的。把首屏必需的样式（如 .header、.hero、基础重置、字体定义）直接写进 <style></style>，就能绕过所有请求延迟。
立即学习“前端免费学习笔记（深入）”；
- 必须用
<style></style>，不能用<link rel="stylesheet"> - 体积建议 ≤10KB（移动端保守值），否则可能反向阻塞 HTML 解析
-
<style></style>必须放在最顶部，不能加media属性，否则浏览器跳过阻塞 - 别手动维护——用
critters（Vite）、critical（CLI）或 Next.js 内置工具自动生成，否则极易过期
非关键 CSS 要怎么安全加载
内联只解决首帧有样式，后续样式仍要加载。但直接放 <link rel="stylesheet"> 可能因体积大或 CDN 延迟导致回流重绘。
- 推荐写法：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">，利用media="print"让浏览器预加载但不应用，加载完成再切换 - 必须配
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>兜底，防 JS 失效 - 避免在 JS 里用
document.write()或appendChild()动态插入——这会让浏览器完全错过预加载
真正难的不是“放哪”，而是判断哪些算“关键”：它取决于设备尺寸、登录态、A/B 分组甚至当前路由参数。划错边界，要么白内联（仍闪），要么过度内联（HTML 体积暴涨）。
