开发完初版前端性能监控系统后的总结(无代码)

（不管什么时候我都是一个实践派）

提及前端性能监控系统，绝大部分人应该不陌生，也许你正在使用，又或者你只是据说过。总之它就是这样频繁的出如今咱们的工做之中。

那么作一个前端性能监控系统，咱们应该统计一些什么维度的信息呢？那些数据真正对于咱们有用呢？它适用的场景又有哪些呢？有不少的问题须要回答，再作以前咱们应该回答一些问题，若是这些问题不能回答出来那就不要轻易去尝试。如下是我以为须要想明白的一些问题。

先想明白一些问题

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

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

那么咋们开始作吧

一个产品开始作以前咱们应该想明白一些技术上或者UI上的一些问题

在产品上也许你应该画一些产品原型图，哪怕是简单的手绘素描图都是OK的。

在技术上咱们要解决核心的统计问题，好比统计页面性能数据的API：performance，performance兼容IE9以上的浏览器，performance.timing统计页面性能，performance.getEntriesByType('resource') 统计页面资源性能。window.onerror统计页面错误信息。

开发中遇到的问题：

• 如何统计页面全部AJAX性能数据，如何知道全部AJAX已加载完毕

• 如何统计页面全部资源性能详情（包括异步ajax和图片），浏览器api能搞定吗

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

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

• 一个页面资源，ajax，js同时报错，如何所有抓取并记录下来

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

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

一、如何统计页面全部AJAX性能数据，如何知道全部AJAX已加载完毕？

因为页面中ajax基本都是异步加载，所以咱们并不能肯定页面上的ajax是否真的已经加载完毕，window.onload并不能解决咱们的问题。

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

二、如何统计页面全部资源性能详情（包括异步ajax和图片），浏览器api能搞定吗？

在页面全部异步资源加载完毕以前，performance.getEntriesByType('resource') 方法获得的资源列表都是不完整的，如何尽量的保证完整呢？

页面的异步资源主要有两种：一种是ajax，另外一种是图片，针对于ajax咱们可使用方法1获得最终的加载时间，对于图片咱们能够获取当前页面全部图片资源列表，创建new Image()对象获得最终的时间。最后比较图片和ajax的加载时间，谁更长就表明谁更接近（或是）页面加载最终完成时间，若是图片和ajax资源都没有那就是用window.onload，最终调用performance.getEntriesByType('resource')获得最终的资源列表。

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

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

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

一：同上一题（3）能够打cookie，如有cookie者不用再请求，

二：根据表明用户cookie的值去查找后端缓存里第一次请求后的ip，运营商信息。

五、一个页面资源，ajax，js同时报错，如何所有抓取并记录下来

写三个监控，一个监控XMLHttpRequest得到ajax错误信息，一个监控window.onerror得到页面js报错信息，还有一个监听error事件得到页面资源报错信息。

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

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

二：一个站点创建一张数据表

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

四：集群处理（这个没那么大量，有些时候并非全部数据都须要储存，公司也没那么多服务器，通常不考虑）

就这样结尾了：全程无代码！！！

附属github地址：github.com/wangweiange…

附上几张效果图：

关注个人博客：zane的我的博客

原文地址：开发完初版前端性能监控系统后的总结