内联关键CSS能减少白屏时间，因其使首屏必需样式随HTML同步到达，跳过外部请求与解析阻塞，加速CSSOM构建和首屏渲染；但仅限viewport内必需样式（≤6KB），需工具提取并避免@import、URL引用等阻塞项。
关键样式必须内联，且只保留首屏渲染必需的部分；否则白屏时间不会缩短，反而可能因HTML体积增大拖慢解析。
为什么 critical CSS 内联能减少白屏
浏览器在收到 HTML 后，会阻塞渲染直到构建完 CSSOM。如果关键 CSS 存在外部文件中，需额外发起网络请求、等待下载和解析，这期间页面保持空白。内联 critical CSS 让样式与 HTML 一起到达，跳过请求环节，使首屏元素可立即参与渲染。
但注意：内联 ≠ 全量 CSS 复制粘贴。全量内联会显著增大 HTML 体积，反而延长 TTFB 和 HTML 解析时间，得不偿失。
如何提取真正关键的 CSS
- 只覆盖首屏（
viewport内）可见区域的 DOM 节点所用到的选择器，不含折叠区、懒加载模块、交互后才显示的弹层等 - 避免包含
@font-face、@keyframes（除非首帧动画必需）、未使用的媒体查询分支（如min-width: 1024px在手机上不生效） - 工具推荐：
Penthouse（Node.js）、critical（CLI）、或 Lighthouse 的 “Eliminate render-blocking resources” 建议中附带的内联 CSS 片段（仅作参考，需人工校验） - 手动验证方式：禁用网络（DevTools → Network → Offline），刷新页面——若首屏文字/按钮/色块仍能正确显示，说明提取基本到位
内联后仍白屏？检查这几个地方
内联了 critical CSS 却还是白屏，大概率是其他环节卡住了渲染流水线：
-
document.write()或同步脚本在中执行，直接中断 HTML parser - 首屏 DOM 依赖异步 JS 渲染（如 React/Vue 挂载点为空，JS 未加载完前无内容）——此时内联 CSS 无效，得配合 SSR 或 hydration 优化
- CSS 中存在阻塞资源引用，比如
background: url(//xxx.com/sprite.png)，该图片加载失败或超时，部分浏览器会延迟应用整条规则 -
<link rel="stylesheet">标签未加media="print"或onload切换逻辑，导致浏览器仍将其视为渲染阻塞资源
上线前必须确认的兼容性细节
移动端浏览器对内联样式的处理比桌面端更敏感，尤其在弱网或低端设备上：
- Android WebView（尤其旧版）对超过 ~8KB 的内联
<style></style>标签解析缓慢，建议控制在 4–6KB 以内 - iOS Safari 对
@import规则在内联<style></style>中完全忽略，不能用 - 不要在内联样式里写
!important覆盖外部样式——后续外链 CSS 加载后会重算，造成 FOUC 或布局抖动 - 若使用 HTTP/2 推送，
critical CSS仍应内联，不要依赖推送时机；HTTP/2 推送不保证优先级，且安卓部分 WebView 不支持
真正难的不是提取和内联，而是持续维护：每次 UI 改动都可能新增首屏样式依赖，而自动化提取工具容易漏掉动态插入的 class 或伪元素内容。上线后务必用真实弱网环境（如 Chrome DevTools 的 “Slow 3G” + 启用缓存禁用）反复验证白屏时长是否确实下降。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
