之前一篇关于无头浏览器的文章可以看这里 无头浏览器性能对比与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 启动参数列表
我们需要找到下面几种配置来提升速度：
- 如果将Dom解析和渲染放到同一进程，肯定能提升时间（进程上下文切换的时间）。对应的配置是
single-process - 部分功能disable掉，比如GPU、Sandbox、插件等，减少内存的使用和相关计算。
- 如果启动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的人。
喜欢编程的朋友可以关注我的个人公众号，保证每周三篇原创。