近期，接到需求需要对前端性能做一个监控，数据做一个上报。基于此，开始了采坑之旅。
首先，我们理解一个前端常见问题，一个网页从打开到显示经历了什么？
页面过程.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计算了，计算正常。
转载于:https://www.jianshu.com/p/d602891e1992