使用 Puppeteer/Headless Chrome 报告性能指标

Question

我正在尝试使用 Puppeteer 来使用 headless Chrome 并尝试找到如何报告首次绘制时间的方法。我一直在查看 Chrome DevTools Performance API 并注意到有一个 Performance.metrics 但是当我订阅该事件时它从未被触发。

const client = page._client
await client.send('Page.enable')
await client.send('DOM.enable')
await client.send('Performance.enable')
client.on('Performance.metrics', (obj) => {
   console.log({obj})
})
await page.goto('http://example.com', {waitUntil: 'networkidle2'})

但是事件观察者永远不会被解雇。关于如何从性能观察指标数据有什么建议吗？

Answer 1

如果您询问 First Meaningful Paint，您可以使用以下方式获取：

await page.goto('http://example');

await page.waitFor(1000);
const performanceMetrics = await page._client.send('Performance.getMetrics'); 
console.log(performanceMetrics);

我写了一篇文章 "Test website performance with Puppeteer"，其中有一章专门介绍测量 FirstMeaningfulPaint。

使用 Puppeteer/Headless Chrome 报告性能指标

Using Puppeteer/Headless Chrome to report performance metrics

performance-testing

google-chrome-headless

puppeteer