美文网首页JavaScript
面试题 -- JS哪些操作会造成内容泄露

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

作者: 开着五菱宏光的小白 | 来源:发表于2019-04-21 14:46 被阅读0次

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

    
    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哪些操作会造成内容泄露

        本文链接:https://www.haomeiwen.com/subject/swfjgqtx.html