关于前端性能监控探索

2019-06-03 本文已影响0人 hengking

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

页面过程.png

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

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

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

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

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

timing-overview.png

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