最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML怎么做关键CSS提取_html Critical CSS关键样式提取:速查
时间：2026-06-28 09:44:57 编辑：袖梨 来源：一聚教程网
关键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 */ 注释就可能让整个提取失败。