Browser garbage collection has always been a part of the front-end interview that I never quite understood. I have studied it in depth recently and strive for an article to make it clear.

Let’s start with a look at the browser garbage collection process with these four questions, which will be answered later:

  1. How does the browser do garbage collection?

  2. When are memory for different types of variables released in the browser?

  3. What can cause a memory leak? How to avoid it?

  4. WeakMap What is the difference between a weakSet and a Map Set?

Ok, let ‘s go!

What is junk data?

You buy a bottle of Coke, drink it, and it becomes trash and should be recycled.

Similarly, when we write JS code, we manipulate data frequently.

When some data is not needed, it is garbage data, and the memory occupied by garbage data should be reclaimed.

The life cycle of a variable

Take this code for example:

Let dog = new Object() let dog.a = new Array(1) Copy codeCopy the code

When JavaScript executes this code,

A dog property is first added to the global scope and an empty object is created in the heap with the address pointing to dog.

We then create an array of size 1 and point the property address to dog.a. The memory layout is as follows:

If at this point, I assign another object toaProperty, the code looks like this:

Dog.a = new Object() Copies the codeCopy the code

Memory layout at this point:​

When the direction of A changes, the array object in the heap becomes unused data, known as “unreachable” data.

This is the garbage data that needs to be collected.

Garbage collection algorithm

Think of this process as spilling a giant bucket of paint from the root, staining the reachable objects from a root node, and then removing the unmarked ones.

Step 1: Mark the “reachable” values in the space.

V8 uses the reachability algorithm to determine whether objects in the heap should or should not be recycled.

The idea is this:

  • All objects are iterated from the Root node.

  • An object that can be traversed is reachable.

  • Unreachable: An object that has not been traversed.

In the browser environment, there are many root nodes, including these:

  • The global variable window is located in each iframe

  • Document the DOM tree

  • Variables stored on the stack

  • .

These root nodes are not garbage and cannot be recycled.

Step 2: Reclaim memory occupied by “unreachable” values.

After all marks are completed, all unreachable objects in memory are cleaned uniformly.

Step three, do memory defragment.

  • After frequent collection of objects, there is a large amount of discontinuous space in memory, known as “memory fragmentation”.

  • When a large amount of memory fragmentation occurs in memory, it is possible to run out of memory if large contiguous memory needs to be allocated.

  • So the last step is defragmentation. (This step is optional, however, because some garbage collectors do not generate memory fragmentation, such as the sub-garbage collector that we’ll cover next.)

When is the garbage collected?

When the browser is garbage collecting, it pauses the JavaScript script and waits until the garbage collection is complete.

For ordinary applications this is fine, but for JS games, animation on the coherence requirements of the application, if the pause time is very long will cause the page to stall.

That’s what we’re talking about next in terms of garbage collection: when to do garbage collection to avoid long pauses.

Generational collection

Browsers divide data into “temporary” objects and “permanent” objects.

  • Temporary objects:

    • Most objects live in memory for a short time.

    • Such as variables declared inside a function or in a block-level scope. Variables defined in scope are destroyed when a function or block of code completes execution.

    • Such objects quickly become inaccessible and should be reclaimed quickly.

  • Permanent objects:

    • Objects with long life cycles, such as global Windows, DOM, Web apis, and so on.

    • Such objects can be recycled more slowly.

These two types of objects correspond to different recycling strategies, so V8 divides the heap into new generation and old generation, with the new generation storing temporary objects and the old generation storing persistent objects.

And let the secondary garbage collector, the main garbage collector, respectively responsible for the new generation, old generation of garbage recovery.

This allows for efficient garbage collection.

Generally speaking, this is enough for an interview. If you want to have a deeper conversation with the interviewer, you can continue to talk about two garbage collectors.

Main garbage collector

Responsible for old generation garbage recycling, has two characteristics:

  1. Objects occupy large space.

  2. The object has a long lifetime.

It performs garbage collection using a mark-and-sweep algorithm.

  1. The first is marking.

    • Start with a set of root elements and recursively traverse the set of root elements.

    • In this traversal, the elements that arrive are called live objects, and the elements that do not arrive are judged to be junk data.

  2. Then there is garbage removal.Data marked as garbage is simply cleaned up.

  3. Multiple mark-clearing results in a large number of discrete memory fragments that need to be defragmented.​

Secondary garbage collector

Responsible for the new generation of garbage recycling, usually only support 1~8 M capacity.

