[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)的更多相关文章
- Puppeteer学习笔记 (1)- 什么是Puppeteer
本文链接:https://www.cnblogs.com/hchengmx/p/11006263.html 1. phantomjs介绍 在介绍puppeteer之前必须介绍一下phantomjs,p ...
- $(document).ready() $(window).load 及js的window.onload
1.$(document).ready() 简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕. 2.$(window).load 在有时候确实我们有需 ...
- 异步加载css 和 谷歌浏览器各实用小工具介绍
异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...
- 使用Puppeteer进行数据抓取(二)——Page对象
page对象是puppeteer最常用的对象,它可以认为是chrome的一个tab页,主要的页面操作都是通过它进行的.Google的官方文档详细介绍了page对象的使用,这里我只是简单的小结一下. 客 ...
- Puppeteer: 更友好的 Headless Chrome Node API
很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常 ...
- 微信公众号_订阅号_爬虫puppeteer
puppeteer 借助 puppeteer 库实现爬虫,puppeteer 提供了高级 api 接口来操作 chrome 来 npm install puppeteer --save-dev ...
- Puppeteer前端自动化测试实践
本篇内容将记录并介绍使用Puppeteer进行自动化网页测试,并依靠约定来避免反复修改测试用例的方案.主要解决页面众多时,修改代码导致的牵连错误无法被发现的运行时问题.文章首发于个人博客.对前端感兴趣 ...
- Puppeteer入门初探
本文来自网易云社区 作者:唐钊 最近在看 node 爬虫相关的一些东西,我记得还是很久以前常用的 node 爬虫工具还是 superagengt+cherrio,他们的思路是通过发起 http 请求然 ...
- 在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 ...
随机推荐
- Android开发之使用BroadcastReceiver实现开机自己主动启动(源码分享)
上一节已经介绍过BroadcastReceiver实现实时监听电量的功能,这节就来介绍一下假设实现开机自己主动启动的功能.这个比监听电量还简单不少 (1)在清单文件注冊权限 <uses-perm ...
- iOS库--.a与.framework
一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的差别? 静态库:链接时完整地拷贝至可运行文件里.被多次使用就有多份冗余拷贝. 动态库:链接时不复制.程序执行时由系 ...
- 类扩展和category的小区别
类扩展可以给类声明新的变量(属性),但是方法的实现只能在.m中实现 category可以给类声明新的方法实例,但是不可以添加变量(属性)
- C++ MAP使用
1. map的构造函数map<int,string> maphai;map<char,int> maphai;map<string,char> mapstring; ...
- IIS7.0与AP.NET
IIS7在请求的监听和分发机制上进行了革新性的改进,主要体现在对于Windows进行激活服务(Windows Process Activation Service ,WAS)的引入,将原来的W3SVC ...
- 使用最新vue_cli+webpack搭建的模版
使用最新vue_cli+webpack搭建的模版,包含了常用的插件,router和axiox与测试插件.项目的结构如下: 框架下载地址:https://share.weiyun.com/5Cl7EbU
- JOptionPane提示框的一些常用用法
1.1 showMessageDialog 显示一个带有OK 按钮的模态对话框. 下面是几个使用showMessageDialog 的例子: JOptionPane.showMessageDialog ...
- 如何在使用layer.prompt在输入值为空的情况下点击确定继续执行逻辑?
突然发现在使用LayUI时,用到弹出层layer.prompt时,如果文本框输入值是空的话点击确定没有反应,不能向下执行. 但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做?? 示例:原代码如下 ...
- CF1038D Slime 构造
题目大意: 有nnn只史莱姆qwq,每只史莱姆有一个分数,每次一只史莱姆可以吞掉左边的或者右边的史莱姆(要是有的话),然后ta的分数会减去被吞的史莱姆的分数,问最后剩下的史莱姆分数最大为多少 输入格式 ...
- webpack——bable-loader,core,preset,编译es6
//文件夹,在命令行中npm init 之后可以一直回车,答y 出现文件 然后安装bable npm install -save-dev babel-loader babel-core 文件 然后我们 ...