Will the interviewer throw something like “Relationship between closures and memory leaks”?

Most of the time, interviewers are prepared to dig into deep questions about JS memory management, garbage collection, and the causes of memory leaks.

Stack memory vs. heap memory

Basic types are stored in JS stack memory; Reference types are stored in the JS heap memory.

Reference counting method

When we point to a value with a variable, we create a “reference” to that value:

const students = ['baomboo'.'Little Bamboo'];
Copy the code

You know that assignment expressions read from right to left. So this line of code starts by opening up a chunk of memory and putting the array on the right into it, which now takes up a chunk of memory. The STUDENTS variable then points to it, creating a “reference” to the array. In reference counting, there is a reference count for every value in memory. When the garbage collector senses that a value has a zero reference count, it determines that it is “useless” and the memory is freed.

Where is reference counting flawed?

function recovery() { 
    var recoveryObj1 = {};
    var recoveryObj2 = {};
    recoveryObj1.target = recoveryObj2;
    recoveryObj2.target = recoveryObj1;
}

recovery()
Copy the code

The life of a function scope is very short, and after the recovery() function is executed, all variables in the scope will be treated as “garbage” and removed. RecoveryObj1 and recoveryObj2 will survive even after recovery is complete, because recoveryObj2 has a reference count of 1 (recoveryobj1.target). The reference count of recoveryObj1 is also 1 (recoveryobj2.target). So reference counting can’t identify “garbage collection” in circular reference scenarios.

Mark clearance

Considering the serious limitations of reference counting, the tag cleanup algorithm is the standard garbage collection algorithm in modern browsers. This algorithm has two stages, marking stage and clearing stage respectively:

  • Marking phase: The garbage collector first finds the root object, which in the browser is Window; In Node, the root object is Global. Starting from the root object, the garbage collector scans all variables that can be reached through the root object, and these objects are marked as “reachable.”
  • Cleanup phase: Variables that are not marked as “reachable” are considered unwanted and the wave variables are cleared.

When recovery completes, both recoveryObj1 and recoveryObj2 are identified as unreachable objects from the root object Window and are cleared as expected. In this way, the problem of circular references is solved simply by being marked clean.

Closures and memory leaks

The released variables (memory garbage) are not released, but still occupy the original memory, leading to a series of problems such as performance deterioration and system crash. This phenomenon is called memory leak.

During the interview process, memory leaks are raised by some interviewers with closures. In fact, memory leakage is not a profound proposition, resulting in memory leaks, often is a low-level error. To put it bluntly, that is, the code is bad.

In fact, memory leaks caused by closures alone are extremely rare (unless you’re doing something extremely unorthodox, but that’s not the closure, it’s the code).

Memory Leak scenario

Function () {name: ‘bamboo’} function() {name: ‘bamboo’}

2, forget to clear setInterval and setTimeout;

3. Remove improper DOM

.