内存泄漏场景及解决方案

javascript中的内存泄漏场景及解决方案

场景一：意外的全局变量

由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中，全局对象就是 window 对象。变量在窗口关闭或重新刷新页面之前都不会被释放，如果未声明的变量缓存大量的数据，就会导致内存泄露。
解决方案：一是避免创建全局变量；二是使用严格模式

场景二：闭包

闭包可以读取函数内部的变量，然后让这些变量始终保存在内存中。如果在使用结束后没有将局部变量清除，就可能导致内存泄露
解决方案：一是将事件处理函数定义在外部，解除闭包；二是定义在事件处理函数的外部函数中

场景三：未被清空的定时器

解决方案：手动删除定时器和DOM

场景四：未被销毁的事件监听

解决方案：removeEventListener移除监听事件

场景五：未被清除的DOM引用

解决方案：手动删除，elements.btn = null

vue中的内存泄漏场景及解决方案

因为在 SPA 的设计中，用户使用它时是不需要刷新浏览器的，所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效

声明的全局变量在切换页面的时候没有清空造成

解决方案：在页面卸载的时候顺便处理掉该引用。

监听在 window/body 等事件没有解绑

解决方案：在页面销毁的时候，顺便解除引用，释放内存

绑在 EventBus 的事件没有解绑

解决方案：在页面卸载的时候也可以考虑解除引用