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)的更多相关文章

  1. Puppeteer学习笔记 (1)- 什么是Puppeteer

    本文链接:https://www.cnblogs.com/hchengmx/p/11006263.html 1. phantomjs介绍 在介绍puppeteer之前必须介绍一下phantomjs,p ...

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

    1.$(document).ready()  简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕. 2.$(window).load  在有时候确实我们有需 ...

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

    异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...

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

    page对象是puppeteer最常用的对象,它可以认为是chrome的一个tab页,主要的页面操作都是通过它进行的.Google的官方文档详细介绍了page对象的使用,这里我只是简单的小结一下. 客 ...

  5. Puppeteer: 更友好的 Headless Chrome Node API

    很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常 ...

  6. 微信公众号_订阅号_爬虫puppeteer

    puppeteer 借助 puppeteer 库实现爬虫,puppeteer 提供了高级 api 接口来操作 chrome 来 npm install puppeteer --save-dev    ...

  7. Puppeteer前端自动化测试实践

    本篇内容将记录并介绍使用Puppeteer进行自动化网页测试,并依靠约定来避免反复修改测试用例的方案.主要解决页面众多时,修改代码导致的牵连错误无法被发现的运行时问题.文章首发于个人博客.对前端感兴趣 ...

  8. Puppeteer入门初探

    本文来自网易云社区 作者:唐钊 最近在看 node 爬虫相关的一些东西,我记得还是很久以前常用的 node 爬虫工具还是 superagengt+cherrio,他们的思路是通过发起 http 请求然 ...

  9. 在linux (centos)上使用puppeteer实现网页截图

    1.安装nodejs和npm # 下载解压 wget -c https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz tar -xvf n ...

随机推荐

  1. Qt Quick 之 QML 与 C++ 混合编程具体解释

    Qt Quick 技术的引入.使得你能够高速构建 UI ,具有动画.各种绚丽效果的 UI 都不在话下.但它不是万能的.也有非常多局限性,原来 Qt 的一些技术,比方低阶的网络编程如 QTcpSocke ...

  2. 继续过Hard题目.0207

    接上一篇:http://www.cnblogs.com/charlesblc/p/6364102.html 继续过Hard模式的题目吧.   # Title Editorial Acceptance ...

  3. JavaScript 获取小数任一小数点后的位数的小数

    用Javascript取float型小数点后两位,例22.127456取成22.13,怎样做? 1.这样的方法最不推荐: function get(){ var s = 22.127456 + &qu ...

  4. linux虚拟机网络设置(本机使用wiff,自己的网)

      一.linux虚拟机网络设置(https://jingyan.baidu.com/album/4e5b3e1957979d91901e24f1.html?picindex=16) 选中虚拟机,点击 ...

  5. angularjs1-5,class,

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 将字符串序列化Object格式

    using Newtonsoft.Json; 首先引用  Newtonsoft.Json; 定义一个字符串 string str = "[{'ID':8.0,'PAGEID':201.0,' ...

  7. 基本类型转换成NSNumber类型

    int i=100; float f=2.34; NSNumber *n1=[NSNumber numberWithInt:i]; NSNumber *n2=[NSNumber numberWithF ...

  8. ROS-动态参数

    前言:在节点外部改变参数的方式有:参数服务器.服务.主题以及动态参数. 1.新建cfg文件 在chapter2_tutorials包下新建cfg文件夹,在cfg文件夹下新建chapter2.cfg文件 ...

  9. hive2.0函数大全

    Hive2.0函数大全(中文版)   摘要 Hive内部提供了很多函数给开发者使用,包括数学函数,类型转换函数,条件函数,字符函数,聚合函数,表生成函数等等,这些函数都统称为内置函数. 目录 数学函数 ...

  10. MVC、控件、一般处理程序中的session and cookie

    Mvc中: session: if (!string .IsNullOrEmpty(find)) //设置 Session["oip"] = "无锡"; Vie ...