Web性能监控

by Posted on

web性能的监控，可以用量化为时间指标来进行判断。Web Performance 接口允许网页中的 JavaScript 代码可以通过具体的函数（由 window 对象的 performance 属性提供）测量当前网页页面或者 web应用的性能。 首先我们来看看js中通过调用window.performance拿到的一组精确数据（这是我从console中输入window.performance得到的数据）：

数据有了，就有必要了解各种数据的含义：

当然也可以从官方技术文档中了解：点这里

Performance属性

memory

这个属性只在Chrome浏览器中得到支持，所以小心使用。memory有三个属性：

usedJSHeapSize: JS对象占用的内存。

totalJSHeapSize: 总共可供使用的内存。

jsHeapSizeLimit: 内存大小限制。

这个包括两个属性：

redirectCount: 页面重定向跳转的次数，0表示没有重定向

type: 有四种值

0 即 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）

1 即 TYPE_RELOAD 通过 window.location.reload() 刷新的页面

2 即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）

255 即 TYPE_UNDEFINED 非以上方式进入的页面

timing(性能监控关键)

属性值较多，一个个来理

navigationStart: 当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。

unloadEventStart: 如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的Unix毫秒时间戳

unloadEventEnd: 和unloadEventStart 相对应。 如果没有前一个网页，或者之前的网页跳转不是在同一个域名内，则返回值为0

redirectStart: 返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0

redirectEnd: 返回最后一个HTTP跳转结束时（即跳转回应的最后一个字节接受完成时）的Unix毫秒时间戳。如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0。

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

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

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

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

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

secureConnectionStart: https的ssl的开始时间。如果不是https则时间为0

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

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

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

domLoading: 这是整个过程开始的时间戳，浏览器开始解析 HTML 文档第一批收到的字节 document.

domInteractive: 标记浏览器完成解析并且所有 HTML 和 DOM 构建完毕的时间点

domContentLoadedEventStart: 标记 DOM 准备就绪并且没有样式表阻碍 JavaScript 执行的时间点, 意味着我们可以开始构建呈现树了,很多 JavaScript 框架等待此事件发生后,才开始执行它们自己的逻辑。

domContentLoadedEventEnd: DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）

domComplete: 所有的处理完成，网页上所有资源（图片等） 下载完成 – 即加载旋转图标停止旋转

loadEventStart: 作为每个网页加载的最后一步，浏览器会触发onLoad事件，以便触发附加的应用逻辑。这个是开始时间.

loadEventEnd: 对应loadEventStart,这个是结束时间.

含义终于解释完了，现在要用这些指标来计算我们需要的指标。

为了方便理解，网上有张比较好的图片可以参考：

性能数据计算

页面加载时间: 也可以说成用户实际等待页面的时间=loadEventEnd – navigationStart

DOM解析时间 =domComplete – responseEnd

DNS时间 =domainLookupEnd – domainLookupStart

Time To First Byte: 即拿到第一个字节时间（白屏时间）=responseStart – navigationStart

TCP建联时间=connectEnd – connectStart

重定向时间 =redirectEnd – redirectStart

onload回调函数执行时间 =loadEventEnd – loadEventStart

获取DNS缓存的时间=domainLookupStart – fetchStart

DOM准备好时间= domContentLoadedEventEnd – navigationStart

总结

有了这些指标，就能大概能总结web的性能，理解web中一个页面完整的流程是关键。同理，在Android中，我们也能用同样的方法来监控webview的性能，只要通过js注入方式，还能监控js的错误。以上这些，就是做web监控的基本知识，有了这些，监控便能轻松实现。

Published by Binson