Shulou(Shulou.com)06/02 Report--

This article shows you how to use Chrome developer tools to analyze javascript memory collection, the content is concise and easy to understand, can definitely make your eyes bright, through the detailed introduction of this article, I hope you can get something.

Today, I saw a question in Zhihu: "if an element created through createElment is not append to html, what is the time when this element is automatically destroyed?"

For example:

Var a

(function () {

A = document.createElment ("div")

) ()

A = "Hello"

At this point, can the browser correctly destroy and recycle the dom element that has not been append to the page?

If this element will not be actively destroyed or recycled, how can it be destroyed?

We know that this element created through document.createElment has no parentNode because it is not added to the page when it is created. So how can it be destroyed?

When an object occupies (uses) memory, two ways are used: direct and indirect. Direct memory consumption is easy to understand, while indirect memory consumption means that references to other objects are maintained in the object, so that those objects cannot be reclaimed by garbage collection (GC mechanism).

A very important concept in GC is the GC GC root. When an object in a javascript program cannot be traversed from GC root, the memory used by that object will be reclaimed.

So let's analyze the top code in principle. When document.createElment ("div") is executed, a dom object of div is created and assigned to the a variable, and then a string "Hello" is assigned to the a variable. At this point, the value of an is "Hello" and the type is a string. The previously created div object can no longer be traversed through GC, so the div object is recycled. If the div object is not recycled, we observe that the above code shows that the object can no longer be referenced by any variables, resulting in a memory leak.

Let's take a look at the above code by using Chrome's developer tool.

First create a blank html page with no code written in it.

To prevent interference, create a new invisible window in chrome and open the blank page in the invisible window.

Press F12 or Ctrl + Shift + I to bring up devtools and select the Profile panel.

At this time, the memory usage at this time will be recorded.

Press ESC to open Console, or manually switch to the Console panel, enter

Var a; (function () {a = document.createElment ("div");}) ()

Then press Ctrl   +   E, or click the Take Heap Snapshot button again, and another Snapshot2 will be recorded. Select Comparison to compare this memory with that recorded last time.

There are many differences, many can be ignored, look at the last one:

After the selection, the details are as follows:

Detached DOM means that the DOM is free from the DOM of the page.

Run the code

A = "Hello"

After continuing the above steps, Snapshot3 is Delete compared to Snapshot2.

Snapshot3 has more string "Hello" than Snapshot1.

Through Heap Allocation Timeline, we can observe when DOM is GC.

The above is how to use Chrome developer tools to analyze the memory recovery of javascript. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.