网页性能监控利器---Performance

本文作者:IMWeb went 原文出处:IMWeb社区 未经同意,禁止转载

一、性能监测&数据上报

作为前端工程师,无论是业务需要还是我们对于自己开发的Web站点的要求,往往都有性能监测以及数据上报的需求。而Performance API除了简单易用对前端工程师极其友好的特点之外,还有能提供高精确度的时间测量(千分之一毫秒)这个特点。

二、Web Performance API

1.Performance方法

Performance提供的方法可以灵活使用,获取到页面加载等标记的耗时情况。

performance.now()    //返回当前到页面打开时刻的耗时,精确到千分之一毫秒
performance.mark('worker_installed')    //建立测速标记
performance.clearMarks()    //清除标记
performance.getEntries()    //对网页发起的所有HTTP请求耗时信息统计后,以数组方式返回

2.Performance属性

Performance.timing属性对象提供了浏览器从打开网页到加载完成之间各个节点的耗时数据,包括重定向开始、DNS查询、浏览器响应数据、DOM解析等相关节点。通过组合计算我们可以的出我们所需的各个阶段的耗时数据,从而进行分析。

navigationStart:浏览器窗口的前一个网页关闭时发生unload事件时的Unix时间戳,属于最前的测量时间点。

unloadEventStart:前网页与当前网页同属一个域名时,返回前一个网页的unload事件发生时的Unix时间戳。

unloadEventEnd:前网页与当前网页同属一个域名时,返回前一个网页unload事件的回调函数结束时的Unix时间戳。

redirectStart:返回第一个HTTP跳转开始时的Unix时间戳。

redirectEnd:返回最后一个HTTP跳转结束时的Unix时间戳。

fetchStart:返回浏览器准备使用HTTP请求读取文档等资源时的Unix时间戳,在网页查询本地缓存之前发生。

domainLookupStart:返回域名查询开始时的Unix时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值。

domainLookupEnd:返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值。

connectStart:返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接(persistent connection),则返回值等同于fetchStart属性的值。

connectEnd:返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接,则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

secureConnectionStart:返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接,则返回0。

requestStart:返回浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的Unix毫秒时间戳。

responseStart:返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的Unix毫秒时间戳。

responseEnd:返回浏览器从服务器收到(或从本地缓存读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳。

domLoading:返回当前网页DOM结构开始解析时(即Document.readyState属性变为“loading”、相应的readystatechange事件触发时)的Unix毫秒时间戳。

domInteractive:返回当前网页DOM结构结束解析、开始加载内嵌资源时(即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时)的Unix毫秒时间戳。

domContentLoadedEventStart:返回当前网页DOMContentLoaded事件发生时(即DOM结构解析完毕、所有脚本开始运行时)的Unix毫秒时间戳。

domContentLoadedEventEnd:返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。

domComplete:返回当前网页DOM结构生成时(即Document.readyState属性变为“complete”,以及相应的readystatechange事件发生时)的Unix毫秒时间戳。

loadEventStart:返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生,返回0。

loadEventEnd:返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生,返回0。

Performance.navigation属性对象提供了浏览器的一些行为信息。

Performance.navigation.type    //通过整数值表示网页从何加载
//0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载
//1:网页通过“重新加载”按钮或者location.reload()方法加载
//2:网页通过“前进”或“后退”按钮加载
//255:其他来源的加载

Performance.navigation.redirectCount    //页面重定向次数

Performance.memory属性对象提供了浏览器的内存使用情况。

三、总结

1.对于网页的测速上报需求,可以通过对Performance.timing对象的属性排列组合,计算出业务需要的测速数据。

2.对于网页的性能监测需求,可以通过对Performance.memory对象进行分析,得出内存使用情况等数据。

3.对于页面的其他业务监测需求,可以通过Performance提供的其他方法进行灵活使用,计算出业务所需数据。

四、参考文档

1.https://developer.mozilla.org/zh-CN/docs/Web/API/Performance

2.http://javascript.ruanyifeng.com/bom/performance.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

Cookiel劫持测试工具 – Cookie Injecting Tools

Cookie Injecting Tools 是一款简单的开源cookie利用工具,是Chrome浏览器上开发的一个扩展插件,能够灵活地进行SQL注入测试,编辑...

2727
来自专栏程序员阿凯

一条大河波浪宽 -- 数据库连接池实现

1174
来自专栏大内老A

我的WCF之旅(3):在WCF中实现双工通信

双工(Duplex)模式的消息交换方式体现在消息交换过程中,参与的双方均可以向对方发送消息。基于双工MEP消息交换可以看成是多个基本模式下(比如请求-回复模式和...

2309
来自专栏腾讯云TStack专栏

对象存储,了解一下

? 对象存储,通常指 S3 (Simple Storage Service) 服务,由AWS提供公有云服务,而 Ceph 也可以提供兼容 S3 协议的对象存储...

8682
来自专栏青玉伏案

Git知识总览(六) Git分支中的远程操作实践

前几篇博客陆陆续续的讲了好多关于Git操作的内容, 其中在上篇博客聊了《Git中的merge、rebase、cherry-pick以及交互式rebase》,本篇...

35411
来自专栏小尘哥的专栏

springboot中使用tk.mybatis代码生成器

tk.mybatis是对mybatis的进一步封装,它对基本的单表的增删改查又做了进一步封装,springboot中的使用之前已经写过了,如果没用过,请参考我之...

3262
来自专栏SDNLAB

ODL碳版本模块开发及流程梳理

文章主要基于ODL碳版本,进行简单插件的构建、安装、部署,以一个插件开发为例,介绍ODL新版本开发过程中的一些具体问题。 ? 一、碳版本简易开发流程 1.1 开...

5438
来自专栏mySoul

ejs koa

npm https://www.npmjs.com/package/koa-static

1384
来自专栏有趣的django

Flask请求扩展和数据库连接池

3150
来自专栏零基础使用Django2.0.1打造在线教育网站

利用Flask搭建微电影视频网站(五):访问控制器

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

4262

扫码关注云+社区

领取腾讯云代金券