做网站首页轮播图代码,天津建设工程信息网上网流程,竞价推广是什么意思,网站必须做301重定向吗问题描述#xff1a;
一个有关地图编辑的使用threejs的这样的组件#xff0c;在多次挂载销毁后#xff0c;页面开始卡顿。
问题排查#xff1a;
1. 首先在chrome dev tool中打开performance monitor面板#xff0c;观察 JS head size、DOME Nodes、Js event listeners数…问题描述
一个有关地图编辑的使用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清除了。
