Bootstrap

vue开发项目游戏端,时间长了会卡顿,记录优化内存泄漏问题。

介绍

前端的内存泄漏防不胜防。比如开了定时器没有关闭,开始某某异步没有销毁都会导致内存泄漏。

排查内存泄漏的方法目前还是用的很笨的办法,排除法。

虽然浏览器调试工具可以看内存,但好像只能录制很短一段时间的内存情况,很难看出内存问题。

所以没有办法,只能不断排查不断测试。

步骤如下

1.架构:首先是排查自己设计的游戏架构问题,

看了很多代码,vue中的unmounted里都写了销毁定时器功能。

2.组件:只能猜想摄像头组件是否有问题了,于是去掉摄像头继续测试。

这次测试发现并不卡了。果断得出结论是摄像头组件的问题。

3.监听器:这时果然发现一处内存泄漏问题,就是on监听。如下代码

mediaRecorder = new MediaRecorder(stream);

mediaRecorder.ondataavailable = addChunks

mediaRecorder.onstop = stopRecorder

这时我们在onunmounted加了移除监听方法

mediaRecorder.removeEventListener('stop', stopRecorder); // 移除掉暂停监听

mediaRecorder.removeEventListener('dataavailable&#

;