[Puppeteer] Get a Page's Load Time with Puppeteer (window.profermence.timing)

本文介绍如何使用Google的Puppeteer库来收集页面加载时间等性能指标。通过设置网络条件为3G,模拟实际环境下的页面加载情况,并利用window.performance.timing API来获取页面加载的具体耗时。

In this lesson we are going to use Google's Puppeteer to gather metrics about a page's load time. We'll use a high level date subtraction method as well as gather data from the window performance timing. Then see how throttling the network to 3G affects the page's load time.

 

const getPageMetrics = async ()  => {
    const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
 await page.waitFor(1000); //delay 1 s

  // 3G metwork
  await page._client.send('Network.emulateNetworkConditions', {
  offline: false,
  latency: 200,
  downloadThroughput: 780*1024 / 8,
  uploadThroughput: 300*1024/8
})
  await page.goto('https://developers.google.com/web/');

const pref = await page.evaluate( _ => {
  const {loadEventEnd, navigationStart} = window.performance.timing;
  return ({
    loadTime: loadEventEnd - navigationStart
  })
})

console.log(`It took: ${pref.loadTime}ms`)
}

 

About 'winidow.profermence.timing', please check link.

About Chrom devtool protcol, please check link.

 

转载于:https://www.cnblogs.com/Answer1215/p/8455377.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值