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

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.

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

原文地址:https://www.cnblogs.com/Answer1215/p/8455377.html

时间: 2024-08-30 17:30:29

[Puppeteer] Get a Page's Load Time with Puppeteer (window.profermence.timing)的相关文章

$(document).ready() $(window).load 及js的window.onload

1.$(document).ready()  简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕. 2.$(window).load  在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用 3.window.onload=function(){}  必须等到页面内包括图片的所有元素加载完毕后才能执行 另:defer属性 在脚本中写defer,<script type="text/javascript" defer><

定义页面加载和导航时要执行的函数/自定义事件

/** * Copyright 2017 Google Inc. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www

异步加载css 和 谷歌浏览器各实用小工具介绍

异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html一起解析,这个暂时无法做手脚,但是我们可以把一些非关键的css进行异步化,也就是异步加载. 市面上有很多工具可以达到这个效果,比如loadCSS 这次要说的这个异步加载方式,其实也是loadCSS中所用到的,代码如下: <link rel="stylesheet" href=&quo

使用Puppeteer进行数据抓取(二)——Page对象

page对象是puppeteer最常用的对象,它可以认为是chrome的一个tab页,主要的页面操作都是通过它进行的.Google的官方文档详细介绍了page对象的使用,这里我只是简单的小结一下. 客户端模拟 页面模拟设置相关函数有如下几个, page.setViewport: 设置视图大小 page.setUserAget: 设置UserAgent page.SetCookie: 设置Cookie 另外,也可以使用emulate函数提供快捷设置,puppeteer/DeviceDescript

搜索await page.waitForSelector(allResultsSelector);

/** * Copyright 2017 Google Inc. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www

Network Load Balancing Technical Overview--reference

http://technet.microsoft.com/en-us/library/bb742455.aspx Abstract Network Load Balancing, a clustering technology included in the Microsoft Windows 2000 Advanced Server and Datacenter Server operating systems, enhances the scalability and availabilit

jq load()方法用法

//鼠标划上去默认样式添加 listNow = getUrlParam("page"); $(".header").load("../file/head.html",function(){ $(".l-list li a").eq(listNow).addClass("active"); }); $(".footer").load("../file/footer.html&qu

$(document).ready vs. $(window).load

jQuery offers two powerful methods to execute code and attach event handlers: $(document).ready and $(window).load. The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t load

How to load a local .CSS file &amp; JavaScript resources using iPhone UIWebView Class

This post will cover the basic setup and creation of an application with web content for iPhone that will load local CSS files and some useful JavaScript functions. Most of these hints I found partially in different blogs and forums listed in the ref