使用Chrome内存工具调查Vue应用程序中的内存泄漏

现代的web应用程序消耗了大量的计算机资源。我在其中键入本文的博客应用程序目前占用130兆内存。以今天的规模来看，这是一个相当不错的结果。在我配备8g内存的笔记本电脑上，当浏览器的内存超过1g左右时，我就开始注意到性能问题。当您构建一个复杂的Vue应用程序时，该应用程序由许多视图组成，这些视图具有深度嵌套的组件层次结构，很快您就会遇到内存问题。这里是一个快速概述，你可以做什么与Chrome devtools的实用程序分析和改善应用程序的内存消耗。

在SQL Studio开发的早期阶段，我注意到在一些视图之间进行密集切换后，性能有了细微的下降。这里要做的第一件事是检查应用程序的内存使用情况。在Chrome中，标签内存使用可以发现在内置的任务管理器:按Shift+Esc或到Chrome主菜单，选择更多工具>任务管理器。右键单击头部并选择JavaScript Memory。注意列中的数字，然后对应用程序进行试验，检查内存消耗是否增加。在我的例子中，重复了一些步骤后，我得出的结论是内存使用量增加了50% !

关于如何修复内存问题，Chrome开发工具团队有一个很好的指导。总而言之，web应用程序中内存泄漏的一个常见来源是垃圾收集器无法处理的分离DOM元素。有一个专门的工具可以帮助调查内存泄漏，那就是devtools的内存配置文件。

堆快照概述了驻留在内存中的JavaScript对象以及它们之间的关系。持有引用的对象称为“retain”。

@字符后的数字是对象的唯一ID，允许您在每个对象的基础上比较堆快照。每个构造函数组意味着什么?

如果我们通过分离值来筛选类，我们将得到从DOM树分离的所有元素的列表，以及直接间接引用这些元素(retain)的对象。在官方文档中有很好的描述距离、浅层和保留大小等术语。

您可以选择一个项目，然后在控制台中输入$0来打印该元素($0..$4参考元素检查器或堆配置文件中选择的最新项目，检查控制台实用程序API参考)。

您还可以检查retain树，并尝试找到哪些对象防止分离的元素被垃圾收集。这并不总是内存泄漏，元素也会因为优化的原因而保留。

有时，分离的元素是chrome扩展的副作用。为了清晰起见，最好在内存泄漏调查期间禁用扩展(如果你不想使用单独的浏览器或不想花时间手动禁用扩展，隐身模式会很有帮助)。

另外，要注意webpack的开发模式，像热模块重新加载这样的特性可能会干扰应用程序的正常执行，增加堆分配，并可能产生泄漏。最好在运行应用程序的产品构建时寻找漏洞。

保留大量内存的可疑对象，可以提供泄漏发生位置的线索。

除非你非常熟悉devtools的堆快照内部机制、V8、Blink渲染引擎和整个chromium，否则很难找到真正的保留路径。

我在研究Vue应用程序性能时开发的一种常用方法可以简化为三个步骤:识别、证明和修复。

首先，找出在哪些情况下内存消耗会增长。如果你使用路由器或动态组件，这是第一个检查的地方。如果你怀疑一个特定的组件，隔离组件和实验。尝试禁用子组件或一些功能。内存泄漏的一个常见来源是不正确的析构和未处理的上下文。如果你在组件初始化钩子中调用第三方组件构造函数，请检查你是否正确地注销了beforeDestroy钩子中的所有东西。

另一个内存浪费的潜在来源是Vuex状态。包含复杂结构(如多维数组)的状态是大量内存消耗的常见原因，特别是当它在应用程序生命周期中经历许多变化时。