前端性能监控

前端监控

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

监控类别

主要监控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文件要放到顶部，不能放到页面底部，需要递归检查