记录一次threejs内存泄露问题排查过程

问题描述：

一个有关地图编辑的使用threejs的这样的组件，在多次挂载销毁后，页面开始卡顿。

问题排查：

1. 首先在chrome dev tool中打开performance monitor面板，观察 JS head size、DOME Nodes、Js event listeners数据是否呈现增长趋势

观察了一段时间，发现JS head size并没有明显的增长，但是DOM Nodes、Js event listeners随着每次组件的销毁、组件的重新挂载一直呈现增加的趋势。

2. 在chrome dev tool中打开performance进行性能分析

在performance面板中我们录制大概60s性能分析

查看结果

首先我们看一下JS head size，观察到在1分钟的组件不断销毁和挂载的过程中，是收敛的，组件挂载是增长，组件卸载时释放，是正常现象。

其次我观察到DOM Nodes、Js event listeners在1分钟的组件不断销毁和挂载的过程中，呈现阶梯式的增长，且增长的幅度几乎一致，如下图。

初步分析是在组件卸载时有事件监听没有销毁。

3. 在chrome dev tool中打开memory面板中进行深层次的分析

在memory面板中，多录制几个快照

我发现heap size是不断增长的，确认是存在内存泄露的问题的。

现在我选取Snapshot5和Snapshot4进行对比，看一下，增长的是什么

注意我框出来的地方。重点看delta哪些在增长。其中 compiled code这种不用管。这是编辑好的代码。

我们看到 HTMLDivElement、EventListener、ResizeObserver、等这些的增长，都能看出来我们的分析是对的，确实很多监听事件没有清除。

接下来我们去清除这些事件，再次捕捉快照看一下对比。

解决问题

1. 确定 setTimeout、setInterval、requestAnimationFrame等在组件销毁时清除，requestAnimationFrame很容易遗漏

2. 确认 addEventListener的事件在组件销毁时移除了。

这里需要注意一下，最好通过  document.removeEventListener(eventname,fn)的方式去清除

我之前通过document.onclick = null的方式去清除，发现还是会出现内存泄露的问题。

3. threejs引入的dragControls、orbitControls、还有自己封装的controls等在组件销毁时，记得销毁这些控制器中的事件监听。比如dragControls提供了方法 deactivate 方法去清除监听。

4. 在组件销毁时确认清除了 ResizeObserver

确保了这些问题都处理后，再次用performance性能分析60s，查看结果

我们看到DOM Nodes、Js event listeners在组件销户和挂载过程中是收敛的，不会再呈现阶梯式增长。问题得到解决。

再次去memory面板中查看新的快照

我们看到清除了这些事件监听后，heap size不再增长了，我们再具体对比一下Snapshot5和Snapshot4

之前的那些增长项，都为0了。至此问题解决。

还有一个常识时，在组件销毁时，记得把threejs scene中的所以object清除了。