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. structs中通过LabelValueBean构建下拉列表

    Action类中增加列表 List<LabelValueBean> list = new ArrayList<LabelValueBean>(); list.add(new L ...

  2. “System.IO.FileNotFoundException”类型的未经处理的异常在 mscorlib.dll 中发生

    这个错误是我在打包的时候.发现的,由于我移动了我的project的位置(从C盘移动到了D盘),看一下出错的代码: Dim strDB As String = System.Configuration. ...

  3. Oracle配置网络服务

    对于Oracle来说.不管是连接本地数据库还是远程连接server数据库,都须要在本机配置网络服务才可连接. 大家可能不明确为什么. 先拿SqlServer来说.SqlServer在连接数据库的时候仅 ...

  4. 利用js在文本框末尾获得焦点

    function moveEnd(obj) { obj.focus(); var len = obj.value.length; if (document.selection) { var sel = ...

  5. 深入理解 C 指针阅读笔记 -- 第五章

    Chapter5.h #ifndef __CHAPTER_5_ #define __CHAPTER_5_ /*<深入理解C指针>学习笔记 -- 第五章*/ /*不应该改动的字符串就应该用 ...

  6. DB-MySQL:MySQL GROUP BY

    ylbtech-DB-MySQL:MySQL GROUP BY 1.返回顶部 1. MySQL GROUP BY 语句 GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使 ...

  7. 操作系统-容器-引擎容器-百科:Docker

    ylbtech-操作系统-容器-引擎容器-百科:Docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上 ...

  8. 光标属性CSS cursor 属性

    CSS cursor 属性 CSS cursor属性,以前不知道,如果以后用到自己看的 <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生 ...

  9. 迭代Iterator的用法

    迭代→遍历: 一个标准化遍历各类容器里面的所有对象的方法类(典型的设计模式) 把访问逻辑从不同类型的集合类中抽象出来,从而避免向客户端暴露集合的内部结构 迭代(Iterator)与枚举(Enumera ...

  10. Ubuntu下安装tim/QQ/微信

    一.安装deepin-wine环境: 上https://github.com/wszqkzqk/deepin-wine-ubuntu页面下载zip包(或用git方式克隆),在“下载”目录下原地解压即可 ...