内联关键CSS可减少首屏白屏时间，因其避免外部样式表网络请求阻塞CSSOM构建；应仅内联首屏必需样式（≤14KB），禁用@import及含URL的声明，并配合media属性、preload+onload异步加载非关键CSS。
内联关键 CSS 为什么能减少首屏白屏时间
浏览器渲染页面前必须解析并构建 CSSOM，如果关键样式放在外部 中，会触发网络请求阻塞渲染。内联关键 CSS（即把首屏必需的样式直接写进 标签）可让 CSSOM 在 HTML 解析阶段同步生成，避免 FOUC 和白屏延迟。
实操建议：
- 只提取「首屏可见区域」用到的 CSS 规则（如 header、hero banner、首屏按钮），工具推荐 critical 或
penthouse - 内联部分需控制体积，建议 ≤ 14 KB（HTTP/2 下仍建议压缩，避免影响 TTFB）
- 避免内联
@import、@font-face（会触发额外请求）、或含 URL 的background-image（可能重复加载） - 服务端渲染（SSR）场景下，可在模板中动态注入，例如 Next.js 使用
getServerSideProps+critical提前生成
如何用 media 属性延迟非关键 CSS 加载
将非首屏样式（如打印样式、深色模式后备、折叠菜单、底部版权栏）用 media 属性标记为“条件加载”，浏览器会将其视为低优先级资源，不阻塞主渲染流程。
常见有效写法：
立即学习“前端免费学习笔记（深入）”；
-
—— 打印时才加载 -
—— 仅匹配系统偏好时加载 -
—— 精确匹配设备条件
⚠️ 注意：media 值必须为**当前环境不匹配的表达式**，否则仍会阻塞；若想完全异步加载，应改用 rel="preload" + onload 注入（见下一条）
用 rel="preload" + onload 异步加载剩余 CSS
对非关键但需在交互前就绪的 CSS（如模态框、表单验证样式），不能靠 media 规避阻塞，又不想内联——此时应主动预加载并手动注入，确保不干扰初始渲染流。
关键点说明：
-
as="style"告诉浏览器这是样式资源，参与资源优先级调度 -
onload回调中将rel改为"stylesheet"，才真正触发解析；赋值null防止重复执行 -
是降级保障，JS 被禁用时回退为普通 link - 不要用
rel="prefetch"替代——它属于低优先级，无法保证首屏交互前就绪
避免 @import 和多层 CSS 拆分导致的瀑布加载
@import 在 CSS 文件中出现时，会强制串行加载：主 CSS 下载完、解析到 @import 行后，才发起被导入文件的请求，形成加载瀑布，严重拖慢 CSSOM 完成时间。
排查与修复方式：
- 检查所有 CSS 文件，搜索
@import关键字；Webpack/Vite 构建产物中也要扫一遍（尤其node_modules里第三方包） - 构建时用 PostCSS 插件
postcss-import提前展开（注意路径别出错），或改用 JS 动态 import（如import('./theme.css')） - 拆分 CSS 应基于「功能域」而非「媒体查询」，例如
button.css、form.css可并行加载；但mobile.css+tablet.css+desktop.css容易因冗余和条件判断反而增加复杂度 - 若用 CSS-in-JS（如 Emotion、Styled Components），确认是否启用了 SSR 提取关键样式（
extractCritical或renderStylesToString），否则全部样式都会延迟到 JS 执行后才注入
最常被忽略的一点：即使你做了所有优化，如果 CDN 缓存未命中或 TTFB 过高，内联 CSS 也救不了首屏。务必先压测 HTML 的 TTFB，再谈 CSS 加载策略。
