（无论何时我都是一个实践派）
说起前端性能监控系统，绝大部分人应该不陌生，也许你正在使用，又或者你只是听说过。总之它就是这样频繁的出现在我们的工作之中。
那么做一个前端性能监控系统，我们应该统计一些什么维度的信息呢？那些数据真正对于我们有用呢？它适用的场景又有哪些呢？有很多的问题需要回答，再做之前我们应该回答一些问题，如果这些问题不能回答出来那就不要轻易去尝试。以下是我觉得需要想明白的一些问题。
先想明白一些问题
- 我们为什么需要前端性能监控系统，是公司产品真的需要还是开发着玩玩？
- 业界有那么多的成熟产品，我可以直接使用吗？自己做一个是更好的方案吗？
- 我们应该统计一些什么纬度的信息？你确定你统计的数据的准确性吗？
- 你设计的这些维度信息，对于我们开发真的有参考价值吗？
- 你开发的产品能够推广给公司团队使用吗？别人需要你这个产品吗？他会配合你吗？
- 如果开始做，你了解过团队中其他人的需求吗？他们有没有什么意见对你有参考价值？
- 能对你或者团队在技术上有什么提升吗？有服务器资源吗？后期有迭代的打算吗？
- 能带领团队中其他人一起做吗？对他们是否有吸引力？
以上是我个人觉得应该思考的一些问题，我们只要能给出一个合理的答案那就开始干吧。
那么咋们开始做吧
一个产品开始做之前我们应该想明白一些技术上或者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地址：
附上几张效果图：
关注我的博客：
原文地址：