vue项目内存泄露分析

最近在项目开发时，遇到了一个内存泄漏的问题，用了一些时间排除，特此记录。

内存泄漏问题

在vue项目数据处理页面数据展示区域，有一个联动功能，选择前面的select的内容后，后面选择框的内容会根据前面的数据去获取，出现的问题是每次选择前面的选择框后，页面操作会变得卡顿, 频繁进行select操作后页面崩溃。
打开chrome调试工具，选中memory选项，发现每次select操作后，内存都急剧增大，且通过gc强制回收后内存没有减少，可以确定是出现内存泄漏了。

Chrome 内存分析方法

内存分析主要使用Chrome的debug工具Profiles面板，Profiles可以追踪网页程序的内存问题。打开控制台，选择Memory选项， 如图，左侧是Profiles的start等操作选项,右侧是Profiles提供的功能选项

Profiles提供了3个功能项

Heap snapshot
通过创建堆快照可以查看创建快照时网页上的JS对象和DOM节点的内存分布情况，使用该工具可以创建JS的堆快照、内存分析图、对比堆快照帮助定位内存泄漏问题。

Allocation instrumentation on timeline
从整个Heap角度记录内存分配的时间轴信息。
点击Start按钮之后，执行可能会引起内存泄漏的操作，操作之后点击左上角的Stop按钮即可。在蓝色竖线上通过缩放过滤构造器窗格来显示在指定的时间帧内被分配的对象信息。在录制过程中，在时间线上会出现一些蓝色竖条，这些蓝色竖条代表一个新的内存分配。

Allocation sampling
用于分析网页上的JS函数在执行过程中的CPU消耗信息。
点击Start按钮