内联关键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 注入（见下一条）
