基于puppeteer的动态爬虫，爬取SPA项目页面

需求描述

需要爬取SPA的页面，以前该页面是静态的，可以使用静态爬取的方式进行爬取，速度可以很快，如果页面是vue或者react等框架写的页面，静态爬虫无法正确获取页面，需要通过动态爬取的方式来获取正确的页面数据。

实现

puppeteer框架，它提供了NodeJS高级API来控制Chrome。Puppeteer 默认以无头（无界面）方式运行，但也可以配置为运行有界面的Chrome。Puppeteer 提供了一系列 API，通过 Chrome DevTools Protocol 协议控制 Chromium/Chrome 浏览器的行为。链接: puppeteer地址。该框架使用无界面浏览器渲染完整的页面后，再将渲染后的页面数据返回，因此我们可以得到跟我们在浏览器看到的页面数据一模一样的数据，然后再进行节点分析，这里为了方便我使用cherrio的jq装载器来装载页面数据

代码如下

async function puppeteerHandler(item) {
    const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
    // 创建新页面
    const page = await browser.newPage();
    // 打开页面
    await page.goto('https://baike.baidu.com/item/' + encodeURI(item.keyWord));
    const resultsSelector = '.main-content';
    // 等待节点加载完成可以获取需要的节点信息
    const links = await page.evaluate( resultsSelector => {
      return document.querySelectorAll(resultsSelector)[0]
    }, resultsSelector);
    // 获取页面内容
    const content = await page.content()
    await browser.close();
    // 分析页面信息
    handlerResult(content, item)
}

分析页面信息就是节点分析，具体代码不做描述

总结

静态爬取数据会快很多，动态爬取速度会慢，因为需要打开浏览器，然后再等待页面加载完成，需要时间去渲染，因此会比静态的慢一些，但是可以获取比较复杂的页面，也可以以此来做服务端渲染。