额，这两天主要是围绕着上海的项目按照客户的需求更改设计，在这个过程中，有一个隐藏特别深的bug在项目中暴露出来，在测试环境中没有暴露，而且很难复现，其实现在想想自己挺蠢的，一个简单的问题折腾了一个下午才解决也是没谁了，现在特地写出来长个教训，希望看到这篇简书的朋友们也不要犯我这个低级错误，下面我将展开复盘一下这个问题的始末：
1项目描述：本公司和上海某个公司合作，我们公司的项目部署在上海的某个服务器上进行现场大屏展示给某些领导，并且进行功能演示，出于保密原因，照片不做展示，可以看出，页面呈现崩溃状态，其他组件页面也有类似的情况发生，时间段不一定分布在一个小时左右，看到一线人反馈的问题，当时心都凉了。
2 问题定位：这个问题在测试环境下没有测试到，压力测试也没有测试，而且打开控制台，发现并没有error；可以看出这个问题并不能很好的复现。笔者看到这个问题的下意识是内存溢出，但是这个内存溢出可能是java后台的可能性比较大 ，因为js本身并不涉及到性能问题，于是和后台一起进行性能测试，后台反馈，java后台内存并没有溢出：截图如下：
如果不是后端的原因，只能是前端的原因了。在这里要说一下，首页的状态是每隔两分钟就要向后台发起请求更新前台数据，笔者的潜意识里应该是上一次数据没有及时销毁，导致内存占用过多，于是将更新时间缩短，进行100毫秒刷新，观察控制台的情况：
大约过了过4分钟左右，页面出现崩溃状态，笔者赶紧打开控制台，发现如下问题：
可以确定是我的问题了，但是具体问题出现在哪里仍然不是很清楚，于是借助谷歌浏览器工具进行debug，截图和提示如下：
通过上面这个图可以肯定就是我的定时器有问题，但是定时器的问题到底出现在哪里，继续根据memory进行定位：
到这里问题的原因就就已经确定了，可以看出有Object造成的影响排在了第二位，因为对象本身会关联很多数组，字符串以及其他内容，问题确定，这个定时器产生了好多对象，于是检查代码:
上图中的echart对象如下：
到现在，问题的根本原因已经找到了，就是在定时器里面不断的构造echart对象，这个echart对象会在vue实例上不断的增加，导致旧的对象没有销毁，新的对象不断产生，每生成一个新的对象就会申请占用一块内存，短时间内不会爆发，但是一旦达到这个浏览器承受的阈值，内存泄露，导致页面崩溃。
此时此刻，心理就是自己真蠢。
3问题解决：笔者之所以每次不断的new对象是因为每次新来的数据都要通过这个函数的参数传入进去，试图在外面new一个对象在定时器里面跟新vue的data数据是有错误的，这个本人亲自试过，那么既然这种办法行不通了，只能在传入数据前进行对象判断了，但是老对象和新对象看似一样，其实他是两个不同的个体，证据如下：
于是打印这个echrt对象，发现每个对象多出一个ID，我们可以通过判断ID的方法来修复这个问题，
到现在进过5个小时的定位和分析，问题解决了，但是还没有根治，我们只是通过一个函数阻止了重造行为，真正的做法应该是定时器里面就他不应该重造，在定位的过程中，后台指出了我代码中的不足之处，非常感谢，只有不断的review才能进步，在这里特别感谢他们。
