Perfomance 性能监控

[Leo-lin214]

在前端开发里，常常需要对某个页面进行相应的性能监控，接着拿着数据来跟运维部门进行协调分析，看看到底是哪部分导致了整个页面的速度。

那么监控需要用的就是今天的主角，Performance API，一个专门为了性能而诞生的 API，兼容性必须得 IE9+（其实兼容性已经足够好了...）。

接下来我们就来深入理解 Performance。

如何使用 Performance API

只需要在项目的入口文件中使用以下代码即可。

var performance = window.performance || window.msPerformance || window.webkitPerformance
if(performance) {
  // 访问performance
}

那么到底 Performance API 中带地都有哪些东西？在这里我就直接列出来。

• memory。与内存相关。
• navigation。与页面来源相关。
• timing：与页面性能时间相关。

需要注意的是，在某些情况下，例如页面还没初始化完成时，这时候直接访问performance.timing是为 null 的。为了处理这种情况，我们可以使用一个定时器来解决。

var performance = window.performance || window.msPerformance || window.webkitPerformance
if(performance) {
  let performanceTiming = performance.timing
  let performanceInterval = setInterval(() => {
    if(performanceTiming) {
      clearInterval(performanceInterval)
      // ...
    }
  }, 100)
}

接下来我们就拿 memory、navigation 和 timing 来分析一下。

performance.memory 处理内存

在 performance.memory 中主要包含有三个值，分别是。

• usedJSHeapSize。
• totalJSHeapSize。
• jsHeapSizeLimit。

usedJSHeapSize 主要用于表示 Javascript 对象（包括V8引擎内部对象）所占用的内存数。

totalJSHeapSize 主要用于表示整个项目中可使用的内存数。

jsHeapSizeLimit 主要用于表示内存大小的限制。

需要注意的是，当 usedJSHeapSize > totalJSHeapSize 时，会导致内存泄漏。

performance.navigation 处理页面来源

在 performance.navigation 中只有两个值，分别是：

• redirectCount。
• type。

redirectCount 用于表示在同源页面情况下，若有重定向的话，页面经历多少次重定向到达当前页面，默认为 0。

type 表示到达当前页面的方式，其中：

• 0 表示直接进入当前页面，并不是重定向或者刷新页面。
• 1 表示通过调用 window.location.reload() 方法刷新到达当前页面。
• 2 表示通过浏览器原生的前进后退按钮到达当前页面。
• 255 表示非以上方式到达当前页面。

需要注意的是，redirectCount 的值必须是在同源页面情况下的重定向到达当前页面才会有值。

performance.timing 处理页面性能时间

要说 performance 中最主要的 API 莫过于 timing 了，主要的功能就是记录页面运行的每一步时间，可用于统计以及和运维部门之间协调的主要工具。

那么 performance.timing 长什么样呢？先看看下面这张图。

相信很多童鞋都会看过这个图，那么图上的每一个时间节点都是表示什么？别急，接下来我们就来一一解答。

timing属性名	含义
navigationStart	上一个页面卸载时（即还没调用 unload 事件）的时间戳，必须是同源页面，否则值就和 fetchStart 相等，或者没有上一个页面时，值也和 fetchStart 相等
redirectStart	第一个HTTP重定向的开始时间戳
redirectEnd	最后一个HTTP重定向的结束时间戳
fetchStart	浏览器已经准备好使用 HTTP 请求来获取文档的时间戳，会出现在检查缓存之前
domainLookupStart	DNS查询的开始时间戳
domainLooupEnd	DNS查询的结束时间戳
connectStart	TCP开始建立连接的时间戳
secureConnectStart	HTTPS开始建立握手连接的时间戳
requestStart	浏览器正式发送HTTP请求获取文档的时间戳
responseStart	浏览器收到服务端的第一个字节的时间戳
unloadEventStart	上一个页面卸载后调用 unload 事件的开始时间戳，若没有上一个页面，值会为 0
unloadEventEnd	上一个页面卸载后调用 unload 事件的结束时间戳，若没有上一个页面，值会为 0
responseEnd	浏览器收到服务端的最后一个字节的时间戳
domLoading	当前页面DOM结构开始解析
domInteractive	当前页面DOM结构结束解析，开始加载内嵌资源时
domContentLoadedEventStart	所有需要被执行的脚本已经开始解析的时间戳
domContentLoadedEventEnd	所有需要被执行的脚本已经被执行的时间戳
domCompleted	当前文档解析完成的时间戳
loadEventStart	load事件触发的时间戳
loadEventEnd	load事件已经执行完的时间戳

那么接下来就看看如何计算一些常见的性能监测点。

• 重定向耗时：redirectEnd - redirectStart
• DNS查询耗时：domainLookupEnd - domainLookupStart
• TCP连接耗时：connectEnd - connectStart
• HTTP请求耗时：responseStart - requestStart
• 解析dom树耗时：domCompleted - domInteractive
• 白屏时间：responseStart - navigationStart
• dom ready时间：domContentLoadedEventEnd - navigationStart
• onload 时间：loadEventEnd - navigationStart

需要注意的是，当到达 domInteractive 时间点时，用户是可以与网站进行交互的！

最后的最后，可参考一下别人写的好文章。

深入理解前端性能监控