Cheerio 与 Puppeteer：深入解析 Node.js 爬虫与自动化测试的两大神器

2026-02-14 06:34:44 0条评论 2次阅读 0人点赞

在日常的前端开发或数据抓取工作中，你是否曾面临过这样的选择：为了快速抓取网页数据，应该选择轻量级的解析器，还是功能强大的自动化工具？今天，我们将深入探讨两个在 Node.js 生态中极其流行的工具——Cheerio 和 Puppeteer。

这篇文章不仅会帮助你理解它们的技术区别，更重要的是，我们将一起通过实际代码示例来分析，在什么场景下使用哪一个工具才是最佳实践。无论你是想构建一个高效的网页爬虫，还是需要模拟用户操作进行自动化测试，阅读完这篇文章后，你都能做出明智的技术决策。

1 1. Cheerio：像 jQuery 一样快速解析 HTML
2 标签中，链接在其中的标签 const articles = []; // 我们可以使用 each 函数来遍历 DOM 元素 $(‘h2.post-title‘).each((index, element) => { const title = $(element).text(); // 获取元素文本 const link = $(element).find(‘a‘).attr(‘href‘); // 获取属性值 // 将结果存入数组 articles.push({ title, link }); }); // 输出抓取结果 console.log(‘抓取到的文章列表：‘, articles); } catch (error) { console.error(‘Cheerio 抓取出错:‘, error); } } scrapeWithCheerio(); #### 代码解析：在这个例子中，你可以看到 Cheerio 的使用方式与 jQuery 几乎一模一样。我们首先获取网页的纯文本 HTML，然后使用 $(‘h2.post-title‘) 这种熟悉的选择器来定位元素。Cheerio 的优势在于它非常轻量，因为它不需要启动浏览器，也不需要执行 JavaScript，仅仅是解析文本字符串。 2. Puppeteer：操控浏览器的瑞士军刀
3 3. Cheerio 与 Puppeteer 的深度对比
4 4. 如何选择？最佳实践与建议
5 5. 总结

1. Cheerio：像 jQuery 一样快速解析 HTML

首先，让我们来认识一下 Cheerio。简单来说，Cheerio 是服务器端的 jQuery 实现。如果你熟悉 jQuery 的语法，那么使用 Cheerio 对你来说将是零门槛的体验。

1.1 什么是 Cheerio？

Cheerio 是一个快速、灵活且精简的 Node.js 核心模块。它并不是一个浏览器环境，而是一个纯粹的 HTML/XML 解析器。它去除了 jQuery 中所有与 DOM 渲染和浏览器兼容性相关的部分，只保留了最核心的选择器和操作逻辑。这使得它在处理大量网页数据时，速度极快且资源消耗极低。

Cheerio 的工作原理非常简单：它解析原始 HTML 字符串，并将其转换为一个我们可以轻松查询和修改的 DOM 结构模型。它封装了高效的 parse5 解析器，能够处理几乎所有在网络上见到的 HTML 或 XML 文档。

1.2 实战代码示例：使用 Cheerio 抓取数据

让我们来看一个具体的例子。假设我们想要从一个简单的博客页面抓取文章标题和链接。

首先，我们需要安装 Cheerio：

npm install cheerio axios

下面是具体的代码实现：

// 引入必要的模块
const cheerio = require(‘cheerio‘);
const axios = require(‘axios‘);

// 定义目标网址
const targetUrl = ‘https://example-blog.com‘;

async function scrapeWithCheerio() {
    try {
        // 1. 使用 axios 获取网页的 HTML 源代码
        // 注意：Cheerio 本身不负责请求网络，我们通常搭配 axios 或 request 使用
        const { data } = await axios.get(targetUrl);

        // 2. 将 HTML 源代码加载到 Cheerio 中
        // 这里的 ‘$‘ 就像 jQuery 中的 $ 一样，拥有强大的选择器功能
        const $ = cheerio.load(data);

        // 3. 使用选择器提取我们需要的数据
        // 假设文章标题在  标签中，链接在其中的  标签
        const articles = [];

        // 我们可以使用 each 函数来遍历 DOM 元素
        $(‘h2.post-title‘).each((index, element) => {
            const title = $(element).text(); // 获取元素文本
            const link = $(element).find(‘a‘).attr(‘href‘); // 获取属性值

            // 将结果存入数组
            articles.push({ title, link });
        });

        // 输出抓取结果
        console.log(‘抓取到的文章列表：‘, articles);

    } catch (error) {
        console.error(‘Cheerio 抓取出错:‘, error);
    }
}

scrapeWithCheerio();

#### 代码解析：

