背景
该项目是利用vue框架开发的内部异常监控系统，用于显示java程序运行时的异常信息，包括执行栈、代码、变量等信息的显示。
测试过程中，部门同事反映多次在不同异常信息之间切换会导致网页崩溃。在犯罪现场打开chrome的任务管理器，看到这个页面的内存占用已经达到9.7G，初步怀疑页面有漏洞。
验证猜测
打开 devtool -> performance，开始记录页面性能执行页面上切换其它异常信息的操作（页面最有可能引起内存泄漏的操作）查看性能分析结果去掉beforeDestroy钩子后，业务层看起来好多了。
验证 利用 performance 功能，多次进行之前导致内存溢出的操作，得到结果如下
这里的每个峰值都是刚执行操作时内存分配的结果，每次执行后没有内存、节点、Listensers的积累
再次修正前比较性能分析结果
可怕的楼梯。。。
顺便再 memory 面板中出现了什么变化
还有一个StackFrameVar和一些额外的事件侦听器和观察器来呈现这个StackFrameVar对象。这是由于两次呈现的数据不同，这是正常情况
例外等。许多对象的增量已经是0(与增量的顺序相反)
其他说明
上面的分析图是在写这篇文章的过程中写回一些代码后实时分析的，相对没有实际调试的详细。在实际调试过程中还进行了其他操作:
隐私窗口，禁用所有扩展（避免影响内存分析）关闭开发模式HMR功能，因为 VUE_HOT_RELOAD 也会产生一层引用，我并不能完全信任它使用模拟数据，每次执行操作，都会渲染一样的可被人工计算清楚(知道哪个类会产生多少实例)的数据performance 过程中手动GC以上方法是为了提供一个完全纯净可控的分析环境。
1.《内存溢出 记一次网页内存溢出分析及解决实践》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《内存溢出 记一次网页内存溢出分析及解决实践》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/fangchan/702612.html
卡枪 
