requestanimationframe 导致内存泄漏 内存泄漏前端

前端项目查看是否有内存泄漏的情况

在项目运行中，有时会遇到这样的问题，项目运行时间长了，速度就越来越慢，最后导致页面崩溃。这个时候就需要查看是否有内存泄漏的情况了。

怎么查看呢？这里我推荐一种办法，使用chrome devTools 的Performance来检测内存。

使用过程是这样的：

2. 打开谷歌浏览器，并且打开F12， 选人对应内容



3. 在操作页面前，点击最右侧垃圾箱按钮，然后点击最左边开始按钮
4. 操作页面
6. 操作页面结束后， 点击 stop会有如下内容

蓝色的Heap 就是内存。可以看到下面对应颜色的线是波浪型的， 说明，内存在增值然后减小再增长，再减小的过程。
如果是有内存泄漏的情况，增长的线将会是一致增长的曲线

在使用vue 的时候 要注意几种常见的容易导致内存泄漏的场景

1. 被全局变量，函数引用，组件销毁时未清除
2. 被全局时间，定时器引用，组件销毁时未清除

export default {
  data() {
    return {
      arr: [10,20,30]
    }
  },
  methods: {
    printArr() {
      console.log(this.arr)
    }
  },
  mounted() {
    
    this.timerId = setTimeout(() => {
      this.printArr()
    },200)
  },
  // vue2 -- beforeDestroy
  beforeUnmount() {
    if (this.timerId) {
      clearTimeout(this.timerId)
    }
  }
}

3. 被自定义事件引用，组件销毁时未清除

export default {
  data() {
    return {
      arr: [10,20,30]
    }
  },
  methods: {
    printArr() {
      console.log(this.arr)
    }
  },
  mounted() {
    window.addEventListener('resize', this.printArr)
  },
  // vue2 -- beforeDestroy
  beforeUnmount() {
    window.removeEventListener('resize', this.printArr)
  }
}

这里要注意在监听事件中的函数不能直接写函数， 要不然不能取消监听。 应该写在methods 中。用函数名。这样监听和取消监听就是一个函数了. 自定义事件也是如此

这内容不操作听着也头疼