初探 performance – 监控网页与程序性能

使用 window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据。

配合上报一些客户端浏览器的设备类型等数据,就可以实现简单的统计啦!

额,先看下兼容性如何:http://caniuse.com/#feat=nav-timing

这篇文章中 Demo 的运行环境为最新的 Chrome 的控制台,如果你用的是其他浏览器,自查兼容性哈~

先来看看在 Chrome 浏览器控制台中执行 window.performance 会出现什么:

简单解释下 performance 中的属性:

先看下一个请求发出的整个过程中,各种环节的时间顺序:

具体的含义都在注释里说明了,接下来我们看下能用这些数据做什么?

使用 performance.timing 信息简单计算出网页性能数据

在注释中,我用【重要】标注了我个人认为比较有用的数据,用【原因】标注了为啥要重点关注这个数据

 使用performance.getEntries() 获取所有资源请求的时间数据

这个函数返回的将是一个数组,包含了页面中所有的 HTTP 请求,这里拿第一个请求 window.performance.getEntries()[0] 举例。 注意 HTTP 请求有可能命中本地缓存,所以请求响应的间隔将非常短 可以看到,与 performance.timing 对比: 没有与 DOM 相关的属性:

  • navigationStart
  • unloadEventStart
  • unloadEventEnd
  • domLoading
  • domInteractive
  • domContentLoadedEventStart
  • domContentLoadedEventEnd
  • domComplete
  • loadEventStart
  • loadEventEnd

新增属性:

  • name
  • entryType
  • initiatorType
  • duration

与 window.performance.timing 中包含的属性就不再介绍了:

可以像 getPerformanceTiming 获取网页的时间一样,获取某个资源的时间:

 使用 performance.now() 精确计算程序执行时间

performance.now() 与 Date.now() 不同的是,返回了以微秒(百万分之一秒)为单位的时间,更加精准。

并且与 Date.now() 会受系统程序执行阻塞的影响不同,performance.now() 的时间是以恒定速率递增的,不受系统时间的影响(系统时间可被人为或软件调整)。

注意 Date.now() 输出的是 UNIX 时间,即距离 1970 的时间,而 performance.now() 输出的是相对于 performance.timing.navigationStart(页面初始化) 的时间。

使用 Date.now() 的差值并非绝对精确,因为计算时间时受系统限制(可能阻塞)。但使用 performance.now() 的差值,并不影响我们计算程序执行的精确时间。

 使用 performance.mark() 也可以精确计算程序执行时间

使用 performance.mark() 标记各种时间戳(就像在地图上打点),保存为各种测量值(测量地图上的点之间的距离),便可以批量地分析这些数据了。

直接上示例代码看注释便明白:

 

可以看到,for 循环 measureRandomFunc888 的时候

结束时间为: 4875.1199999969685

开始时间为:4875.112999987323

执行时间为:4875.1199999969685 – 4875.112999987323 = 0.00700000964

标记和测量用完了可以清除掉:

当然 performance.mark() 只是提供了一些简便的测量方式,比如之前我们测量 domReady 是这么测的:

其实就可以写成:

抛砖引玉:performance 数据能干啥用?

熟悉 Chrome 开发者工具的朋友应该知道:在开发环境下,其实我们自己打开 Chrome 的开发者工具,切换到网络面板,就能很详细的看到网页性能相关的数据。但当我们需要统计分析用户打开我们网页时的性能如何时,我们将 performance 原始信息或通过简单计算后的信息(如上面写到的 getPerformanceTiming() 和 getEntryTiming()) 上传到服务器,配合其他信息(如 HTTP 请求头信息),就完美啦~

1 1 收藏 1 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部