内存泄漏问题可以从常见泄漏点和代码逻辑导致的泄漏

最近，我一直在调查内存泄漏。有一些经验，总结一下记录。

1、什么是内存泄漏

首先定义，内存泄漏（Memory Leak）是指由于某种原因在程序中动态分配的堆内存，程序没有释放或无法释放，造成系统内存的浪费，导致程序运行变慢或甚至系统崩溃等严重后果。

内存泄漏很常见，流行的表现就是利用任务管理器中的内存使用量越来越大~~~越来越大~~~比如骑士的故事出来的时候，随便玩玩。所以大量的G内存被占用，这就是内存泄漏。

JavaScript 是一种高级语言。它不需要像C语言那样手动申请内存然后手动释放。 js 会在声明变量时自动分配内存。 Number 等常用类型一般都放在栈内存中。放到堆内存中，声明一个变量，分配一些内存，然后定期进行垃圾回收。 js的内存管理请参考官方文档。

2、查找内存泄漏

发现内存使用暴涨，再去找内存泄漏时，其实相当于一个bucket泄漏，小孔很多。你必须一一找出漏洞所在，并塞上一个更好的。屏蔽了就有效。

内存泄漏可以从两个方面发现：常见的泄漏和代码逻辑导致的泄漏。

2.1）常见泄露

Closing：Closing 的概念是我有一个代码区，在外区使用了一个变量。那么在代码区执行之前，外部变量一定不能被释放。这是一个关闭。

计时器：计时器是万恶之源。 . . this.timer = setInterval(()=>{console.log('我还活着！')}, 500), 请注意this.timer = null 不能清理timer！timer这个东西还是有，但是找不到！必须写clearInterval(this.timer)来清理！（可以在控制台试试...）

Uncaught exception/console.error：这个东西是记录在控制台的，每次打开控制台都能看到，因为这个东西被保存了！这件事在记忆中！这就是为什么它可以随时打开！坑~

对DOM的引用：在jQuery时代，有很多对DOM的引用。 This.testDom = $('#test') 将获得 DOM。这与闭包混合在一起，占用更多内存。 ES6有一种语法叫做weakMap，就是为了解决DOM引用占用内存的问题。你可以看看。

2.2）代码逻辑导致的泄露

每个人的代码逻辑都不一样。一般的方法是先找出你页面逻辑中经常使用的功能点，写一个脚本，在脚本中疯狂的重复操作，然后再看这个功能点造成的内存消耗。像这样查看确切的内存消耗：

a) 打开浏览器的内存进程消耗（shift+esc，或者谷歌右上角的三个点->更多->任务管理器）查看你的进程当前的内存占用情况。

b) 打开 F12 并单击手动 gc（垃圾收集）。为什么需要手动 gc？因为如果不点击js，垃圾回收是不准确的。你无法弄清楚是不是因为之前的垃圾导致内存没有上升。回收利用。

c) 关闭 F12。这里为什么要关闭F12，因为如果你不关闭，这个F12中的控制台和网络请求记录都会占用你的进程内存。曾经尝试过测试某个功能，写了个脚本，用两天时间增加到300M。 ，然后F12关闭，立马下降到90M。

d) 执行您的脚本并重复您要测试的功能点。

e) 感觉快完成了，打开F12，再次点击gc，关闭F12，查看步骤a中的内存变化。

如果增加很多，说明这个特征点确实存在内存泄漏，需要一步步看代码逻辑来优化。如果没有太大变化，恭喜你通过了这个功能。

这样测量单个函数的内存泄漏更准确。

如果需要详细对比，也可以使用F12自带的内存，即多次执行函数后，再点击对比

a) 执行该功能前，点击“拍摄快照”进行录制

b) 我认为我不需要这样做太多次。多次手动点击您的函数。

c) 切换到左侧的 Profiles，然后点击 Take snapshot

d) 记录两条堆内存使用情况后，点击Comparison，然后按Delta排序，比较，看看增长最多的是什么。这是堆内存中的所有数据。如果有特别熟悉的名字，可以在代码里找，想想为什么会有这么多东西，怎么肥，如果是你不明白的东西，那你可能还是要使用方法一，找到泄露的功能点，然后去狗代码。

3、性能验证

最后，您需要进行压力测试或收集数据以验证您的优化效果。

简而言之，内存泄漏的搜索是一项精细的任务，没有任何工具可以帮助您一键分析。很多漏洞其实都深埋在业务逻辑中，只有作者自己才能发现。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shoujiruanjian/article-380802-1.html