关于前端性能监控探索

近期，接到需求需要对前端性能做一个监控，数据做一个上报。基于此，开始了采坑之旅。

首先，我们理解一个前端常见问题，一个网页从打开到显示经历了什么？

页面过程.png

我们只是将url输入到浏览器居然就经历了这么多过程，每一个过程都可以写很多，不是这期的重点，这期的重点是监控前端的性能，简单点说就是监控这些花费的时间。

最主要的是首屏时间和总的时间，首屏时间的长短决定了用户的留存。

开搞，查了很多资料，一般有两种方法，一种是通过写个函数计时；另一种是webapi Performance.timing 来获取。

这次选择了Performance.timing；其实两种方法获取到的时间都不是精确时间，所以怎么方便怎么来咯。

注意，Performance.timing是较新的api，使用ie浏览器的话低于ie9就不支持了。

Performance.timing能获取很多时间节点，

查文档，文档里有较为清楚的图解

timing-overview.png

• navigationStart
• redirectStart
• unloadEventStart
• unloadEventEnd
• redirectEnd
• fetchStart
• domainLookupStart
• domainLookupEnd
• connectStart
• (secureConnectionStart)
• connectEnd
• requestStart
• responseStart
• responseEnd
• domLoading
• domInteractive
• domContentLoadedEventStart
• domContentLoadedEventEnd
• domComplete
• loadEventStart
• loadEventEnd

通过时间节点可以大致算出

• DNS查询耗时 ：domainLookupEnd - domainLookupStart
• TCP链接耗时 ：connectEnd - connectStart
• request请求耗时 ：responseEnd - responseStart
• 解析dom树耗时 ： domComplete- domInteractive
• 白屏时间 ：responseStart - navigationStart
• domready时间 ：domContentLoadedEventEnd - navigationStart
• onload时间 ：loadEventEnd - navigationStart

搞定收工，在实际开发中，出现了大坑，计算onload时间的时候loadEventEnd为0，打出log发现不是，相减的时候就是0了，可能是由于使用的是appwebview提前加载的缘故，只能将Performance.timing传给app计算了，计算正常。