首页 > 系统相关 >前端开发常见应用场景,如何判断是否存在内存泄漏?

前端开发常见应用场景,如何判断是否存在内存泄漏?

时间:2023-02-12 12:13:41浏览次数:52  
标签:泄漏 arr methods printArr 前端开发 内存 监听

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

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

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

使用过程是这样的:

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

  2. 在操作页面前,点击最右侧垃圾箱按钮,然后点击最左边开始按钮

  3. 操作页面

  4. 操作页面结束后, 点击 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)
    }
  }
}
  1. 被自定义事件引用,组件销毁时未清除
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 中。用函数名。这样监听和取消监听就是一个函数了. 自定义事件也是如此

这内容不操作听着也头疼

更多面试常考题目以及视频讲解内容在公众hao: 奋斗的刚子

欢迎体验我的小程序


标签:泄漏,arr,methods,printArr,前端开发,内存,监听
From: https://www.cnblogs.com/buxiugangzi/p/17113582.html

相关文章