web前端的內存泄漏

什麼是內存泄漏

JavaScript中的內存泄漏就是被分配的內存沒有被使用，但是也不能被回收的一種現象。簡單來說，我們已經無法再通過js代碼來引用到某個對象，但垃圾回收器卻認爲這個對象還在被引用，因此在回收的時候不會釋放它，這樣導致內存一直被佔用，會導致內存不夠用而系統崩潰。

內存泄漏常見的的幾種情況

全局變量

全局變量是不可回收的銷燬的，所以謹慎使用，如果存入數據過大，可以再用完之後進行清空，設置爲null或重新定義。

閉包

根據閉包的特性，內部函數有權訪問外部函數的變量對象。所以當fn()執行之後，DOM元素已經存在於內存。

function fn(){  
    var dom = document.createElement("XXX"); 
    dom .onclick = function(){ 
        console.log("DOM被閉包引用，不進行回收處理")
    }
}
fn()

沒有清理的 DOM 元素引用

function processData(data) {
  if (!data) {
    return
  }
  const url = window.URL.createObjectURL(new Blob([data]))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
   // document.body.removeChild(link) 記得要手動清除
}
processData(data)

被遺忘的計時器或回調

var times = new Date(); 
setInterval(function() { 
    var dom = document.getElementById('XXXX'); 
    if(dom) { 
        // 處理 dom 和 times 
        node.innerHTML = JSON.stringify(times)); 
    } 
}, 1000);

內存泄漏查找方式

• 調試工具——Memory——Profiles——Take snapshot
  
• summary對照表