前端項目查看是否有內存泄漏的情況

在項目運行中，有時會遇到這樣的問題，項目運行時間長了，速度就越來越慢，最后導致頁面崩潰。這個時候就需要查看是否有內存泄漏的情況了。

怎么查看呢？這里我推薦一種辦法，使用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)
    }
  }
}

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 中。用函數名。這樣監聽和取消監聽就是一個函數了. 自定義事件也是如此

這內容不操作聽著也頭疼

更多面試常考題目以及視頻講解內容在公眾hao: 奮斗的剛子

歡迎體驗我的小程序