HTML怎么做关键CSS提取_html Critical CSS关键样式提取:速查

作者：袖梨 2026-06-28

关键CSS是提取首屏必需样式，排除媒体查询、伪类等；推荐critters（构建时）、penthouse（服务端）或cheerio（静态HTML），正则匹配不可靠。

关键 CSS（Critical CSS）不是“把所有 CSS 拆出来”，而是提取首屏渲染必需的那部分样式规则，跳过媒体查询、伪类、@import、非首屏组件等无关内容。直接正则匹配或全文注入都容易出错——真正能落地的方案，取决于你用什么环境跑提取逻辑。

用 `critters` 在构建时提取（Vite / Webpack 场景）

critters 是目前最稳定的 Node.js 端提取器，它基于真实 DOM 渲染快照 + CSSOM 分析，不是纯字符串解析。它能自动忽略 @media (min-width: 768px)、:hover、.sidebar（若不在首屏 DOM 中）等规则。

Webpack 用户：配 CrittersPlugin，传入 html 入口路径和 publicPath，插件会自动注入 <style> 到 <head>
Vite 用户：用 vite-plugin-critters，注意需开启 build.ssr 或预渲染 HTML（否则无 DOM 快照可分析）
⚠️ 坑点：critters 不处理内联 <style> 中的 @import；若 CSS 里写了 @import 'base.css'，它不会去加载并解析那个文件

用 `penthouse` 做服务端提取（Node.js 运行时）

penthouse 本质是启动一个无头浏览器（Puppeteer），打开页面、截取首屏 DOM、再反向推导哪些 CSS 规则被实际用到。它比 critters 更准，但慢、内存高，适合 CI/CD 阶段做一次生成，不适合请求时动态跑。

必须提供可访问的 URL（如 http://localhost:3000/home），不能只给 HTML 字符串
超时默认 30s，复杂 SPA 建议设 timeout: 60000，否则常因 JS 加载未完成而漏提
输出是纯 CSS 字符串，不含 <style> 标签，要自己拼进 HTML —— 别漏了 type="text/css"

用 `cheerio` + 手动规则过滤（纯 HTML 字符串场景）

如果你只有静态 HTML 字符串（比如 CMS 输出、邮件模板），没服务端渲染能力，又不想引入 Puppeteer，那就得退回到“启发式提取”：先用 cheerio 解析 DOM，再按规则筛选 <link rel="stylesheet"> 和 <style>，最后靠白名单控制范围。

立即学习“前端免费学习笔记（深入）”；

只加载 href 路径含 /css/critical. 或 media="print" 的除外（那是非关键）
跳过所有含 @media、@supports、:not(、::before 的规则行（用 postcss 解析 AST 更稳，但重）
cheerio.load(html).$('link[rel="stylesheet"][href*="critical"]').attr('href') 只拿链接，不下载内容 —— 下载动作得你自己用 fetch 或 axios 补上

为什么不用正则从 HTML 字符串里直接抽 CSS 内容？

因为 <style>body{color:red} 和 <style>@media(max-width:480px){.btn{display:none}} 都在 <style> 里，但后者大概率不是关键 CSS。正则分不清语义，只能按标签边界切，结果要么太粗（全拿了），要么太细（漏掉复合选择器）。更麻烦的是，CSS 里可以写换行、注释、Unicode 转义，正则极易断裂 —— 就算写对了，下次设计师加个 /* mobile-first */ 注释就可能让整个提取失败。