面试题-知识深度

如何检测js内存泄漏？js内存泄漏场景有哪些

内存泄漏
可使用 Chrome devTools 的 Performance和Memory 工具来检测js 内存

• heap锯齿状是是没有内存泄漏
• heap曲线上升是存在内存泄漏

内存泄漏场景（以vue为例）

• 被全局变量、函数引用，组件销毁时未清除
• 被全局事件、定时器引用，组件销毁时未清除
• 被自定义事件引用，组件销毁时未清除

解决方法

// 事件监听器及时销毁
mounted() {
   
  window.addEventListener('scroll', this.handleScroll) 
} 
beforeDestroy() {
   
  window.removeEventListener('scroll', this.handleScroll)
}

// 定时器及时销毁clearTimeout，clearInterval
mounted() {
   
  this.timer = setInterval(this.handleTimer, 1000)
}
beforeDestroy() {
   
  clearInterval(this.timer)
}

// EventBus 的事件解绑
mounted () {
   
 this.$EventBus.$on('handleScroll', res => this.func(res))
},
destroyed () {
   
 this.$EventBus.$off('handleScroll')
}

// 弱引用
const wMap = new weakMap()
function fn() {
   
  const obj = {
    x: 100 } // 会销毁
  wMap.set('a', obj )