Cheerio 和 Puppeteer 有什么区别？如何选择使用？ - 面试题

Cheerio 和 Puppeteer 都是 Node.js 中用于处理网页的工具，但它们的设计目标和使用场景有显著差异：

1. 核心区别

特性	Cheerio	Puppeteer
类型	HTML 解析器	浏览器自动化工具
JavaScript 执行	不支持	完全支持
动态内容	无法处理	完全支持
性能	极快	较慢
资源消耗	低	高
API	jQuery 风格	浏览器 DevTools 协议
使用场景	静态 HTML 解析	动态网页、截图、PDF

2. Cheerio 的特点

优势

轻量快速：核心代码只有几百行，解析速度极快
简单易用：jQuery 风格的 API，学习成本低
低资源消耗：不需要启动浏览器，内存占用少
适合批量处理：可以快速处理大量静态页面

局限性

无法执行 JavaScript：只能解析静态 HTML
无法处理动态内容：无法获取通过 JS 动态加载的数据
无法处理复杂交互：不支持点击、滚动等用户操作
无法截图或生成 PDF：没有可视化能力

适用场景

javascript
// 适合：静态网页数据提取
const cheerio = require('cheerio');
const axios = require('axios');

async function scrapeStaticSite() {
  const response = await axios.get('https://example.com');
  const $ = cheerio.load(response.data);
  
  return {
    title: $('title').text(),
    links: $('a').map((i, el) => $(el).attr('href')).get()
  };
}

3. Puppeteer 的特点

优势

完整浏览器环境：使用真实的 Chrome/Chromium
JavaScript 执行：可以执行页面中的所有 JavaScript
动态内容支持：可以获取 AJAX 加载的数据
交互能力：支持点击、输入、滚动等操作
可视化功能：支持截图、生成 PDF
网络拦截：可以监控和修改网络请求

局限性

资源消耗大：需要启动完整的浏览器实例
速度较慢：相比 Cheerio 慢很多
复杂度高：API 相对复杂，学习成本高
部署困难：在某些服务器环境部署较复杂

适用场景

javascript
// 适合：动态网页、需要交互的场景
const puppeteer = require('puppeteer');

async function scrapeDynamicSite() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });
  
  // 等待动态内容加载
  await page.waitForSelector('.dynamic-content');
  
  const data = await page.evaluate(() => {
    return {
      title: document.title,
      content: document.querySelector('.dynamic-content').textContent
    };
  });
  
  await browser.close();
  return data;
}

4. 性能对比

javascript
// Cheerio - 快速解析
const cheerio = require('cheerio');

async function cheerioBenchmark() {
  const start = Date.now();
  const $ = cheerio.load(htmlString);
  const items = $('.item').map((i, el) => $(el).text()).get();
  const time = Date.now() - start;
  
  console.log(`Cheerio: ${time}ms, ${items.length} items`);
  // 结果：通常 < 10ms
}

// Puppeteer - 完整浏览器
const puppeteer = require('puppeteer');

async function puppeteerBenchmark() {
  const start = Date.now();
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(htmlString);
  
  const items = await page.$$eval('.item', elements => 
    elements.map(el => el.textContent)
  );
  
  await browser.close();
  const time = Date.now() - start;
  
  console.log(`Puppeteer: ${time}ms, ${items.length} items`);
  // 结果：通常 500-2000ms
}

5. 选择建议

使用 Cheerio 的场景

网站内容是静态 HTML
需要处理大量页面
对性能要求高
只需要提取数据，不需要交互
服务器资源有限

使用 Puppeteer 的场景

网站使用 JavaScript 动态加载内容
需要模拟用户操作（点击、滚动等）
需要截图或生成 PDF
需要处理复杂的 SPA 应用
需要监控网络请求

混合使用场景

javascript
// 先用 Puppeteer 获取动态内容，再用 Cheerio 解析
const puppeteer = require('puppeteer');
const cheerio = require('cheerio');

async function hybridScrape() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 使用 Puppeteer 加载动态页面
  await page.goto('https://example.com/dynamic');
  await page.waitForSelector('.content');
  
  // 获取 HTML
  const html = await page.content();
  await browser.close();
  
  // 使用 Cheerio 快速解析
  const $ = cheerio.load(html);
  const data = $('.item').map((i, el) => ({
    title: $(el).find('.title').text(),
    content: $(el).find('.content').text()
  })).get();
  
  return data;
}

6. 实际应用示例

Cheerio - 抓取静态博客

javascript
async function scrapeBlog() {
  const response = await axios.get('https://blog.example.com');
  const $ = cheerio.load(response.data);
  
  return $('.post').map((i, el) => ({
    title: $(el).find('h2').text(),
    date: $(el).find('.date').text(),
    excerpt: $(el).find('.excerpt').text()
  })).get();
}

Puppeteer - 抓取动态电商网站

javascript
async function scrapeShop() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://shop.example.com');
  
  // 滚动加载更多商品
  for (let i = 0; i < 5; i++) {
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(1000);
  }
  
  const products = await page.$$eval('.product', items => 
    items.map(item => ({
      name: item.querySelector('.name').textContent,
      price: item.querySelector('.price').textContent
    }))
  );
  
  await browser.close();
  return products;
}

总结

Cheerio：适合静态页面、高性能需求、批量处理
Puppeteer：适合动态页面、需要交互、可视化需求
混合使用：先用 Puppeteer 加载动态内容，再用 Cheerio 解析，可以获得最佳的性能和功能平衡