By Devtools determine memory leaks of the page

By on one of the timeline, and hook Memoryoptions, several times more than run the following code, GitHub

var x = [];

function createSomeNodes() {
    var div,
        i = 100,
        frag = document.createDocumentFragment();
    for (;i > 0; i--) {
        div = document.createElement("div");
        div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
        frag.appendChild(div);
    }
    document.getElementById("nodes").appendChild(frag);
}
function grow() {
    x.push(new Array(1000000).join('x'));
    createSomeNodes();
    setTimeout(grow,1000);
}

We take a look clicking numerous times after the memory usage

and then we look at a normal memory map

By comparison we can see that there is a very clear memory leak of up curve, and will not decrease with time and garbage collection, which proves there is a memory leak.

Or you can also profilesobserve a memory leak case Record Heap Allocations panel

can see a lot of blue columns, while the blue column on behalf of the garbage collector does not reclaim the memory part out, the greater the more the blue column on behalf of the more memory leaks serious

Positioning problem

Open the profilespanel, first obtain a snapshot of memory before running the program, and then run the program waits for a period of time to earn a few memory snapshots.

We first explain the meaning of the memory snapshot in

The name of the object's constructor constructor
distance from the root object to the recovery
Count the number of objects Objects
Shallow Size Shallow Size of memory represents the size of the object directly held. JS a standard for describing objects usually held directly stored in the DRAM and logic values (attribute values). Under normal circumstances there should only be a string, and array types may have a bigger Shallow Size.
Retained Size Retained Size represents the memory size of the current object referenced by other objects occupied when the current object is destroyed, this part of the memory will be freed.

Then we click Summary Select Comparison (comparison)

can see String & HTMLDivElement have tremendous memory, compared to our code strings and indeed long-held div lead to memory leaks

We click on a String to

be seen x in Window / localhost:63342 @473517can locate memory leaks x variable on the window caused

to sum up

The general performance of memory leaks in use for some time page Caton, to determine the problem by re-scene after scene in the timeline, and then combined with the memory snapshot to target specific leak points.

Original: Large column memory leak analysis

Memory leak analysis

Positioning problem

to sum up

Guess you like