内联关键CSS能减少白屏时间，因其跳过外部CSS的HTTP请求，使浏览器更快构建CSSOM并绘制首屏；但仅限真正影响首屏的样式，需工具辅助提取、压缩转义，并异步加载剩余CSS。
为什么内联关键CSS能减少白屏时间
浏览器渲染页面前必须解析并构建CSSOM，而外部CSS文件会触发网络请求，阻塞渲染。把首屏必需的样式（比如导航、标题、按钮）直接写进 <head>，能让浏览器跳过一次HTTP请求，更快开始绘制。
不是所有CSS都该内联——只有真正影响首屏（Above-the-fold）渲染的才值得放进去。过度内联反而增大HTML体积，拖慢首屏HTML下载和解析。
- 判断“关键”：用Chrome DevTools的Coverage面板（
More Tools → Coverage），刷新页面后看哪些CSS规则被实际用到 - 工具辅助：
critters（Vite插件）、penthouse（Node CLI）可自动提取关键CSS - 注意：内联后记得移除对应外部文件的
<link rel="stylesheet">，否则样式重复应用
内联CSS时常见的错误写法
直接复制粘贴CSS内容进<style>标签看似简单，但容易出问题：
- 忘记转义
<、&等字符，导致HTML解析失败（尤其当CSS里有@keyframes或注释含<!--） - 把
@import语句一起内联——它仍会触发额外请求，完全失去内联意义 - 在
<style>里用了scoped（Vue）或:host（Shadow DOM）等上下文相关语法，脱离原环境后失效 - 未压缩CSS：空格/换行/注释全保留，白白增加几KB HTML体积
正确做法是用构建工具处理：Webpack用inline-critical插件，Vite用vite-plugin-critical，它们会自动压缩、转义、剔除无效规则。
立即学习“前端免费学习笔记（深入）”；
内联后如何加载剩余CSS
关键CSS内联了，剩下的非关键样式（如文章正文排版、分页组件、打印样式）得异步加载，避免阻塞渲染。
- 用
rel="preload"+onload切换：<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
- 避免
rel="prefetch"：它不保证优先级，可能被浏览器延迟加载 - 不要用
fetch()+insertRule()：动态注入大量CSS规则性能差，且无法被浏览器预加载器识别 - 注意兼容性：
onload在老版Safari中不支持<link>，需加polyfill或降级为rel="stylesheet"+media="print"再切换
服务端渲染（SSR）场景下的特殊处理
Next.js、Nuxt这类框架默认生成的HTML已含内联CSS，但容易忽略两点：
- 开发环境热更新时，
<style>标签可能残留旧版本，导致样式错乱；确保构建流程中清空缓存或使用critical插件重提 - 动态路由（如
/posts/[id]）下，不同页面的关键CSS不同，不能全局复用同一份——需按路由粒度提取，或用getCriticalCss()运行时生成 - CDN或边缘节点缓存HTML时，若内联CSS随构建版本变化，必须确保HTML缓存键包含CSS哈希（如
index.html?v=abc123）
最麻烦的是第三方UI库（如@mantine/core）：它们的CSS通常按需导入，但构建时难以静态分析哪些组件出现在首屏。这时候宁可手动维护一个critical.css白名单，也别依赖全自动提取。
