前端知识学习

要如何找到内存泄漏的地方?

网络上大部分文章只会介绍一下基础知识,然后附上一下简单到令人发指的例子。但是问题是:实际项目根本不可能这么简单,内存泄漏隐藏在浩如烟海的代码山当中。想靠基础知识解决问题,几乎不可能。

或者告诉你如何使用Chrome开发者工具去记录和对比内存堆栈。于是看着内存变量列表里几十万个变量,犹如大海捞针。

代码多,文件多,找导致内存泄漏的问题代码必须要有条理。

按如下步骤来就行啦!

  1. 首先确定导致内存泄漏的模块和什么样的操作会导致内存泄漏。
  2. 确定出现了内存泄漏的文件范围。并找到这一块文件的总入口。
  3. 整理入口文件的依赖。把依赖过的所有文件列成表记下来。
  4. 按照表中的顺序,依次从代码中注释掉每个文件,去掉对其的依赖,并测试内存泄漏是否还在。
  5. 如果还会内存泄漏,则该文件是无辜的。如果不会,则找到了出现了内存泄漏的文件。由此缩小了问题文件的范围。
  6. 重复1~5的步骤,直到问题文件范围尽可能的小。
  7. 当问题文件范围小到剩下一个文件时,则把1~5的步骤的原理用在此文件的每一行代码中。
  8. 一行一行注释问题文件中的代码,并测试内存泄漏是否还在。
  9. 直到找到出问题的那一行或一部分代码。
  10. 找到问题代码之后去解决问题就行。

直到第10步,最终定位到了出问题的代码。内存泄漏的基础知识才会发挥作用。
比如我刚解决的实际问题中,出问题的代码是在频繁往Vuex中存一个巨大对象。如果我不知道Vue双向绑定的原理,我只会觉得这行代码正常得一逼。

以上是解决内存泄漏问题的一个行之有效的办法。