前端性能监控

前端监控

产品上线后，须要监控产品的运行状况，这是就须要把客户端的数据记录返回到服务器用来后续去统计和分析。

监控类别

主要监控5类问题

• 页面性能
• 静态资源文件加载状况
• ajax请求是否正常，请求响应的时间，数据传输的大小
• js执行的错误捕获
• 用户行为

监控方法

监控方法主要就是利用浏览器提供的performance这个对象，该对象记录不一样状态的时间点，从而找到你所关心的状态时间点而后进行作差，把须要统计的数据组成对象，经过请求服务端1px的img对象，把数据发过去，注意参数的格式化

关键参数意义

1. requestStart 发起请求
2. responseStart 相应请求
3. domloading 加载dom
4. domInteractive dom解析完成（不包括资源）
5. domcomplate dom加载完成（包括资源）

domloading - domInteractive   // dom解析时间，若是时间长，那就是dom结构嵌套太深致使解析慢

domloading - navigationStart   // 白屏时间

domcomplate - domloading // dom加载时间，资源是否是太多

loadEventEnd -navigation // 总时长

技巧

搜索浏览器加载html的执行示意图，对比着找不一样状态的时间值
监控页面性能的js文件要放到顶部，不能放到页面底部，须要递归检查