js of memory leaks

A, JavaScript garbage collection mechanism

javascript automatic garbage collection mechanism, that is, memory usage procedure code execution will be responsible for environmental management. In languages ​​like C and C ++ class, a fundamental task of the developer is to manually track memory usage, which is a root cause of many problems. When writing javascript program, developers no longer need to be concerned about memory usage problems, the required memory allocation and garbage recycling full realization of automatic management.

The most commonly used JavaScript garbage collection is labeled Clear (mark-and-sweep). When the variable into the environment (e.g., a variable declared in a function), this variable will be marked as "into the environment." Logically, never release the memory occupied by variables into the environment, as long as the corresponding execution flow into the environment, it is possible to use them. When leaving the environment variable, which will mark it as "leaving the environment."

Second, what is a memory leak

Memory leak refers to an allocated memory we can not use, it can not recover until the end of the browser process. In C ++, because it is the thing to manually manage memory, memory leaks happen frequently. And now the popular languages ​​such as C # and Java garbage collection method using automatic memory management, almost a memory leak does not occur under normal use. The browser also uses automatic garbage collection method for managing memory, but because the browser garbage collection methods bug, will have a memory leak.

Several cases Third, memory leaks

1, when the page elements are removed or replaced, if the events of the binding elements still have not been removed, do not make a proper treatment in IE, this time must first manually remove the event, otherwise there will be a memory leak.

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

Should be replaced by the following

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

Or using event delegation

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    document.onclick = function(event){
        event = event || window.event;
        if(event.target.id == "myBtn"){
            document.getElementById("myDiv").innerHTML = "Processing...";
        }
    }
</script>

2, for pure ECMAScript objects, as long as no other object reference objects a, b, that is to say they are just references to each other, then the garbage collection system will still be recognized and processed. However, in Internet Explorer, if any object in a circular reference in the DOM node or ActiveX object, the garbage collection system will not find other objects circular relationship between them and the system is isolated and release them. Eventually they will remain in memory until the browser is closed.

var a=document.getElementById("xx");
var b=document.getElementById("xxx");
a.r=b;
b.r=a;

var a=document.getElementById("xx");
a.r=a;

3

function bindEvent() 
{ 
    var obj=document.createElement("XXX");   // 被闭包所引用，不会被回收
    obj.onclick=function(){    
        //Even if it's a empty function 
    } 
}

Closures can maintain local variables inside a function, it is not released.
Defines the event callback embodiment, since the function is defined functions, and the internal functions - reference event callback external storm, closures formed
solution, an event handler is defined externally releasing closure

function bindEvent() 
{ 
    var obj=document.createElement("XXX"); 
    obj.onclick=onclickHandler; 
} 
function onclickHandler(){ 
    //do something 
}

Or external event handler function definition, remove the reference to dom (outside the title, "JavaScript The Definitive Guide" in introduced, closure, useless scope attributes can be deleted to reduce memory consumption.)

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

4, forgotten or timer callback function

var someResource = getData(); 
setInterval(function() { 
    var node = document.getElementById('Node'); 
    if(node) { 
        // 处理 node 和 someResource 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
}, 1000);

This example illustrates what: the data associated with the node or the timer is no longer needed, node objects can delete the entire callback function is not needed. However, the timer callback function is still not been recovered (the timer is stopped will be recycled). Meanwhile, someResource If you store a lot of data, but also can not be recycled.

For example, the observer, once they are no longer needed (or the associated object becomes unreachable), remove them clearly very important. Old IE 6 can not handle circular references. Today, even if not explicitly remove them once the observer object becomes unreachable, most browsers can be recycled observer handler.

5、

a = {p: {x: 1}};
b = a.p;
delete a.p;

Bx value after the execution of this code is still 1. Since the property has been deleted references still exist, so in some implementations of JavaScript, it may not be because of this strict code cause a memory leak. So when destroying objects, attributes to traverse the properties, and then click Delete.

6, automatic boxing conversion type
to see information on the Internet, said the following code in the series, ie cause a memory leak, first put a God, or not to disclose specific matter

var s=”lalala”;
alert(s.length);

s is in itself rather than a string object, it does not have the length property, so when the visit length, JS engine will automatically create a temporary String object encapsulates s, but this object will leak. This bug is incredible, but fortunately fairly easy to solve, remember all value types do first explicit conversion operation before it:

var s="lalala";
alert(new String(s).length);

7, some DOM manipulation
issues specific to IE series simply means that in the absence DOM tree DOM elements appendChild; IE7 in order to improve looks like a memory leak, IE7 uses extreme solution: to recover all when leaving the page DOM tree element, the other not a matter.