首屏渲染慢导致FOUC，核心是CSS外部加载阻塞渲染；应提取首屏关键CSS内联至中，体积控制在14KB内，非关键CSS用preload或JS异步加载，并协同Gzip、HTTP/2、font-display等优化。
首屏渲染慢导致用户看到无样式页面（FOUC），核心原因是浏览器需要先下载外部 CSS 文件，再解析、构建样式树，最后渲染。解决思路很明确：把首屏必需的样式提前、内联到 HTML 的 中，让浏览器无需等待网络请求就能开始渲染。
识别并提取关键 CSS
关键 CSS 是指渲染首屏内容（通常是视口内可见区域）所必需的最小样式集合。它不包括轮播图后续页、折叠菜单、非首屏卡片等区域的样式。
- 用 Chrome DevTools 的 Coverage 面板（More Tools → Coverage）打开页面，刷新后查看哪些 CSS 规则被实际使用
- 借助工具如
penthouse（Node.js 工具）或critical自动生成关键 CSS，支持指定设备尺寸和 URL - 手动提取时，重点关注
body、标题、首屏按钮、导航栏、首张图片容器等选择器及其依赖的 class 和媒体查询
内联关键 CSS 到 HTML
将提取出的关键 CSS 直接写在 的 标签中，确保在 HTML 解析早期即可生效。
- 避免使用
@import或外部链接，内联样式必须是纯 CSS 字符串 - 建议控制内联体积在 14KB 以内（避免触发 TCP 慢启动额外往返），超过则需精简或拆分
- 服务端渲染（SSR）项目可在模板中注入；静态站点可借助构建脚本（如 Webpack +
html-webpack-plugin+critical插件）自动完成
异步加载剩余 CSS
非关键 CSS 应延迟加载，防止阻塞渲染，同时避免重复应用造成样式闪烁。
立即学习“前端免费学习笔记（深入）”；
- 用
rel="preload"提前获取，再通过onload注入： - css" as="style" onload="this.onload=null;this.rel='stylesheet'">
- 或用 JavaScript 动态创建
并插入，配合media="print"+onload切换技巧实现无阻塞加载
配合其他优化巩固效果
单靠内联关键 CSS 不足以彻底解决首屏问题，需与基础性能策略协同：
- 启用 Gzip/Brotli 压缩，减小内联 CSS 和 HTML 体积
- 确保服务器开启 HTTP/2，提升资源并行加载效率
- 对字体、图标等资源设置
font-display: swap，防文字长时间不可见 - 服务端开启
Early Hints（HTTP 103），让浏览器提前预加载关键资源
