高級(jí)前端都會(huì)注意的開發(fā)細(xì)節(jié)！

都是一些開發(fā)中的小細(xì)節(jié)，非常推薦給大家，建議收藏，平時(shí)偶爾看看，自己實(shí)際項(xiàng)目中多注意下。都是小細(xì)節(jié)!

1、意外的全局變量

由于 js 對(duì)未聲明變量的處理方式是在全局對(duì)象上創(chuàng)建該變量的引用。如果在瀏覽器中，全局對(duì)象就是 window 對(duì)象。變量在窗口關(guān)閉或重新刷新頁(yè)面之前都不會(huì)被釋放，如果未聲明的變量緩存大量的數(shù)據(jù)，就會(huì)導(dǎo)致內(nèi)存泄露。

未聲明變量

function fn() {
  a = 'global variable'
}
fn()

使用 this 創(chuàng)建的變量(this 的指向是 window)。

function fn() {
  this.a = 'global variable'
}
fn()

解決方法：

• 避免創(chuàng)建全局變量
• 使用嚴(yán)格模式,在 JavaScript 文件頭部或者函數(shù)的頂部加上 use strict。

2、閉包引起的內(nèi)存泄漏

原因：閉包可以讀取函數(shù)內(nèi)部的變量，然后讓這些變量始終保存在內(nèi)存中。如果在使用結(jié)束后沒有將局部變量清除，就可能導(dǎo)致內(nèi)存泄露。

function fn () {
  var a = "I'm a";
  return function () {
    console.log(a);
  };
}

解決方法：

• 將事件處理函數(shù)定義在外部，解除閉包，或者在定義事件處理函數(shù)的外部函數(shù)中。
• 比如：在循環(huán)中的函數(shù)表達(dá)式，能復(fù)用最好放到循環(huán)外面。

// bad
for (var k = 0; k < 10; k++) {
  var t = function (a) {
    // 創(chuàng)建了10次  函數(shù)對(duì)象。
    console.log(a)
  }
  t(k)
}

// good
function t(a) {
  console.log(a)
}
for (var k = 0; k < 10; k++) {
  t(k)
}
t = null

3、沒有清理的 DOM 元素引用

• 原因：雖然別的地方刪除了，但是對(duì)象中還存在對(duì) dom 的引用。

// 在對(duì)象中引用DOM
var elements = {
  btn: document.getElementById('btn'),
}
function doSomeThing() {
  elements.btn.click()
}

function removeBtn() {
  // 將body中的btn移除, 也就是移除 DOM樹中的btn
  document.body.removeChild(document.getElementById('button'))
  // 但是此時(shí)全局變量elements還是保留了對(duì)btn的引用, btn還是存在于內(nèi)存中,不能被GC回收
}

• 解決方法：手動(dòng)刪除，elements.btn = null。

4、被遺忘的定時(shí)器或者回調(diào)

定時(shí)器中有 dom 的引用，即使 dom 刪除了，但是定時(shí)器還在，所以內(nèi)存中還是有這個(gè) dom。

// 定時(shí)器
var serverData = loadData()
setInterval(function () {
  var renderer = document.getElementById('renderer')
  if (renderer) {
    renderer.innerHTML = JSON.stringify(serverData)
  }
}, 5000)

// 觀察者模式
var btn = document.getElementById('btn')
function onClick(element) {
  element.innerHTMl = "I'm innerHTML"
}
btn.addEventListener('click', onClick)

解決方法：

• 手動(dòng)刪除定時(shí)器和 dom。
• removeEventListener 移除事件監(jiān)聽

vue 中容易出現(xiàn)內(nèi)存泄露的幾種情況

在 Vue SPA 開發(fā)應(yīng)用，那么就更要當(dāng)心內(nèi)存泄漏的問題。因?yàn)樵?SPA 的設(shè)計(jì)中，用戶使用它時(shí)是不需要刷新瀏覽器的，所以 JavaScript 應(yīng)用需要自行清理組件來(lái)確保垃圾回收以預(yù)期的方式生效。因此開發(fā)過(guò)程中，你需要時(shí)刻警惕內(nèi)存泄漏的問題。

