Memory leak analysis for JavaScript

As programmers (even taller titles: Research software development), we must have experienced a memory leak, whether in JavaScript or. NET, the Java language. It's just that they have a GC mechanism to help programmers with memory recycling, if you're a C + + developer (you know) ... , if you are a front-end developer, you must be using JavaScript (you might say, JS is the best language in the world), but I also have to tell you that JS memory leaks will come more suddenly, or you will not be aware of. This article takes everybody to appreciate the JS's coquettish:

I. Memory leaks due to modularity

The code is as follows:

// Module Date.js NULL  default  {    init () {        new  Date ();    }} // main.jsImport date from ' Date.js ';d ate.init ();

These are the code formats that are common in modern front-end engineering scenarios, write a module, and then export this module. Here you should know that the date in Date.js is static (that is, you import the Date.js module in N), but their date variable is shared, changed in one place, and changed elsewhere.

Second, the false OOP paradigm caused by memory leaks

Why do I call him false oop, because this code is to implement the OOP paradigm and let itself fall into the pit, first on the code:

var function (ARG) {    this. Sarg = arg;       var  This ;     return function () {        console.log (self.sarg);    }} var New Fun (' Data arg '); FN ();

First, define the function variable for fun, and then return a functional (which can be said to be a typical closure). Inside the closure function references the outside of this object (var self = this).

Then, call the fun through new, the return value is accepted with FN, here everyone knows the return is a function, so the parentheses operator can be executed.

2.1 Using Chrome's memory panel for analysis

Go to the Memory panel, then refresh the page, then click on the ' Collect garbage ' icon shown (that is, an icon like the Recycle Bin), forcing a GC to be recycled, This ensures that the objects we analyze are objects that can have memory leaks (at least they are objects that the GC is not recyclable).

This figure is a memory variable that cannot be recycled by GC after the above code fragment is executed in Chrome browser. 2.2 Reasons I think

First post the code that has a memory leak

var function (ARG) {    this// memory leak    varthis;   memory leak    returnfunction() {        console.log (self.sarg); // Memory Leaks     }}varnew// memory leak fn ();

I think there are several reasons for this:

1. Using the new operator, he creates an object, executes the constructor, and copies the prototype (that is, the prototype) corresponding to the constructor to the new object.

2. The new object mentioned above, when the constructor is executed, it points to the new object.

3. The above code then returns a function in the constructor, and a new object is referenced in the function, and the return function assigns a value to the FN variable

4. The most executed FN variable, the correct output of the content we want, so that the program ran ( can, we new out of the object, no one is the tube, so he leaked ). 2.3 Summary:

because normally, when we perform a new operation on a function, we do not return it within the constructor, but by default the new operation will return the this object in the constructor. The above code is not recommended in the project code, which is a typical error notation, and the example is just to demonstrate a leak.

Iii. memory leaks due to DOM events

If you are jquery's loyalty powder, this part may be helpful for you, first on the code:

// HTML:<input type= "file" id= "file"/><button type= "button" onclick= "Remove ()" >but</button >//JS:var file = document.getElementById ("file"); File.addeventlistener (' Change ',function(event) {    console.log (event.target.value);}); function Remove () {    file.remove ();}

First we write two tags in html, one is file, one is button, then the Change event is bound to the file tag in JS, and then a remove method is bound to the button to remove the file label.

3.1 Memory leak analysis

After we have executed the Remove method, we then collect the memory analysis:

We also follow example two of the same operation, open the memory panel, then perform a GC collection after collecting the data, and then view the detached DOM tree ( which represents the object that lost contact with the DOM tree ), and then we move the mouse over the native, The code location for the memory leak is displayed.

jquery loyalty powder can be noted, whether you use bind or on the event binding, if you remove these DOM elements before the corresponding unbind or off operation, then congratulations, memory must be leaking.

Memory leak analysis for JavaScript