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对照表