1、全局變量造成的內(nèi)存泄露

聲明的全局變量在切換頁(yè)面的時(shí)候沒有清空

<template>
  <div id="home">這里是首頁(yè)</div>
</template>

  export default {
    mounted() {
      window.test = {
        // 此處在全局window對(duì)象中引用了本頁(yè)面的dom對(duì)象
        name: 'home',
        node: document.getElementById('home'),
      }
    },
  }

解決方法：

• 在頁(yè)面卸載的時(shí)候順便處理掉該引用。

destroyed () {
  window.test = null // 頁(yè)面卸載的時(shí)候解除引用
 }

2、監(jiān)聽在 window/body 等事件沒有解綁

• 特別注意 window.addEventListener 之類的時(shí)間監(jiān)聽

<template>
<div id="home">這里是首頁(yè)</div>
</template>

export default {
mounted () {
  window.addEventListener('resize', this.func) // window對(duì)象引用了home頁(yè)面的方法
}
}

解決方法：

• 在頁(yè)面銷毀的時(shí)候，順便解除引用，釋放內(nèi)存

mounted () {
  window.addEventListener('resize', this.func)
},
beforeDestroy () {
  window.removeEventListener('resize', this.func)
}

3、綁在 EventBus 的事件沒有解綁

舉個(gè)例子

<template>
  <div id="home">這里是首頁(yè)</div>
</template>

export default {
  mounted () {
   this.$EventBus.$on('homeTask', res => this.func(res))
  }
}

• 解決方法:在頁(yè)面卸載的時(shí)候也可以考慮解除引用

mounted () {
 this.$EventBus.$on('homeTask', res => this.func(res))
},
destroyed () {
 this.$EventBus.$off()
}

4、Echarts

每一個(gè)圖例在沒有數(shù)據(jù)的時(shí)候它會(huì)創(chuàng)建一個(gè)定時(shí)器去渲染氣泡，頁(yè)面切換后，echarts 圖例是銷毀了，但是這個(gè) echarts 的實(shí)例還在內(nèi)存當(dāng)中，同時(shí)它的氣泡渲染定時(shí)器還在運(yùn)行。這就導(dǎo)致 Echarts 占用 CPU 高，導(dǎo)致瀏覽器卡頓，當(dāng)數(shù)據(jù)量比較大時(shí)甚至瀏覽器崩潰。

解決方法：

• 加一個(gè) beforeDestroy()方法釋放該頁(yè)面的 chart 資源，我也試過(guò)使用 dispose()方法，但是 dispose 銷毀這個(gè)圖例，圖例是不存在了，但圖例的 resize()方法會(huì)啟動(dòng)，則會(huì)報(bào)沒有 resize 這個(gè)方法，而 clear()方法則是清空?qǐng)D例數(shù)據(jù)，不影響圖例的 resize，而且能夠釋放內(nèi)存，切換的時(shí)候就很順暢了。

beforeDestroy () {
  this.chart.clear()
}

5、v-if 指令產(chǎn)生的內(nèi)存泄露

v-if 綁定到 false 的值，但是實(shí)際上 dom 元素在隱藏的時(shí)候沒有被真實(shí)的釋放掉。

比如下面的示例中，我們加載了一個(gè)帶有非常多選項(xiàng)的選擇框，然后我們用到了一個(gè)顯示/隱藏按鈕，通過(guò)一個(gè) v-if 指令從虛擬 DOM 中添加或移除它。

這個(gè)示例的問題在于這個(gè) v-if 指令會(huì)從 DOM 中移除父級(jí)元素，但是我們并沒有清除由 Choices.js 新添加的 DOM 片段，從而導(dǎo)致了內(nèi)存泄漏。

<div id="app">
  <button v-if="showChoices" @click="hide">Hide</button>
  <button v-if="!showChoices" @click="show">Show</button>
  <div v-if="showChoices">
    <select id="choices-single-default"></select>
  </div>
