如何解决H5游戏的内存泄露

概述

Chrome 提供了一个很好的内存分析工具，可以帮忙分析 H5 游戏哪些地方有内存泄露的问题。
此方法也适用于微信小游戏，或者各种 oppo，vivo，抖音等等小游戏系列。

内存分析步骤

首先进入要调试的 H5 游戏，然后按 F12 快捷键打开调试器。

点击“内存”页签，可以看到默认选中“堆快照”，如果点击“拍摄快照”按钮，则会马上记录当前的内存快照数据，在记录之前，会自动先进行GC清理（相当于点击了左边那个小垃圾桶图标）。

注意这里不包含显存纹理。

记录第一个快照

针对我们要检查内存泄露的界面，可以先打开关闭几次，让内存稳定下来，然后在界面关闭的情况下，点击记录快照。

这时可以看到左边栏出现一个“快照1”，这时候的内存已经经过GC清理。

右边红框显示的是记录那一刻，内存里的实例。
里面不仅包含我们游戏代码里的数据，还会包含一些浏览器用到的系统变量，编译数据等等，大家要仔细分辨。

记录第二个快照

我们再次打开刚才的游戏界面，然后关闭。
点击左上角的实心圆按钮（相当于第一步的按钮“拍摄快照”），记录第二次内存快照。

可以看到左边生成了“快照2”。
这时候我们可以点击“比较”按钮，会自动跟“快照1”进行比对，计算出新增、删除的对象数据。

分析内存数据

下面我们来分析一下内存数据。
图中有很多数据，新增的对象数很多，已删除的也很多，我们可以点击“增量”来排序一下。
留意增量是+正数的数据，特别是已删除项很少甚至是0的数据，这些是最有可能内存泄露的。

Detached 开头的可以不用管，不是我们的游戏对象。

点击其中一项数据，展开三角形，可以看到一个对象实例列表，@2495323这些数字就是实例产生的序号，按顺序排列下来。
上面是新增，下面的删除，一般来说，第一个新增的实例序号跟第一个删除的实例序号是一样的，会一一对应下来。
所以没移除的新增项，通常就是第一个删除项上面那几个。

点击这些新增项，可以看到下面的对象观察窗口，显示了该对象的引用链。
这个链要倒着看，就是从子到父这样看。
鼠标停留在链上，等几秒后可以看到该变量的值。

通常只拍摄两次，不足以说明该对象实例内存泄露了。因为有可能游戏的业务逻辑里，是延迟回收的。
我们可以重复几次上面的步骤，再继续拍摄几次，如果这个对象实例还是不断增加，那就有很大的嫌疑了。

容易造成内存泄露的情况

经验告诉我们，最容易造成内存泄露，通常是以下几点：
1、添加到界面的事件、通知，在界面销毁的时候，没有移除。尤其注意一些绑定到控件的事件，有些引擎是会自动释放（例如egret的Button事件），有些则是绑定在全局舞台上，例如egret的TOUCH_RELEASE_OUTSIDE 和 TOUCH_CANCEL，就必须要手动释放。
2、Tween 动画使用了 loop：true 特性的循环动画，在界面销毁的时候，没有移除。
3、绑定了闭包函数，在对象销毁的时候，没有解绑。
4、使用了对象池，但由于错误使用，导致了不断往对象池 push 实例。

如何尽量避免内存泄露

1、首先游戏框架很重要，一定要规范好 UI 的基类，统一进行事件的绑定与解绑。
2、对象池要做好自测。
3、新人培训要做好，初期培训的时候做好代码 review，尤其是头三个月。
4、定期进行内存泄露排查，比如一个月用 chrome 进行排查一次。