Cheerio 和 jsdom 有什么区别？如何选择使用？

Cheerio 和 jsdom 是 Node.js 中处理 HTML 的两种常见方案，核心区别在于：Cheerio 是轻量解析器，只做 DOM 遍历和数据提取；jsdom 是完整浏览器环境模拟器，能执行 JavaScript 并提供 window、localStorage 等浏览器 API。选错工具会导致性能浪费或功能缺失，以下是关键对比。## 核心架构差异Cheerio 基于 htmlparser2 构建，实现了一套精简的 DOM 模型，仅保留节点遍历、属性读写和 CSS 选择器能力。它不解析 CSS、不执行脚本、不渲染页面，因此体积小、速度快。jsdom 基于 WHATWG DOM 标准实现，构造了完整的 window 对象，包括 document、location、localStorage、fetch 等 API。它内置 JavaScript 引擎，可通过 runScripts: 'dangerously' 执行页面脚本，还能加载外部资源。简单说：Cheerio 把 HTML 当字符串解析，jsdom 把 HTML 当浏览器渲染。## 功能与性能对比| 维度 | Cheerio | jsdom ||------|---------|-------|| 解析速度 | 快（约 5-10ms/万节点） | 慢（约 100-500ms/万节点） || 内存占用 | 低 | 高（约 8-10 倍） || CSS 选择器 | jQuery 风格，支持链式调用 | 标准 querySelector/querySelectorAll || JavaScript 执行 | 不支持 | 支持 || 浏览器 API | 无 | window/document/localStorage/fetch/Canvas || 事件系统 | 无 | 完整 DOM 事件冒泡机制 || HTML 容错性 | 高（htmlparser2 宽容解析） | 低（严格按标准解析） |Cheerio 的性能优势在批量处理时尤为明显。解析同一份万级节点的 HTML，Cheerio 通常比 jsdom 快 8 倍以上，内存占用低一个数量级。## 选择决策选 Cheerio 的场景：- 爬虫抓取静态页面数据（标题、链接、正文）- 批量处理 HTML 文档（清洗标签、提取字段）- 服务端模板渲染后的 HTML 后处理- Serverless 等资源受限环境选 jsdom 的场景：- 前端组件单元测试（模拟 DOM 环境）- 服务端渲染（SSR）需要执行客户端脚本- 处理依赖 JavaScript 动态渲染的页面- 需要浏览器 API 的 Node.js 代码（如 window.matchMedia）一个实用判断标准： 如果你只需要 querySelector + textContent，用 Cheerio；如果你需要 window 对象，用 jsdom。## 常见坑点Cheerio 陷阱： 静态抓取 SPA 页面会拿到空壳 HTML。此时需要搭配 Puppeteer 等无头浏览器先渲染，再用 Cheerio 解析结果，而非换用 jsdom——jsdom 执行 JS 的能力有限，对复杂 SPA 支持不完善。jsdom 陷阱： 默认不执行脚本（需手动开启 runScripts），且开启后存在安全风险，不要用 jsdom 执行不可信来源的 HTML。另外 jsdom 不支持 requestAnimationFrame、IntersectionObserver 等部分现代 API，Jest 等测试框架通常会补充 polyfill。## 代码示例Cheerio 快速提取数据：javascriptconst cheerio = require('cheerio');const $ = cheerio.load(html);// jQuery 风格 APIconst title = $('h1').text();const links = $('a').map((i, el) => $(el).attr('href')).get();const cleaned = (() => { $('script, style').remove(); return $.html();})();jsdom 模拟浏览器环境：javascriptconst { JSDOM } = require('jsdom');const dom = new JSDOM(html, { runScripts: 'dangerously' });const document = dom.window.document;const title = document.querySelector('h1').textContent;// 访问浏览器 APIconst storage = dom.window.localStorage;const location = dom.window.location.href;两者也可以组合使用：先用 Puppeteer 或 jsdom 获取 JS 执行后的 HTML，再用 Cheerio 高效提取数据。## 追问方向- Cheerio 如何处理编码问题？ cheerio.load(html, { decodeEntities: false }) 可避免中文乱码。- jsdom 如何模拟用户交互？ 通过 dom.window.dispatchEvent 或 fireEvent 库触发事件。- 还有其他选择吗？ node-html-parser 更轻量，parse5 更标准，linkedom 性能介于 Cheerio 和 jsdom 之间。