</div>

  export default {
    data() {
      return {
        showChoices: true,
      }
    },
    mounted: function () {
      this.initializeChoices()
    },
    methods: {
      initializeChoices: function () {
        let list = []
        // 我們來(lái)為選擇框載入很多選項(xiàng)，這樣的話它會(huì)占用大量的內(nèi)存
        for (let i = 0; i < 1000; i++) {
          list.push({
            label: 'Item ' + i,
            value: i,
          })
        }
        new Choices('#choices-single-default', {
          searchEnabled: true,
          removeItemButton: true,
          choices: list,
        })
      },
      show: function () {
        this.showChoices = true
        this.$nextTick(() => {
          this.initializeChoices()
        })
      },
      hide: function () {
        this.showChoices = false
      },
    },
  }

在上述的示例中，我們可以用 hide() 方法在將選擇框從 DOM 中移除之前做一些清理工作，來(lái)解決內(nèi)存泄露問題。為了做到這一點(diǎn)，我們會(huì)在 Vue 實(shí)例的數(shù)據(jù)對(duì)象中保留一個(gè)屬性，并會(huì)使用 Choices API 中的 destroy() 方法將其清除。

<div id="app">
<button v-if="showChoices" @click="hide">Hide</button>
<button v-if="!showChoices" @click="show">Show</button>
<div v-if="showChoices">
  <select id="choices-single-default"></select>
</div>
</div>

  export default {
    data() {
      return {
        showChoices: true,
        choicesSelect: null
      }
    },
    mounted: function () {
      this.initializeChoices()
    },
    methods: {
      initializeChoices: function () {
        let list = []
        for (let i = 0; i < 1000; i++) {
          list.push({
            label: 'Item ' + i,
            value: i,
          })
        }
         // 在我們的 Vue 實(shí)例的數(shù)據(jù)對(duì)象中設(shè)置一個(gè) `choicesSelect` 的引用
        this.choicesSelect = new Choices("#choices-single-default", {
          searchEnabled: true,
          removeItemButton: true,
          choices: list,
        })
      },
      show: function () {
        this.showChoices = true
        this.$nextTick(() => {
          this.initializeChoices()
        })
      },
      hide: function () {
        // 現(xiàn)在我們可以讓 Choices 使用這個(gè)引用，從 DOM 中移除這些元素之前進(jìn)行清理工作
        this.choicesSelect.destroy()
        this.showChoices = false
      },
    },
  }

ES6 防止內(nèi)存泄漏

前面說(shuō)過(guò)，及時(shí)清除引用非常重要。但是，你不可能記得那么多，有時(shí)候一疏忽就忘了，所以才有那么多內(nèi)存泄漏。

ES6 考慮到這點(diǎn)，推出了兩種新的數(shù)據(jù)結(jié)構(gòu)：weakset 和 weakmap 。他們對(duì)值的引用都是不計(jì)入垃圾回收機(jī)制的，也就是說(shuō)，如果其他對(duì)象都不再引用該對(duì)象，那么垃圾回收機(jī)制會(huì)自動(dòng)回收該對(duì)象所占用的內(nèi)存。

const wm = new WeakMap()
const element = document.getElementById('example')
vm.set(element, 'something')
vm.get(element)

上面代碼中，先新建一個(gè) Weakmap 實(shí)例。然后，將一個(gè) DOM 節(jié)點(diǎn)作為鍵名存入該實(shí)例，并將一些附加信息作為鍵值，一起存放在 WeakMap 里面。

這時(shí)，WeakMap 里面對(duì) element 的引用就是弱引用，不會(huì)被計(jì)入垃圾回收機(jī)制。注冊(cè)監(jiān)聽事件的 listener 對(duì)象很適合用 WeakMap 來(lái)實(shí)現(xiàn)。

// 代碼1
ele.addEventListener('click', handler, false)

// 代碼2
const listener = new WeakMap()
listener.set(ele, handler)
ele.addEventListener('click', listener.get(ele), false)

代碼 2 比起代碼 1 的好處是：由于監(jiān)聽函數(shù)是放在 WeakMap 里面，一旦 dom 對(duì)象 ele 消失，與它綁定的監(jiān)聽函數(shù) handler 也會(huì)自動(dòng)消失。