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

【问题标题】：Using page.getMetrics() to get page load time in puppeteer在 puppeteer 中使用 page.getMetrics() 获取页面加载时间
【发布时间】：2017-11-02 14:27:04
【问题描述】：

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

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

我可以看到 64.0.3240.0 (r508693) page.getMetrics 和 event: '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();

非常感谢任何有助于将此代码用于更受尊敬的东西的帮助:)

【问题讨论】：

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

【解决方案1】：

在最近的版本中，您有 page.metrics() 可用：

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

获取指标样本时的时间戳
所有页面布局的总持续时间
浏览器执行的所有任务的总持续时间。

查看full list 的文档

你可以这样使用它：

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

【讨论】：

太棒了，谢谢！