在这个例子中，你可以看到 Cheerio 的使用方式与 jQuery 几乎一模一样。我们首先获取网页的纯文本 HTML，然后使用 $(‘h2.post-title‘) 这种熟悉的选择器来定位元素。Cheerio 的优势在于它非常轻量，因为它不需要启动浏览器，也不需要执行 JavaScript，仅仅是解析文本字符串。

2. Puppeteer：操控浏览器的瑞士军刀

接下来，让我们看看 Puppeteer。如果说 Cheerio 是一把锋利的手术刀，那么 Puppeteer 就是一台功能齐全的机器人。

2.1 什么是 Puppeteer？

Puppeteer 是一个由 Google Chrome 团队官方维护的 Node.js 库。它提供了一套高级 API 来通过 DevTools 协议控制 Chromium（或 Chrome）浏览器。这意味着 Puppeteer 不仅仅是获取 HTML，它能够真正地像一个用户一样操作浏览器。

Puppeteer 最常见的用途包括：

生成页面的屏幕截图和 PDF：这是很多自动化报告系统的基础。
爬取单页应用（SPA）：能够抓取通过 React 或 Angular 等框架动态渲染的内容。
自动化测试：模拟表单提交、键盘输入、点击等用户行为。
性能分析：测试页面的加载性能。

2.2 实战代码示例：使用 Puppeteer 爬取动态页面

很多现代网站使用 JavaScript 动态加载数据。如果我们用 Cheerio 去请求这些网页，得到的 HTML 可能是空的，因为数据是在页面加载后由 JS 渲染的。这时候，Puppeteer 就派上用场了。

安装 Puppeteer：

npm install puppeteer

下面是一个如何抓取动态内容的例子：

const puppeteer = require(‘puppeteer‘);

