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. Android开发之使用BroadcastReceiver实现开机自己主动启动(源码分享)

    上一节已经介绍过BroadcastReceiver实现实时监听电量的功能,这节就来介绍一下假设实现开机自己主动启动的功能.这个比监听电量还简单不少 (1)在清单文件注冊权限 <uses-perm ...

  2. iOS库--.a与.framework

    一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的差别? 静态库:链接时完整地拷贝至可运行文件里.被多次使用就有多份冗余拷贝. 动态库:链接时不复制.程序执行时由系 ...

  3. 类扩展和category的小区别

    类扩展可以给类声明新的变量(属性),但是方法的实现只能在.m中实现 category可以给类声明新的方法实例,但是不可以添加变量(属性)

  4. C++ MAP使用

    1. map的构造函数map<int,string> maphai;map<char,int> maphai;map<string,char> mapstring; ...

  5. IIS7.0与AP.NET

    IIS7在请求的监听和分发机制上进行了革新性的改进,主要体现在对于Windows进行激活服务(Windows Process Activation Service ,WAS)的引入,将原来的W3SVC ...

  6. 使用最新vue_cli+webpack搭建的模版

    使用最新vue_cli+webpack搭建的模版,包含了常用的插件,router和axiox与测试插件.项目的结构如下: 框架下载地址:https://share.weiyun.com/5Cl7EbU

  7. JOptionPane提示框的一些常用用法

    1.1 showMessageDialog 显示一个带有OK 按钮的模态对话框. 下面是几个使用showMessageDialog 的例子: JOptionPane.showMessageDialog ...

  8. 如何在使用layer.prompt在输入值为空的情况下点击确定继续执行逻辑?

    突然发现在使用LayUI时,用到弹出层layer.prompt时,如果文本框输入值是空的话点击确定没有反应,不能向下执行. 但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做?? 示例:原代码如下 ...

  9. CF1038D Slime 构造

    题目大意: 有nnn只史莱姆qwq,每只史莱姆有一个分数,每次一只史莱姆可以吞掉左边的或者右边的史莱姆(要是有的话),然后ta的分数会减去被吞的史莱姆的分数,问最后剩下的史莱姆分数最大为多少 输入格式 ...

  10. webpack——bable-loader,core,preset,编译es6

    //文件夹,在命令行中npm init 之后可以一直回车,答y 出现文件 然后安装bable npm install -save-dev babel-loader babel-core 文件 然后我们 ...