The Cenozoic is divided into two regions: generally the object region and half the idle region.New objects are put into the object area, and when the object area is nearly full, a garbage collection is performed.

  1. Mark all garbage in the object area first.

  2. Once the tag is complete, the surviving objects are copied to the free area and sorted in order.This brings us back to the problem we left with earlier — the parafast collector has no defragmentation. Because the free area is now in order, there is no debris, there is no need to tidy up.

  3. After the replication is complete, the object area will be swapped with the free area. Puts objects alive in the free region into the object region.This completes the garbage collection.

Because the bygarbage collector operates frequently, the newborn area is typically set to be small for efficiency.

Once the space is detected to be full, a garbage collection is performed.

Generational collection

In a word, generation recycling is: the heap is divided into the new generation and old generation, more recycling new generation, less recycling old generation.

This reduces the number of objects to traverse each time, thus reducing the time spent on each garbage collection.​

Incremental collection

If there are many objects in the script, the engine will traverse the entire object at once, causing a long pause.

So the engine breaks up garbage collection into smaller chunks, one part at a time, several times.

This solves the problem of long pauses.​

Spare time to collect

The garbage collector only tries to run when the CPU is idle to reduce the possible impact on code execution.

Interview question 1: How do browsers do garbage collection?

From three points to answer what is garbage, how to pick up garbage, when to pick up garbage.

  1. What is garbage

    • No longer needed, it is garbage

    • Global variables can be used at any time, so they must not be garbage

  2. How to pick up litter (Traversal method)

    • The “reachable” value in the markup space.

      • All objects are iterated from the Root node.

      • An object that can be traversed is reachable.

      • Unreachable Object that has not been traversed

    • Reclaim memory occupied by “unreachable” values.

    • Do memory defragment.

  3. When do you pick up litter

    • Front-end has its particularity, garbage collection will cause page lag.

    • Generation collection, incremental collection, idle collection.

Interview question 2: When are memory for different types of variables released in the browser?

Javascritp types: value types, reference types.

  • Reference types

    • After there is no reference, it is automatically reclaimed by V8.

  • Value types

    • In the case of closures, V8 will not reclaim them until the closure is not referenced.

    • Non-closure case, waiting for the V8 generation switch when recycled.

Interview question 3: What can cause a memory leak? How to avoid it?

A memory leak is a variable that you “don’t use” (that you can’t access), that still occupies memory space and can’t be reused.

In the case of Vue, there are usually these situations:

  • Listening on events such as window/body is not unbound

  • Events tied to EventBus are not untied

  • There is no unwatch after Vuex’s $Store, watch

  • Created using a third-party library without calling the correct destruction function

Workaround: beforeDestroy in time

  • Binds events addEventListener and removeEventListener in the DOM/BOM object.

  • Observer mode $ON, $off processing.

  • If a timer is used in a component, it should be destroyed.

  • If a mounted/created hook is used for third-party library initialization, the corresponding destruction.

  • Weak reference weakMap and weakSet are used.

Do closures cause memory leaks?

By the way, one misconception I had about closures before I learned about garbage collection.

Do closures cause memory leaks? The correct answer is no.

A memory leak is a variable that you “don’t use” (that you can’t access), that still occupies memory space and can’t be reused.

The variables inside the closure are the ones we need, not a memory leak.

How did this misunderstanding come about? Because Internet explorer. There is a bug in IE, IE is still unable to retrieve variables referenced in closures after we use them. This is an IE problem, not a closure problem. Refer to this article

What is the difference between a weakSet and a Map Set?

In ES6, two new data structures, WeakMap and WeakSet, are added for us to solve the problem of memory leakage.

The object referenced by its key name is a weak reference, that is, the garbage collection mechanism does not consider the reference when traversing.

As soon as all other references to the referenced object are cleared, the garbage collection mechanism frees the memory occupied by the object.

In other words, once it is no longer needed, the key name object and the corresponding key value pair in WeakMap will disappear automatically, without manually deleting the reference.

A more comprehensive introduction can be seen here: Question 4: Introduce the differences between Set, Map, WeakSet and WeakMap

conclusion

Now that we’ve looked briefly at the browser’s garbage collection mechanism, remember the first four questions?

  1. How does the browser do garbage collection?

What is rubbish? How do you collect rubbish? When do you collect rubbish?

  1. When are memory for different types of variables released in the browser?

Divided into value type, reference type.

  1. What can cause a memory leak? How to avoid it?

A memory leak is a variable that you “don’t use” (that you can’t access), but that still occupies memory space and can’t be reused.

  1. weakMap weakSet 和 Map SetWhat’s the difference?

WeakMap, WeakSet weak reference, solve the problem of memory leakage.