JavaScript memory leaks

Translator Preface

Original address: Memory leaks

A brief look at the closure and garbage collection mechanism (GC) of the next JavaScript has recently made it easy to get into the concept of memory leaks. And then accidentally found this article, look down after understanding a lot of things, so the translation of share with you.

In JavaScript, we seldom consider memory management, but it is real. When we create a variable and then use them, then the browser's garbage collection mechanism recycles them.

While we rarely consider memory management, when the application becomes more complex and Ajax, we open a Web page, and over time we find that the memory consumed by the browser is increasing, most likely due to memory leaks, when we have to consider memory management.

Memory management for JavaScript

The core of JavaScript memory management is the JavaScript garbage collection mechanism, while the data in memory includes the data in the stack (local variables, parameters of the method being called), and global variables, which are also present in memory if they are referenced or present in a chain of references. You can refer to the JavaScript garbage collection mechanism for this.

Here's another example of a GC:

function Menu (title) {  this. title = Title  this. Elem = document.getElementById (' Id ')}varnew menu (' My Menu '= '  //  (1)  New // (2)

The memory structure is as follows:

After step (1), the body.innerhtml is emptied, so its child nodes are removed. But the element #id is an exception, it can still be accessed through Menu.elem, so it still exists in memory, of course, if you cannot access its parent node because it is removed.

　　A single DOM element may exist in memory even if its parent node has been removed.

After step (2), Window.menu is re-assigned to the reference, so the original menu is inaccessible, and then automatically collected by GC.

Closures often cause circular references:

function SetHandler () {  var elem = document.getElementById (' id ')  function() {    // ...   }}

DOM element Elem refers to a function through the onclick, and this function can also refer to the DOM variable elem in the outer scope.

　　even if there is no code in the onclick function, the circular reference is also established . Some methods, like addeventlistener/attachevent, can also form similar circular references.

Memory leaks

When an object is no longer referenced, but the browser does not release memory for some reason, it can cause a memory leak. Browser problems, browser plugin problems, or our own code problems can cause memory leaks.

In the previous garbage collection mechanism article we learned that a circular reference to a DOM object can cause a memory leak when the IE8 is below (further, a COM object in fact)

function SetHandler () {  var elem = document.getElementById (' id ')  function/* */ }}

Outside of the DOM object, any COM object including XMLHttpRequest will cause a memory leak.

The solution of IE's memory leak is to break the circular reference.

We assign the DOM element Elem null, so the function in the onclick does not refer to elem again, so this loop is broken.

About memory management and disclosure of XMLHttpRequest:

The following code is perfectly leaked below IE9 ...

var New // or ActiveX in older IE Xhr.open (truefunction() {  if(xhr.readystate = = 4 & & xhr.status = =) {                //  ...   }}xhr.send (null)

Let's take a look at the memory tree:

　　

• Measures for memory leaks and new leaks in jquery

The jquery has not been carefully studied, a little ...

In the Chrome Developer toolbar, there is a timelinethat can detect memory leaks more or less.

JavaScript memory leaks