async function scrapeWithPuppeteer() {
    // 1. 启动浏览器实例
    // headless: false 表示我们可以看到浏览器的操作界面，方便调试
    // headless: true 表示无头模式，在后台运行，速度更快
    const browser = await puppeteer.launch({ headless: true }); 

    try {
        // 2. 打开一个新标签页
        const page = await browser.newPage();

        // 3. 导航到目标网址
        // waitUntil: ‘networkidle0‘ 表示直到网络连接空闲（没有网络请求）后才认为页面加载完成
        // 这对于抓取动态内容非常重要，确保所有数据都已加载
        await page.goto(‘https://dynamic-site.com‘, { waitUntil: ‘networkidle0‘ });

        // 4. 在页面上下文中执行 JavaScript
        // page.evaluate 允许我们在这个浏览器环境中运行自定义 JS
        const dynamicData = await page.evaluate(() => {
            // 这里的代码是在浏览器内部执行的，就像你在控制台输入的一样
            const items = [];
            // 假设动态加载的列表项都有 .dynamic-item 类
            document.querySelectorAll(‘.dynamic-item‘).forEach(element => {
                items.push({
                    text: element.innerText,
                    id: element.id
                });
            });
            return items;
        });

        console.log(‘动态抓取结果：‘, dynamicData);

        // 5. 额外功能：截图
        await page.screenshot({ path: ‘screenshot.png‘ });
        console.log(‘已保存页面截图。‘);

    } catch (error) {
        console.error(‘Puppeteer 抓取出错:‘, error);
    } finally {
        // 6. 关闭浏览器，释放资源
        await browser.close();
    }
}

scrapeWithPuppeteer();

#### 代码解析：

在这个例子中，Puppeteer 实际上启动了一个真实的浏览器去访问网页。它等待 JavaScript 执行完毕，动态内容渲染出来后，再通过 page.evaluate 方法提取数据。这意味着即使是那些极其复杂、需要登录验证或 WebSocket 更新的网站，Puppeteer 也能轻松应对。此外，我们还演示了如何截图，这是 Cheerio 无法做到的。

3. Cheerio 与 Puppeteer 的深度对比

为了让我们更清晰地了解两者的差异，我们准备了一个详细的对比表格。这将帮助我们在实际项目中进行技术选型。

特性

Cheerio

Puppeteer :—

:—

:— 开发者/维护者

由 CheerioJS 团队开发和维护。

由 Google 官方开发并维护。 运行机制

它是一个单纯的 HTML/XML 解析器，不涉及浏览器渲染引擎。

它通过 DevTools 协议控制真实的 Chromium 浏览器。 JavaScript 支持

不支持。它只能解析静态的 HTML 源代码，无法执行其中的 JS 脚本。

完全支持。它在浏览器环境中运行，可以执行页面上的所有 JS 代码。 现代框架支持

无法爬取 React、Angular、Vue 等构建的 SPA 网站（除非结合其他工具预渲染）。

完美支持。因为它能执行 JS，所以能看到用户看到的最终渲染结果。 截图/PDF 功能

不提供。它甚至不知道网页长什么样，只认识代码结构。

原生支持。我们可以通过简单的 API 进行截图或保存为 PDF 文件。 性能与速度

极快。因为它没有加载 CSS、图片或运行 JS 的开销，仅仅是解析文本。

较慢。启动浏览器和渲染页面需要消耗大量的 CPU 和内存资源。 主要应用场景

数据挖掘。非常适合从静态网页或 API 接口返回的 HTML 中批量提取数据。

浏览器自动化。主要用于自动化测试、爬虫、性能分析和生成可视化报告。 浏览器依赖

不依赖。它可以在任何支持 Node.js 的环境中运行，无需安装浏览器。

强依赖。必须下载并运行 Chromium 浏览器。 数据来源

只能处理原始的 HTML 数据字符串。

可以处理用户交互后的实时数据，支持 WebSocket 和各种网络请求。

4. 如何选择？最佳实践与建议

现在我们已经了解了两者区别，但在实际工作中，我们该如何决策呢？

4.1 场景一：静态网站的大规模数据采集

如果你的目标网站是传统的静态页面（例如新闻列表、博客文章），并且你需要抓取成千上万个页面，请选择 Cheerio。

为什么？

Cheerio 的速度极快，占用资源极少。在同样的硬件配置下，使用 Cheerio 可以在几秒钟内处理数百个页面，而 Puppeteer 可能会因为内存不足而崩溃。对于 SEO 优化的页面（服务端渲染），Cheerio 绰绰有余。

优化建议：

在 Cheerio 中，尽量使用具体的选择器。比如 INLINECODEaf331a13 就比 INLINECODE947c06e2 效率更高。同时，不要忘记处理异常，因为 HTML 结构可能会经常变动。

4.2 场景二：高度交互的动态网站或 SPA

如果你的目标网站是 React 或 Angular 编写的，内容必须滚动鼠标才会加载，或者需要点击按钮后才会显示数据，必须选择 Puppeteer。

为什么？

因为 Cheerio 看到的只是

这样的空壳。只有通过真实的浏览器渲染，才能获取到经过 JavaScript 处理后的数据。

4.3 常见错误与解决方案

在使用这两种工具时，你可能会遇到一些常见问题。

1. 乱码问题：

Cheerio：有时抓取的中文内容是乱码。这通常是因为网页编码与默认解析不符。解决方法是确保在 INLINECODEf7dff5f3 请求时正确设置了 INLINECODE9763db63 并转换编码，或者使用 iconv-lite 库进行编码转换。
Puppeteer：通常较少出现乱码，因为它模拟的是真实浏览器，自动处理了字符集。

2. 反爬虫机制：

Puppeteer 容易被检测，因为浏览器特征（如 INLINECODE34352f71）暴露了它是一个自动化工具。我们可以通过使用 INLINECODEfd294461 插件或修改 navigator 属性来隐蔽特征。
Cheerio 在发送 HTTP 请求时，可能因为缺少 Header 头信息而被拒绝。记得在 INLINECODE4688959b 请求中添加 INLINECODE062c0314 和 Referer 等头部信息，模拟真实用户。

4.4 终极方案：结合使用

有时，我们需要结合两者的优势。例如，我们可以先使用 Puppeteer 访问一个需要登录的页面，获取 Cookie，然后将 Cookie 传递给 Cheerio 使用，从而在后续的数据抓取中利用 Cheerio 的高速度。

或者，我们可以先用 Puppeteer 处理复杂的 JS 渲染并拿到最终的 HTML，然后再用 Cheerio 进行数据解析。这通常比直接用 Puppeteer 的 DOM API 进行数据提取要高效和简洁得多。

5. 总结

在这篇文章中，我们深入探索了 Cheerio 和 Puppeteer 两大工具。我们可以把它们的关系总结如下：Cheerio 是解析器和工具，专注于“读”数据，速度快但功能单一；Puppeteer 是浏览器控制器，专注于“模拟”和“看”，功能强大但资源消耗大。

关键要点回顾：

Cheerio 适合处理静态 HTML 页面、批量数据抓取，速度快但不支持 JavaScript。
Puppeteer 适合处理 JavaScript 渲染的页面、需要用户交互的场景，支持截图和生成 PDF。
性能差异：Cheerio 在处理速度和内存占用上远优于 Puppeteer，但在动态内容面前无能为力。

在未来的项目中，当你接到一个新的数据抓取或自动化任务时，不妨先问自己：这个页面是静态的吗？如果答案是肯定的，Cheerio 是首选；如果不仅需要数据，还需要交互或可视化操作，那么 Puppeteer 是你不二的选择。

希望这篇文章能帮助你更好地掌握它们。现在，就动手尝试一下吧！

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客