Js(面試第1天)_造成內存泄漏的操作有哪些

一、前言                                                                        

二、主要內容                                                                 

1、 內存泄漏：就是沒有使用，或已經使用完的變量，沒有及時回收。

2、常見的javascript內存泄漏

       一、意外的全局變量

               （1）初始化未經聲明的變量，總是會創建一個全局變量

function f1(){
            //初始化這個變量沒有聲明，成為全局變量，不會自動被回收
            bar = "this is a global variable"
            //window.bar = "this is a global variable"
        }

　　　　（2）由this創建的全局變量

    function f1(){
       
           this.bar = "this is a global variable"

        }
     f1()

 

注意：有些全局變量產生的垃圾，不可回收，尤其當全局變量用於臨時存儲和處理大量信息的時候，確保用完之后將他設置為null

　　

　　二、計時器或回調函數

var someResource = getData()
          //這個列子說明只要存在節點才需要定時器和回調函數，此時定時器並沒有回收（只有停止時才回收）
        setInterval(function(){
            var node = document.getElementById('Node');
            if(node){
                node.innerHTML = JSON.stringify(someResource)
            }

        },1000)

注意：一旦定時器不需要，需要移除。

 

　　三、dom清空或刪除時，事件未清除導致的內存泄漏

<div id="container">  
</div>

$('#container').bind('click', function(){
    console.log('click');
}).remove();

 // zepto 和原生 js下，#container dom 元素，還在內存里jquery 的 empty和 remove會幫助開發者避免這個問題 

<div id="container">  
</div>

$('#container').bind('click', function(){
    console.log('click');
}).off('click').remove();
//把事件清除了，即可從內存中移除

　　四、閉包

匿名函數可以訪問父級作用域中的變量

function assignHandler(){
            var element = document.getElementById('someElement') //該變量被閉包引用，引用次數至少為1，不會被回收
            element.onclick=function(){
                alert(element.id)
            }
        }

解決：

function assignHandler(){
            var element = document.getElementById('someElement')
            var id = element.id
            element.onclick=function(){
                alert(id)
            }
            element=null
        }

　　五、子元素存在引起的內存泄漏

 

 

 

如上圖所示：

                     1）黃色是直接被js變量所引用的，存在內存中。

                     2）引用A的時候，在間接引用B，

　　　　　3)子元素 B 由於 parentNode 的間接引用，只要它不被刪除，它所有的父元素（圖中紅色部分）都不會被刪除

三、總結                                                                        

參考一：https://www.cnblogs.com/libin-1/p/6013490.html

參考二：https://blog.csdn.net/qappleh/article/details/80337630