JSDOM 替代方案：总结与比较

jsdom 是一个在 Node.js 中模拟浏览器环境的强大工具，但对 Web 标准的高度保真度牺牲了性能。本文按场景分类整理了各类替代方案，帮助你快速选型。

---

一、Node.js 完整浏览器 DOM 模拟（对标 jsdom）

1. Happy DOM（强烈推荐，现代替代 jsdom）

• 定位： 轻量、高性能 DOM 实现，API 对齐浏览器
• 优势：
  • 原生支持 ES Module，开箱即用
  • 对 CSSOM、事件、表单、iframe、fetch 完善支持
  • 渲染速度远高于 jsdom，内存占用低
  • Vitest 默认 DOM 环境就是 happy-dom
• 适用： 单元测试、SSR 页面解析、爬虫
• 安装： npm install happy-dom

import { Window } from 'happy-dom';
const window = new Window();
const document = window.document;
document.body.innerHTML = '<div>test</div>';

2. linkedom

• 特点： 基于纯 DOM 标准实现，不依赖任何浏览器二进制
• 区别： 比 jsdom 更精简，无冗余 XML 解析逻辑，适合爬虫、页面抓取
• 环境： Node.js / Deno
• 安装： npm install linkedom

3. deno-dom

• 特点： Deno 官方 DOM 库，基于 Rust + WebAssembly 构建，完全 W3C 标准，性能极强
• 适用： 跨 runtime 项目、Deno 原生应用

---

二、轻量 DOM 解析（只解析 HTML，不模拟完整浏览器）

1. cheerio（jQuery 风格，爬虫首选）

• 特点： 只提供 DOM 查询接口，无 window / 事件 / JS 执行，纯静态解析 HTML
• 速度： 天花板级别，无任何浏览器开销
• 场景： 网页爬虫、HTML 内容提取、静态模板处理
• 安装： npm install cheerio

import * as cheerio from 'cheerio';
const $ = cheerio.load('<h1>hello</h1>');
console.log($('h1').text());

2. parse5（底层 HTML 标准解析器）

• 特点： W3C 标准 HTML5 解析库，只生成 DOM 树，无操作 API
• 底层依赖： jsdom、happy-dom 底层都基于 parse5
• 适用： 自封装自定义 DOM 工具

3. domhandler + domutils

• 特点： parse5 配套工具，提供遍历、查询 DOM 节点
• 定位： 轻量化替代 cheerio

---

三、浏览器 / SSR 渲染类

1. Puppeteer / Playwright（真实无头浏览器）

• 和 jsdom 的本质区别： 启动 Chromium/Firefox 真实浏览器内核，能执行复杂 JS、渲染动画、支持 Canvas/WebGL
• 适用： 需要真实页面交互、复杂前端框架渲染、截图、自动化爬虫
• 缺点： 启动慢、占用资源大

2. Vue / React 框架专属 SSR

• @vue/server-renderer：只渲染 Vue 组件，不通用 HTML 解析
• react-dom/server：只渲染 React 组件，不通用 HTML 解析
• 适用： Vue/React 项目服务端渲染

---

四、测试专用 DOM 环境

库	说明
Vitest + happy-dom	现代首选，替代 Jest + jsdom
Jest + jsdom	Jest 内置 DOM 模拟，就是封装 jsdom
@stencil/core MockDocument	WebComponent 专用轻量 DOM

---

对比表格

特性	jsdom	happy-dom	linkedom	cheerio	Playwright
环境	Node.js	Node.js	Node.js / Deno	Node.js	Node.js (带浏览器)
完整浏览器环境	✅ 完整	✅ 完整	✅ 完整	❌ 仅静态查询	✅ 真实内核
执行页面 JS	✅	✅	✅	❌	✅ 完整
性能	中等	极快	快	极速	慢
标准符合性	高	中	低	—	最高（真实浏览器）
最佳场景	老项目兼容	现代测试 / SSR	爬虫 / 轻量化 DOM	纯爬虫 / 文本提取	真实交互 / 截图

---

选型速查

场景	推荐
单元测试、Vue/React 组件测试	happy-dom（Vitest 默认）
单纯爬取网页文本、提取标签	cheerio
需要模拟完整浏览器环境执行 JS	linkedom / happy-dom
需要真实渲染、Canvas、复杂交互	Playwright
老 Jest 项目不想迁移	继续用内置 jsdom