内存溢出怎么解决（内存溢出的原因分析和解决方法）

一 内存溢出

1. 什么是内存溢出

内存溢出(Out Of Memory，简称OOM)是指应用系统中存在无法回收的内存或使用的内存过多，最终使得程序运行要用到的内存大于能提供的最大内存。此时程序就运行不了，系统会提示内存溢出，有时候会自动关闭软件，重启电脑或者软件后释放掉一部分内存又可以正常运行该软件，而由系统配置、数据流、用户代码等原因而导致的内存溢出错误，即使用户重新执行任务依然无法避免。比方说连续请求数据很多次，会快速占满内存造成内存溢出，浏览器卡死。

二 内存泄露

1. 什么是内存泄露

内存泄漏（Memory Leak）是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。

2. 内存泄露的原因

意外的全局变量：由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中，全局对象就是 window 对象。变量在窗口关闭或重新刷新页面之前都不会被释放，如果未声明的变量缓存大量的数据，就会导致内存泄露。==》》解决方法：尽量减少创建全局变量。

<template>
  <div id="home">这里是首页</div>
</template>
<script>
  export default {
    mounted() {
      window.test = {
        // 此处在全局window对象中引用了本页面的dom对象
        name: 'home',
        node: document.getElementById('home'),
      }
    },
  }
</script>

解决方法：在页面卸载的时候顺便处理掉该引用
destroyed () {
  window.test = null // 页面卸载的时候解除引用
 }

监听在 window/body 等事件没有解绑：特别注意 window.addEventListener 之类的监听

<template>
  <div id="home">这里是首页</div>
</template>

<script>
export default {
  mounted () {
    window.addEventListener('resize', this.func) // window对象引用了home页面的方法
  }
}
</script>
解决方法：在页面销毁的时候，顺便解除引用，释放内存
beforeDestroy () {
  window.removeEventListener('resize', this.func)
}

闭包引起的内存泄漏：由于闭包可以读取函数内部的变量，然后让这些变量始终保存在内存中。如果在使用结束后没有将局部变量清除，就可能导致内存泄露

被遗忘的定时器或者回调：定时器中有 dom 的引用，即使 dom 删除了，但是定时器还在，所以内存中还是有这个 dom。手动删除定时器和 dom，removeEventListener 移除事件监听