内联关键CSS可缓解FOUC问题，即仅将首屏必需样式（如导航栏、标题、布局容器等）提取并内联至<style>标签，避免全量CSS或@import/@font-face，配合preload、font-display:swap及defer/async脚本效果更佳。
页面首次加载时样式闪烁（FOUC，Flash of Unstyled Content），通常是因为浏览器先渲染了无样式的 HTML，等外部 CSS 加载并解析完成后才应用样式。将关键 CSS 内联到 <head> 中的 <style> 标签里，能显著缓解这个问题。
哪些 CSS 算“关键”
关键 CSS 是指渲染首屏（Above-the-Fold）内容所必需的样式，比如导航栏、标题、首屏按钮、字体设置、布局容器等。不包括折叠区域以下的样式、主题色切换、动画、打印样式或仅在交互后生效的类（如 .is-open）。
- 只提取当前路由/首屏用到的选择器，避免全量 CSS 内联
- 移除注释、空行和未使用的规则（可用工具如 critical 自动提取）
- 避免内联 @import、@font-face（字体建议用 preload 或 font-display 控制）
如何安全地内联关键 CSS
直接复制粘贴整个 CSS 文件到 <style> 里容易出错。推荐结合构建流程自动化处理：
- 使用
critical工具，传入 HTML 和 CSS 路径，输出内联后的 HTML 片段 - Vite 用户可搭配
vite-plugin-critical；Webpack 可用html-critical-webpack-plugin - 服务端渲染（SSR）场景下，在生成 HTML 时动态注入关键样式（如 Next.js 的
getServerSideProps预取 +styled-jsx或emotion的 SSR 支持）
配合其他优化效果更好
单靠内联关键 CSS 不足以完全消除闪烁，需组合使用：
立即学习“前端免费学习笔记（深入）”；
-
预加载关键字体：用
<link rel="preload" as="font">防止文字闪动（如系统字体回退前的空白） - 设置 font-display: swap：确保文本及时显示，哪怕字体还没加载完
-
避免阻塞渲染的 JS：把非首屏 JS 标记为
defer或async，防止它延迟 CSS 解析 - 启用 HTTP/2 Server Push（若支持）：主动推送关键 CSS，但注意现代部署中更推荐 preload
内联关键 CSS 是见效快、兼容性好、无需改架构的优化手段。只要控制好体积（建议 ≤ 14KB，避免影响 HTML 初始下载），就能明显提升用户看到内容的速度和体验。
