内存泄漏

172 阅读2分钟

内存泄漏

概念:当应用程序不再需要的内存,由于某种原因未返回给操作系统或者空闲内存,这将会导致程序变慢、卡顿、高延迟。

比如new了一个对象之后,它就会占用一定的内存,当指针指向null,或者离开了对象的作用域就会被销毁,这块内存在js中就会被垃圾回收,但是如果这个对象的指针没有重置为null,且无法访问到指针,就无法释放掉它占用的内存,就会导致内存泄漏。

js导致内存泄漏

  1. 全局变量导致的内存泄漏
  • 引用未声明的变量
  • 将变量设置为全局变量window的属性
  • 盲目使用this,导致挂载到全局变量的属性上
  1. 未释放的计时器

  2. 多处引用

  3. 闭包

  4. console.log

vue导致内存泄漏

  1. 接口数据量巨大,前端渲染时占用了大量的内存(分页,限制接口的返回数据量)
  2. 使用v-if,频繁切换DOM,没有把DOM重置为null
  3. 代码中存在死循环或者递归调用
  4. 定时器没有清除
  5. 事件侦听器没有清除
  6. 绑在eventBus的事件没有解绑。
  7. 使用了keep-alive

vue中释放内存

1.在mounted/created 钩子中绑定了DOM/BOM 对象中的事件,需要清理dom上绑定的事件监听,同时将引用的dom设置为null;

  1. 执行结束后清理定时器 或者 非必要不用定时器,可以使用nextTick代替; 3.使用了事件监听on,需要在beforeDestroy中做对应解绑( on,需要在beforeDestroy 中做对应解绑( off)处理
  2. 变量先申明后使用,闭包执行完成后,将引用的局部变量赋值为null;
  3. 使用了第三方库初始化,需要在beforeDestroy 中做对应解绑处理;eg: this.map.remove() 尽量使用原型对象去定义函数,