内存泄漏场景及解决方案
javascript中的内存泄漏场景及解决方案
场景一:意外的全局变量
由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中,全局对象就是 window 对象。变量在窗口关闭或重新刷新页面之前都不会被释放,如果未声明的变量缓存大量的数据,就会导致内存泄露。
解决方案:
一是避免创建全局变量;二是使用严格模式
场景二:闭包
闭包可以读取函数内部的变量,然后让这些变量始终保存在内存中。如果在使用结束后没有将局部变量清除,就可能导致内存泄露
解决方案:
一是将事件处理函数定义在外部,解除闭包;二是定义在事件处理函数的外部函数中
场景三:未被清空的定时器
解决方案:
手动删除定时器和DOM
场景四:未被销毁的事件监听
解决方案:
removeEventListener移除监听事件
场景五:未被清除的DOM引用
解决方案:
手动删除,elements.btn = null
vue中的内存泄漏场景及解决方案
因为在 SPA 的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效
声明的全局变量在切换页面的时候没有清空造成
解决方案:
在页面卸载的时候顺便处理掉该引用。
监听在 window/body 等事件没有解绑
解决方案:
在页面销毁的时候,顺便解除引用,释放内存
绑在 EventBus 的事件没有解绑
解决方案:
在页面卸载的时候也可以考虑解除引用