Puppeteer性能优化与执行速度提升

0.582字数 1451阅读 930

之前一篇关于无头浏览器的文章可以看这里 无头浏览器性能对比与Puppeteer的优化文档 ,这篇文章提了部分优化思路和使用场景,就是没具体的代码。今天整理了使用技巧与代码分享给大家(为什么我要说大家)。下文中的代码都用在了生产环境中,单台机器能达到100QPS(没优化之前是20QPS)。平均请求响应时间在400ms左右,测试程序为执行一段Echarts代码生成柱状图然后截图返回,400ms比请求某些静态资源的时间都短。

Puppeteer自身不会消耗太多资源,耗费资源的大户是Chromium Headless。所以需要理解Chromium运行的原理,才能方便优化。

Chromium消耗最多的资源是CPU,一是渲染需要大量计算,二是Dom的解析与渲染在不同的进程,进程间切换会给CPU造成压力(进程多了之后特别明显)。其次消耗最多的是内存,Chromium是以多进程的方式运行,一个页面会生成一个进程,一个进程占用30M左右的内存,大致估算1000个请求占用30G内存,在并发高的时候内存瓶颈最先显现。

优化最终会落在内存和CPU上(所有软件的优化最终都要落到这里),通常来说因为并发造成的瓶颈需要优化内存,计算速度慢的问题要优化CPU。使用Puppeteer的用户多半会更关心计算速度,所以下面我们谈谈如何优化Puppeteer的计算速度。

优化Chromium启动项

通过查看Chromium启动时都有哪些参数可以配置,能找到大部分线索,因为Chromium这种顶级的开源产品,文档与接口都是非常清晰的,肯定可以找到相关配置项来定制启动方式。Chromium 启动参数列表

我们需要找到下面几种配置来提升速度:

  1. 如果将Dom解析和渲染放到同一进程,肯定能提升时间(进程上下文切换的时间)。对应的配置是 single-process
  2. 部分功能disable掉,比如GPU、Sandbox、插件等,减少内存的使用和相关计算。
  3. 如果启动Chromium时能绑定到某个CPU核上也能提升速度(单核上进行进程切换耗费的时间更少)。可惜没有找到对应的配置,官方文档写的是Chromium启动时会自动绑定CPU大核(ARM架构的CPU通常有大小核之分),依此推测Chromium启动时是会绑核的。(此处我并未验证)

最后配置如下:

const browser = await puppeteer.launch(
{
    headless:true,
    args: [
        ‘–disable-gpu’,
        ‘–disable-dev-shm-usage’,
        ‘–disable-setuid-sandbox’,
        ‘–no-first-run’,
        ‘–no-sandbox’,
        ‘–no-zygote’,
        ‘–single-process’
    ]
});

Chromium 启动参数列表 文档中的配置项都可以尝试看看,我没有对所有选项做测试,但可以肯定存在某些选项能提升Chromium速度。

Chromium的启动项优化后能节省200ms左右的请求时间,收益非常可观。

优化Chromium执行流程

接下来我们再单独优化Chromium对应的页面。我之前的文章中提过,如果每次请求都启动Chromium,再打开tab页,请求结束后再关闭tab页与浏览器。流程大致如下:

请求到达->启动Chromium->打开tab页->运行代码->关闭tab页->关闭Chromium->返回数据

真正运行代码的只是tab页面,理论上启动一个Chromium程序能运行成千上万的tab页,可不可以复用Chromium每次只打开一个tab页然后关闭呢?当然是可以的,Puppeteer提供了puppeteer.connect() 方法,可以连接到当前打开的浏览器。流程如下:

请求到达->连接Chromium->打开tab页->运行代码->关闭tab页->返回数据

代码如下:

const MAX_WSE = 4;  //启动几个浏览器 
let WSE_LIST = []; //存储browserWSEndpoint列表
init();
app.get('/', function (req, res) {
    let tmp = Math.floor(Math.random()* MAX_WSE);
    (async () => {
        let browserWSEndpoint = WSE_LIST[tmp];
        const browser = await puppeteer.connect({browserWSEndpoint});
        const page = await browser.newPage();
        await page.goto('file://code/screen/index.html');
        await page.setViewport({
            width: 600,
            height: 400
        });     
        await page.screenshot({path: 'example.png'});
        await page.close();
        res.send('Hello World!');
    })();
});

function init(){
    (async () => {
        for(var i=0;i<MAX_WSE;i++){
            const browser = await puppeteer.launch({headless:true,
                args: [
                '--disable-gpu',
                '--disable-dev-shm-usage',
                '--disable-setuid-sandbox',
                '--no-first-run',
                '--no-sandbox',
                '--no-zygote',
                '--single-process'
            ]});
            browserWSEndpoint = await browser.wsEndpoint();
            WSE_LIST[i] = browserWSEndpoint;
        }
        console.log(WSE_LIST);
    })();   
}

程序启动时(使用Express提供Web接口),初始化一定数量的无头浏览器,并保存 WSEndpoint列表,当收到请求时,通过随机数做简单的负载均衡(利用多核特性)。

使用tab方式渲染后请求速度提升了200ms左右,一个tab进程使用内存降到20M以内,带来的收益也非常可观。不过这里要注意,官方并不建议这样做,因为一个tab页阻塞或者内存泄露会导致整个浏览器阻塞并Crash。万全的解决办法是定期重启程序,可参考php-fpm的做法,当请求1000次或者内存超过限制后重启对应的进程。

合理选择无头浏览器与版本

Puppeteer当前支持Chromium和Firefox,我测试了Firefox,结论是Firefox headless现在还不够成熟,相关的资料也比较少,不建议在生产环境使用。Chromium的版本非常多,百花齐放,这里我建议使用chromium-headless 这是一个独立的版本,能为你的程序带来200ms左右的性能提升(这个最爽,啥都不用做)。安装与使用方式(CentOS):

$ yum install chromium-headless
$ /usr/lib64/chromium-browser/headless_shell (调用路径)

其他系统可以自行查找该版本,找不到可以选择自己编译。

最后

Puppeteer(其实是Chromium)的优化空间还非常大,需要不停的去实验和测试。希望我提供的思路能帮助正在尝试优化Puppeteer的人。

喜欢编程的朋友可以关注我的个人公众号,保证每周三篇原创。
程序员编程日志

推荐阅读更多精彩内容