浏览器仅对被解析器识别为阻塞渲染的样式表暂停绘制，常见失效原因包括media不匹配、@import嵌套、错误Content-Type或preload未回填；验证需查Network中css的Initiator是否为parser。
为什么放在里还是会闪
因为浏览器只对「被解析器识别为阻塞渲染」的样式表才暂停绘制，不是放对位置就自动生效。常见失效场景包括：media属性值不匹配（如media="(min-width: 768px)"）、@import嵌套在CSS文件里、服务器返回错误的Content-Type（比如text/plain）、或用了rel="preload"却没配onload回填逻辑。
验证是否真被阻塞：打开 DevTools → Network → 筛选 css → 看 Initiator 列是不是 parser；如果不是，说明它根本没参与渲染阻塞。
- 临时把所有
media改成media="all"测试是否还闪 - 检查 CSS 文件里有没有
@import，有就拆出来，用<link>替换并移到 HTML 中 - 确认服务器对 .css 文件返回
Content-Type: text/css
内联关键CSS时容易忽略的三个边界
内联不是越多越好，也不是随便复制粘贴就能防 FOUC。真正起作用的是「首屏必需且能被浏览器立即解析应用」的那部分规则。
常见误操作：把整份 main.css 塞进 <style>，结果 HTML 解析被拖慢；或者漏掉字体加载触发的重排规则（比如 @font-face 或 font-display: optional）。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 体积控制在 10KB 以内（移动端建议 ≤ 4KB），否则会阻塞 HTML 解析本身
- 不要手动维护——用
criticalCLI 或 Vite 插件critters自动生成，否则上线后很快过期 -
<style>标签必须无media属性，否则失去阻塞能力
异步加载非关键CSS的可靠写法
把非首屏样式延迟加载没问题，但media="print" onload="this.media='all'"这种写法必须配对使用，单独写 media="print"等于告诉浏览器“现在别管它”，不会预加载也不会阻塞。
更稳妥的做法是用 rel="preload" 配合 as="style" 和 onload 回填，同时保留 <noscript> 降级路径。
- 必须在
<link>插入 DOM 前绑定load事件，否则 Firefox/Safari 可能漏掉回调 - 避免用
fetch()+insertRule()注入样式——完全绕过浏览器阻塞机制，必然 FOUC - JS 动态插入
<link>时，要确保它出现在<body>开始前，否则解析器已推进到 body 内容，渲染早就开始了
深色模式切换导致FOUC的根本原因
靠 DOMContentLoaded 后读取 localStorage 再插入对应 <link>，本质是让浏览器在无样式状态下完成首次绘制，再补样式——这已经晚了。
服务端根据请求头（如 Sec-CH-Prefers-Color-Scheme）或 cookie 决定加载哪个 CSS，才是唯一能避开 FOUC 的方式。客户端 JS 切换只适合二次交互，不能用于首屏。
如果必须前端控制，至少要把两套关键 CSS 都内联进 <head>，用 class 控制显隐，而不是等 JS 执行完再去拉新文件。
