前端性能监控系统,完整案例及总结

原创 wangweianger 随笔 前端 543阅读 2018-04-06 10:30:47 举报

说起前端性能监控系统,绝大部分人应该不陌生,也许你正在使用,又或者你只是听说过。总之它就是这样频繁的出现在我们的工作之中。

那么做一个前端性能监控系统,我们应该统计一些什么维度的信息呢?那些数据真正对于我们有用呢?它适用的场景又有哪些呢?有很多的问题需要回答,再做之前我们应该回答一些问题,如果这些问题不能回答出来那就不要轻易去尝试。以下是我觉得需要想明白的一些问题。

先想明白一些问题

  • 我们为什么需要前端性能监控系统,是公司产品真的需要还是开发着玩玩?
  • 业界有那么多的成熟产品,我可以直接使用吗?自己做一个是更好的方案吗?
  • 我们应该统计一些什么纬度的信息?你确定你统计的数据的准确性吗?
  • 你设计的这些维度信息,对于我们开发真的有参考价值吗?
  • 你开发的产品能够推广给公司团队使用吗?别人需要你这个产品吗?他会配合你吗?
  • 如果开始做,你了解过团队中其他人的需求吗?他们有没有什么意见对你有参考价值?
  • 能对你或者团队在技术上有什么提升吗?有服务器资源吗?后期有迭代的打算吗?
  • 能带领团队中其他人一起做吗?对他们是否有吸引力?
  • 以上是我个人觉得应该思考的一些问题,我们只要能给出一个合理的答案那就开始干吧。

那么咋们开始做吧

一个产品开始做之前我们应该想明白一些技术上或者UI上的一些问题
在产品上也许你应该画一些产品原型图,哪怕是简单的手绘素描图都是OK的。
在技术上我们要解决核心的统计问题,比如统计页面性能数据的API:performance,performance兼容IE9以上的浏览器,performance.timing统计页面性能,performance.getEntriesByType('resource') 统计页面资源性能。window.onerror统计页面错误信息。

开发中遇到的问题:

  • 如何统计页面所有AJAX性能数据,如何知道所有AJAX已加载完毕
  • 如何统计页面所有资源性能详情(包括异步ajax和图片),浏览器api能搞定吗
  • 如何知道一个用户访问了哪些页面,访问深度何如,怎么跟踪记录
  • 获取用户IP网络信息使用的第三方接口,如何能更好的做好缓存,解决用户每次访问都调用的问题
  • 一个页面资源,ajax,js同时报错,如何全部抓取并记录下来
  • 如何解决数据频繁写入数据量太大的问题,数据库应该怎么设计或处理

针对于以上几个问题我简单的描述我的处理方式:

1、如何统计页面所有AJAX性能数据,如何知道所有AJAX已加载完毕?

由于页面中ajax基本都是异步加载,因此我们并不能确定页面上的ajax是否真的已经加载完毕,window.onload并不能解决我们的问题。

鉴于绝大部分网页的ajax都是用的XMLHttpRequest对象,我们可以在页面加载之处重新定义XMLHttpRequest对象,对open,onload,onreadystatechange方法进行拦截。具体代码可参考本项目。

2、如何统计页面所有资源性能详情(包括异步ajax和图片),浏览器api能搞定吗?

在页面所有异步资源加载完毕之前,performance.getEntriesByType('resource') 方法得到的资源列表都是不完整的,如何尽可能的保证完整呢?

页面的异步资源主要有两种:一种是ajax,另一种是图片,针对于ajax我们可以使用方法1得到最终的加载时间,对于图片我们可以获取当前页面所有图片资源列表,建立new Image()对象得到最终的时间。最后比较图片和ajax的加载时间,谁更长就代表谁更接近(或是)页面加载最终完成时间,如果图片和ajax资源都没有那就是用window.onload,最终调用performance.getEntriesByType('resource')得到最终的资源列表。

3、如何知道一个用户访问了哪些页面,访问深度何如,怎么跟踪记录

跨域打cookie,一个cookie代表用户信息,同一个会话窗口此值不会再改变,另一个cookie关联同一页面的性能数据,访问者信息,错误信息标识等,此cookie会跟着页面改变而改变

4、获取用户IP网络信息使用的第三方接口,如何能更好的做好缓存,解决用户每次访问都调用的问题

一:同上一题(3)可以打cookie,若有cookie者不用再请求, 

二:根据代表用户cookie的值去查找后端缓存里第一次请求后的ip,运营商信息。
5、一个页面资源,ajax,js同时报错,如何全部抓取并记录下来
写三个监控,一个监控XMLHttpRequest获得ajax错误信息,一个监控window.onerror获得页面js报错信息,还有一个监听error事件获得页面资源报错信息。

6、如何解决数据频繁写入数据量太大的问题,数据库应该怎么设计或处理

一:写定时任务,每晚几点钟对数据表进行备份,统计,或删除

二:一个站点建立一张数据表

三:页面给sql窗口或按钮,手动进行相应的任务

四:集群处理(这个没那么大量,有些时候并不是所有数据都需要储存,公司也没那么多服务器,一般不考虑)

就这样结尾了:全程无代码!!!

附属github地址:https://github.com/wangweianger/web-performance-monitoring-system

附上几张效果图:

关注我的博客:zane的个人博客
原文地址:开发完第一版前端性能监控系统后的总结

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复