内联关键CSS是唯一100%可控的防闪方案，即将首屏必需样式（如.header、.hero）直接写入<style>标签，体积≤10KB，配合preload+onload异步加载非关键CSS，并避免@import、动态插入link及错误Content-Type导致的阻塞失效。
关键样式没在首次绘制前就位，就一定会闪——顺序只是表象，真正要控的是加载时机和资源依赖链。
为什么写在里还是闪
浏览器看到 <link rel="stylesheet"> 时，确实会尝试阻塞渲染，但以下情况会让它“放弃阻塞”：
-
media值不匹配当前环境（比如media="(min-width: 768px)"在手机上，浏览器直接异步加载） - CSS 文件里用了
@import：强制串行，main.css解析完才发起下一次请求，首屏样式链断裂 -
<link>是 JS 动态插入的（如document.head.appendChild(link)），预加载器根本看不到它 - 服务端返回了错误的
Content-Type（如text/plain），浏览器拒绝解析，降级为非阻塞加载
验证是否真被阻塞：打开 DevTools → Network → 筛选 css → 看 Initiator 列是不是 parser；不是，说明没进阻塞链。
内联关键 CSS 是唯一 100% 可控的方案
把首屏必需的样式（如 .header、.hero、基础重置、字体定义）直接塞进 <head> 的 <style> 标签里，绕过所有网络延迟。
立即学习“前端免费学习笔记（深入）”；
- 必须用
<style>，不能用<link rel="stylesheet">即使 href 指向 data URL - 体积建议 ≤10KB（gzip 前），否则可能阻塞 HTML 解析本身
- 别手动维护——用
critters（Vite）、critical（CLI）或 Next.js 内置工具自动生成，否则极易过期 - 内联部分只管首屏；非关键样式要明确隔离，比如用
media="print"+onload="this.media='all'"
preload + onload 加载非关键 CSS 的正确姿势
rel="preload" 本身不应用样式，只是提前发请求；漏掉任一要素，它就跟普通 <link> 没区别。
- 必须带
as="style"：告诉浏览器这是样式资源，参与优先级调度 - 必须配
onload="this.rel='stylesheet'"：否则下载完也不会生效 - 必须加
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>：禁用 JS 时兜底 - 错误写法：
<link rel="preload" href="main.css">——缺as，浏览器当普通资源处理
注意：preload 不解决内联缺失问题，它只是辅助手段；CDN 延迟高或文件体积大时，依然可能 FOUC。
深色/浅色模式切换最容易踩坑
靠 DOMContentLoaded 后读取 localStorage 再插入 <link>，必然 FOUC。因为浏览器在首次绘制时根本没拿到主题样式。
- 把主题类（如
dark）直接写在<html>标签上，由服务端或初始 HTML 决定 - 如必须 JS 控制，可用
<style media="print">占位 + JS 加载后移除，实现平滑过渡 - 避免在
<head>中直接写<link rel="stylesheet">加载主题 CSS，它会阻塞渲染且无法动态切换
真正难的不是“怎么加”，是判断哪些 CSS 算“关键”——它取决于设备尺寸、用户登录态、A/B 实验分组，甚至当前路由参数。这个边界一旦划错，要么白内联（仍闪烁），要么过度内联（HTML 体积膨胀、缓存失效）。
