面试题 -- JS哪些操作会造成内容泄露

意外的全局变量引起的内存泄露


function leak(){
  leak="xxx";//leak成为一个全局变量,不会被回收
}

闭包引起的内存泄露

function bindEvent(){
  var obj=document.createElement("XXX");
  obj.onclick=function(){
    //Even if it's a empty function
 }

闭包可以维持函数内局部变量,使其得不到释放。 上例定义事件回调时,由于是函数内定义函数,并且内部函数--事件回调的引用外暴了,形成了闭包。
解决之道,将事件处理函数定义在外部,解除闭包,或者在定义事件处理函数的外部函数中,删除对dom的引用。

没有清理的DOM元素引用


var elements={
    button: document.getElementById("button"),
    image: document.getElementById("image"),
    text: document.getElementById("text")
};
function doStuff(){
    image.src="http://some.url/image";
    button.click():
    console.log(text.innerHTML)
}
function removeButton(){
    document.body.removeChild(document.getElementById('button'))
}

被遗忘的定时器或者回调


var someResouce=getData();
setInterval(function(){
    var node=document.getElementById('Node');
    if(node){
        node.innerHTML=JSON.stringify(someResouce)
    }
},1000)

这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放。

怎么避免内存泄露

  • 减少不必要的全局变量、或者生命周期较长的对象,及时对无用的数据进行垃圾回收
  • 注意程序逻辑,避免“死循环”之类的
  • 避免创建过多的对象 原则:不用了的东西要及时归还

你可能感兴趣的:(面试题 -- JS哪些操作会造成内容泄露)