puppeteer优化小技巧

时间 2019-11-07 标签 puppeteer 优化技巧

Puppeteer是一个Node库，它提供了高级API来经过DevTools协议控制Chromium或Chrome。javascript

经过puppeteer咱们能够编写脚本模拟浏览器的相关行为，实现如下功能：java

网页截图并保存为图片或 pdf 。
模拟表单提交，键盘输入，按钮点击，滑块移动等dom操做。
实现UI的自动化测试。
做为抓包工区对网页性能进行调试和分析。
编写定制化爬虫，解决传统HTTP抓取SPA页面难以处理异步请求的问题。

在使用puppeteer实现以上功能，咱们经过几个小技巧提高pupeteer程序的效率。git

过滤请求

当咱们使用puppeteer对页面异步渲染的dom结构进行解析时，每每须要等待页面完成渲染完成以后，才能使用脚本进行操做。但页面渲染过程当中也包含了许多静态资源如：图片/音频/视频/样式文件等。此时咱们能够经过page.setRequestInterception方法，对网页请求进行过滤，拦截静态资源的请求，加快页面渲染速度。代码示例以下：github

// 开启请求拦截功能
    page.setRequestInterception(true);
    
    page.on('request', async req => {
        // 根据请求类型过滤
        const resourceType = req.resourceType();
        if (resourceType === 'image') {
            req.abort();
        else {
            req.continue();
        }
    });
复制代码

推荐拦截的请求类型：chrome

const blockedResourceTypes = [
    'image',
    'media',
    'font',
    'texttrack',
    'object',
    'beacon',
    'csp_report',
    'imageset',
];

const skippedResources = [
    'quantserve',
    'adzerk',
    'doubleclick',
    'adition',
    'exelator',
    'sharethrough',
    'cdn.api.twitter',
    'google-analytics',
    'googletagmanager',
    'google',
    'fontawesome',
    'facebook',
    'analytics',
    'optimizely',
    'clicktale',
    'mixpanel',
    'zedo',
    'clicksor',
    'tiqcdn',
];
复制代码

代理请求

除了过滤请求以外，咱们也可用代理网页渲染过程当中发出的请求。在某些爬虫项目达到不被发爬的目的，代码示例以下：canvas

page.on('request', async req => {
    // 代理请求
    const response = await fetch({
        url: req.url(),
        method: req.method(),
        headers: req.headers(),
        body: req.postData(),
        proxy: getProxyIp(),
        resolveWithFullResponse: true,
    });
    // 响应请求
    req.respond({
        status: response.statusCode,
        contentType: response.headers['content-type'],
        headers: response.headers || req.headers(),
        body: response.body,
    });
});
复制代码

复用browser

使用puppeteer.connect比puppeteer.launch启动一个浏览器实例要快不少（参考）,因此当咱们须要开启多个broswer实例时，能够经过缓存wsEndpoint来达到复用的目的，代码实例以下：api

let wsEndpoint = await cache.get(Parser.WS_KEY);
let broswer;
try {
    browser = !wsEndpoint
        ? await puppeteer.launch(config)
        : await puppeteer.connect({
              browserWSEndpoint: this.wsEndpoint,
          });
} catch (err) {
    browser = await puppeteer.launch(config);
} finally {
    wsEndpoint = this.browser.wsEndpoint();
    await cache.set(Parser.WS_KEY, 60 * 60 * 1000, this.wsEndpoint);
}
复制代码

禁用浏览器多余功能

puppeteer为咱们提供了完善浏览器环境，但实际开发中，有不少默认开启的功能是项目自己不须要的，此时咱们能够设置浏览器启动参数来禁用额外的功能：浏览器

puppeteer.launch({
        args: [
            '--no-sandbox',                    // 沙盒模式
            '--disable-setuid-sandbox',        // uid沙盒
            '--disable-dev-shm-usage',         // 建立临时文件共享内存
            '--disable-accelerated-2d-canvas', // canvas渲染
            '--disable-gpu',                   // GPU硬件加速
        ]
    });
复制代码

puppeteer优化小技巧

过滤请求

代理请求

复用browser

禁用浏览器多余功能

参考资料