使用Cheerio爬取网页返回不完整HTML，如何获取app容器内动态内容

问题原因 #

你要爬取的站点属于客户端渲染的单页应用（SPA），初始返回的HTML仅包含空的#app节点和JS资源，页面可见内容是浏览器加载执行完JS脚本后动态生成的。cheerio仅能解析静态HTML文本，不具备JS执行能力，因此无法获取到动态渲染的内容。

解决方案 #

方案1：使用无头浏览器执行JS后再提取内容（适配绝大多数SPA场景） #

可以使用puppeteer这类支持无头模式的浏览器工具，模拟浏览器加载页面、执行JS，等页面渲染完成后再提取内容，示例代码如下：

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 跳转目标页面，等待网络空闲后认为渲染完成
  await page.goto('https://www.fideyo.com/list', { waitUntil: 'networkidle2' });
  // 获取渲染完成后的完整HTML
  const html = await page.content();
  
  // 之后可以继续用cheerio解析html，也可以直接用puppeteer的API提取内容
  const cheerio = require('cheerio');
  const $ = cheerio.load(html);
  console.log($('#app').html());

  await browser.close();
})();

使用前需要先安装依赖：npm install puppeteer cheerio

方案2：直接调用站点后台接口获取数据 #

如果不想启动浏览器消耗资源，可以通过浏览器开发者工具的「网络」面板，筛选页面加载时请求数据的接口，直接调用接口获取原始数据，该方案效率远高于页面渲染爬取，适合批量采集场景。

内容的提问来源于stack exchange，提问作者BleedFeed