使用page.getMetrics()在puppeteer中获取页面加载时间

时间:2017-11-02 14:27:04

标签: javascript node.js google-chrome-headless puppeteer

我正在尝试使用puppeteer来衡量一组网站在我的环境中加载的速度。我的重点是网络连接的质量和网络速度,所以我很高兴知道页面加载所需的时间,对于外行人的负载定义,所有图像和html由浏览器下载。

通过使用puppeteer,我可以反复运行测试并精确测量加载时间的差异。

我可以看到64.0.3240.0 (r508693) page.getMetricsevent: 'metrics'已落地,这可以帮助我获得我想要的东西。

但是作为node和js的新手,我不知道如何阅读page.getMetrics以及哪些不同的键/值对在我的上下文中提供了有用的信息。

我目前对阅读指标的可怜尝试如下:

const puppeteer = require('puppeteer');
async function run() {
    const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
    const page = await browser.newPage();
    page.on('load', () => console.log("Loaded: " + page.url()));
    await page.goto('https://google.com');
    const metrics = page.getMetrics();
    console.log(metrics.Documents, metrics.Frames, metrics.JSEventListeners);
    await page.goto('https://yahoo.com');
    await page.goto('https://bing.com');
    await page.goto('https://github.com/login');
    browser.close();
}
run();

非常感谢任何使这些代码更受尊重的帮助:)

1 个答案:

答案 0 :(得分:5)

在最新版本中,page.metrics()可用:

它将返回一个带有一堆数字的对象,包括:

  • 采用指标样本时的时间戳
  • 所有页面布局的组合持续时间
  • 浏览器执行的所有任务的合并持续时间。

查看full list

的文档

你可以像这样使用它:

await page.goto('https://github.com/login');
const gitMetrics = await page.metrics();
console.log(gitMetrics.Timestamp) 
console.log(gitMetrics.TaskDuration)