Detailed discussion on several situations of js memory leak_javascript skills

A memory leak means that a piece of allocated memory cannot be used or recycled until the browser process ends. In C, because memory is managed manually, memory leaks are a common occurrence. Nowadays, popular languages ​​​​such as C# and Java use automatic garbage collection methods to manage memory, and almost no memory leaks occur under normal use. Browsers also use automatic garbage collection to manage memory. However, due to bugs in the browser's garbage collection method, memory leaks may occur.

1. When an element in the page is removed or replaced, if the event bound to the element has not been removed, IE will not handle it appropriately. At this time, the event must be manually removed first, otherwise There will be a memory leak.

Copy code The code is as follows:

should be changed to the following

Copy the code The code is as follows:

Or use event delegation

Copy code The code is as follows:

2.

Copy code The code is as follows:

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

Copy code The code is as follows:

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

For pure ECMAScript objects, as long as no other objects refer to objects a and b, it is also That is to say, they are just references to each other, and they will still be recognized and processed by the garbage collection system. However, in Internet Explorer, if any of the objects in the circular reference are DOM nodes or ActiveX objects, the garbage collection system does not discover that the circular relationship between them is isolated from other objects in the system and frees them. Eventually they will be retained in memory until the browser is closed.
3.

Copy code The code is as follows:

var elem = document.getElementById( 'test');
elem.addEventListener('click', function() {
alert('You clicked ' elem.tagName);
});

This This code registers an anonymous function as a click event processing function of a DOM node. A DOM object elem is referenced in the function, forming a closure. This will generate a circular reference, namely: DOM-> Closure->DOM-> Closure... The DOM object will not be released before the closure is released; and the closure serves as the event handling function of the DOM object exists, so the closure will not be released before the DOM object is released. Even if the DOM object is deleted in the DOM tree, due to the existence of this circular reference, neither the DOM object nor the closure will be released. You can use the following method to avoid this memory leak

Copy the code The code is as follows:

var elem = document.getElementById('test');
elem.addEventListener('click', function() {
alert('You clicked ' this.tagName); // No Then directly reference the elem variable
});

4.

Copy the code The code is as follows :

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

Closures can easily form circular references. If a function object that forms a closure is assigned to, say, an event handler for a DOM node, and a reference to that node is assigned to an active (or mutable) object in the scope of the function object, then there is Circular references.
DOM_Node.onevent -
It is easy to create such a circular reference, and even a brief browse through a website that contains similar circular reference code (usually found on every page of the website) can consume a lot (or even all) of the system's memory.
The solution is to define the event processing function externally and release the closure

Copy the code The code is as follows:

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

Or delete the reference to the dom in the external function that defines the event handling function (off topic, as introduced in "The Definitive Guide to JavaScript", close In the package, unused attributes in the scope can be deleted to reduce memory consumption. )

Copy code The code is as follows:

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

5.

Copy code The code is as follows:

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

After executing this code, the value of b.x is still 1. Since the deleted attribute reference still exists, in some implementations of JavaScript, memory leaks may occur due to this loose code. Therefore, when destroying an object, you need to traverse the properties and delete them one by one.
6. Automatic type boxing conversion
Don’t believe it, the following code will cause memory leaks in IE series

Copy code The code is as follows:

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

s itself is a string rather than an object , it has no length attribute, so when accessing length, the JS engine will automatically create a temporary String object to encapsulate s, and this object will definitely be leaked. This bug is incredible, but fortunately it is quite easy to solve. Remember to explicitly convert all value types before performing operations:

Copy code The code is as follows:

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

7. Certain DOM operations
The unique problem of the IE series is simply appendChild to DOM elements that are not on the DOM tree; in IE7, it seems that in order to improve memory leaks, IE7 adopts an extreme solution: recycling all elements on the DOM tree when leaving the page. Don't care about anything else.