内联关键CSS能消除白屏和闪动，因其使首屏样式随HTML同步解析，避免CSSOM构建阻塞渲染；关键CSS仅含首屏必需规则，需工具（如Critters）提取并人工校验，非关键CSS应preload后注入，且注意缓存与框架适配。
为什么内联关键CSS能消除闪烁
页面白屏或内容闪动，本质是浏览器渲染流程被阻断：HTML解析到<link rel="stylesheet">时会暂停渲染，等CSSOM构建完才继续。而内联关键CSS后，<style></style>块随HTML一起下载解析，无需额外请求，首屏样式可立即应用。
注意，“关键CSS”不是全部CSS，而是首屏（above-the-fold）渲染必需的那部分规则——比如标题、导航、首屏按钮的样式。全量内联反而拖慢HTML体积，得不偿失。
怎么提取真正关键的CSS
靠人眼判断容易漏或过量。推荐用工具辅助生成，再人工校验：
-
critters（Vite/Webpack插件）：自动分析HTML结构+视口尺寸，提取并内联关键CSS，支持响应式断点处理 -
Penthouse：基于真实浏览器截图比对，精度高但需Node环境+Puppeteer - 手动剪裁时，务必在
chrome://inspect里模拟慢速3G+首次加载，滚动检查首屏是否真无重绘/错位
常见错误：把@font-face或@keyframes全塞进内联样式——它们不影响首屏布局，却增大HTML体积，还可能触发FOIT/FOUT加重感知延迟。
立即学习“前端免费学习笔记（深入）”；
内联后如何避免样式冲突和重复加载
内联只是解决首屏，非关键CSS仍要异步加载。但直接保留<link rel="stylesheet">会导致重复解析、权重覆盖甚至FOUC回闪。
- 用
rel="preload"+onload注入：将非关键CSS改为<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'"> - 确保内联
<style></style>里不含!important滥用，否则后续外链CSS可能无法覆盖修正 - 若用CSS-in-JS（如Emotion），确认其SSR输出已分离关键规则；否则
extractCritical等方法未启用时，内联内容可能是空的
一个典型坑：webpack中误配mini-css-extract-plugin，导致本该拆分的CSS又被打包进JS，内联后反而多载一次。
服务端渲染场景下的特殊处理
Next.js / Nuxt等框架默认已做部分优化，但仍有细节要盯：
- Next.js 13+ App Router中，
layout.tsx里的use client组件内动态插入的<style></style>不会被SSR捕获，必须用const StyledComponents = styled.div``这类服务端友好的方案 - Nuxt 3的
useHead({ style: [...] })可注入内联样式，但数组项不能含@media查询——会被忽略，需改用defineStyle或预编译 - 所有内联
<style></style>必须放在内，且不能包裹在<script></script>里动态写入，否则不参与初始CSSOM构建
最容易被忽略的是HTTP缓存头：内联CSS随HTML返回，若Cache-Control: no-cache太激进，每次都要重新传输整个HTML，反而比单独缓存CSS文件更慢。
