关键CSS内联，解决页面加载问题

页面首屏渲染卡顿、内容闪现或布局错乱，往往源于关键CSS加载延迟——解决之道是将仅覆盖视口内元素（如导航栏、大标题、主按钮和核心卡片）的最小必需样式自动提取、压缩至14KB以内，并直接内联到HTML的``中，配合``异步加载其余CSS；借助Penthouse、critical或Vite插件可高效实现，再通过DevTools水印图和Lighthouse验证效果，真正让样式与HTML同步就绪，从根源消除渲染阻塞。

页面刚打开时内容突然“闪现”、文字堆叠、布局错乱，通常是因为关键 CSS 还没加载或解析完，浏览器已开始渲染 HTML。解决的核心思路是：让最关键的样式（即 首屏渲染必需的 CSS）在 HTML 加载的同时就能被立即读取和应用——最有效的方式就是将关键 CSS 内联到 HTML 的 中。

哪些 CSS 算“关键”？

关键 CSS 不是全部样式，而是仅覆盖用户首次视口（通常是顶部 100vh 区域）内元素所需的最小样式集合，例如：

• 头部导航栏的宽高、背景、字体颜色
• 首屏大标题、主按钮的字体大小、边距、颜色
• 核心卡片/列表项的基础结构（如 display: flex、padding、border）
• 避免重排重绘的必要属性（如 width、height、font-family）

不包括：折叠菜单的 hover 效果、底部联系方式、分页组件、动画类、媒体查询中大屏幕专属样式（除非首屏就用到）。

如何提取并内联关键 CSS？

手动提取容易遗漏或过度，推荐工具辅助生成：

• Penthouse：Node.js 工具，可自动化分析真实页面生成关键 CSS
• critical（由 penthouse 封装）：支持命令行或 Webpack/Vite 插件集成
• Vite 插件如 vite-plugin-critical-css：开发时自动注入，适合现代构建流程

生成后，把输出的 CSS 字符串插入 HTML 模板的 中，用 包裹，确保无网络依赖。

内联后还要注意什么？

内联只是第一步，需配合其他优化防止副作用：

• 内联 CSS 应压缩（去除空格、注释），控制体积在 14KB 以内（避免触发 TCP 慢启动额外往返）
• 剩余非关键 CSS 用 异步加载
• 服务端若支持 HTTP/2 Server Push，可主动推送关键 CSS（但现代实践中更倾向 preload）
• 避免在内联样式中使用 @import，它会阻塞解析

验证是否生效？

打开 Chrome DevTools → Network → 刷新页面 → 查看 HTML 请求的“waterfall”，确认：

• HTML 响应体中已包含