汪微的博客
zane,做一个有思维的开发者

汪微的博客

开发完第一版前端性能监控系统后的总结

2018年02月06日445 browse

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

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

先想明白一些问题

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

以上是我个人觉得应该思考的一些问题,我们只要能给出一个合理的答案那就开始干吧。

那么咋们开始做吧

一个产品开始做之前我们应该想明白一些技术上或者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 发表于 2018-02-06 14:49:41,添加在了 node.js 标签下

打赏

您的支持将鼓励我继续努力与分享。

扫码打赏,建议金额1-10元

提醒:打赏金额将直接进此方账号,无法退款,请您谨慎操作。

评论

正在加载验证码......

提交

“对于图片我们可以获取当前页面所有图片资源列表,建立new Image()对象得到最终的时间  ”这句是说要把页面内所有图片都在Image里额外加载一遍吗?

2019-03-13 19:44:50

为什么不用sentry

2018-09-12 15:06:16

你好,那个运行后怎么在访问页面。脚本错误等功能菜单都没有数据呢

2018-08-30 15:04:07

最好把onreadystatechange 改成 .addEventListener('readystatechange' 。axios也使用了onreadystatechange,如果使用axios会出问题。

2018-02-09 12:06:13

logo和12306这么像呢

2018-02-09 09:56:42

logo和12306这么像呢

2018-02-09 09:56:42

可以,界面看qi'lai不错

2018-02-09 09:49:59