Translator: Front-end wisdom

Original text: javascript. The info/garbage – col…

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Recently I have seen some interview review, many have been asked by the interviewer to talk about JS garbage collection mechanism, to tell the truth, the interviewer will ask this question, that he has recently seen some articles about JS garbage collection mechanism, in order to B, will incidentally ask.

Recently I saw a foreign article about JS garbage recycling. I think it is clear, so I translated it. I hope it will be helpful to you.

The garbage collection

Memory management in JavaScript is automatic and invisible. We create primitive types, objects, functions… All of this requires memory.

What happens when something is no longer needed? How does the JavaScript engine find and clean it up?

accessibility

The main concept of memory management in JavaScript is reachability.

Simply put, “reachable” values are those that are accessible or available in some way that is guaranteed to be stored in memory.

1. There is a basic set of inherently reachable values that cannot be removed for obvious reasons. Such as:

  • Local variables and arguments of a local function

  • Currently nested variables and arguments of other functions on the call chain

  • The global variable

  • There are some other ones, internal ones

These values are called roots.

2. A reference or chain of references is considered accessible if any other value can be accessed from the root.

For example, if there is an object in a local variable and that object has attributes that refer to another object, that object is considered reachable and those that it refers to are also accessible, as detailed below.

The JavaScript engine has a background process called the garbage collector that monitors all objects and removes those that are not accessible.

A simple example

Here is the simplest example:

// user has a reference to the object let user = {name: "John"};Copy the code

Here the arrow represents an object reference. The global variable “user” refers to the object {name: “John”} (we’ll name it John for brevity). John’s “name” property stores a primitive type, so it is drawn in the object.

If the value of user is overwritten, the reference is lost:

user = null;
Copy the code

Now John is unreachable, there is no way to access it, no reference to it. The garbage collector discards John data and frees memory.

Two references

Now let’s assume that we copy the reference from user to admin:

// user has a reference to the object let user = {name: "John"}; let admin = user;Copy the code

Now if we do the same thing:

user = null;
Copy the code

The object is still accessible via the admin global variable, so it is in memory. If we also overwrite admin, then it can be released.

Objects that are interrelated

Now for a more complex example, the family object:

function marry (man, woman) {
  woman.husban = man;
  man.wife = woman;

  return {
    father: man,
    mother: woman
  }
}

let family = marry({
  name: "John"
}, {
  name: "Ann"
})
Copy the code

The function marry “marries” two objects by providing references to each other and returns a new object containing both objects.

The resulting memory structure:

So far, all objects are accessible.

Now let’s delete two references:

delete family.father;
delete family.mother.husband;
Copy the code

It is not enough to remove just one of these two references, because all objects are still accessible.

But if we delete both, we can see that John no longer has incoming references:

The output reference is irrelevant. Only objects passed in can make objects accessible, so John is now unreachable and will remove all unreachable data from memory.

After garbage collection:

Inaccessible block of data

It is possible that the entire interlinked object becomes inaccessible and removed from memory.

The source object is the same as above. And then:

family = null;
Copy the code

The image in memory becomes:

This example illustrates how important the concept of accessibility is.

Obviously, John and Ann are still linked together and both have incoming references. But that’s not enough.

The “family” object has been disconnected from the root and no longer has a reference to it, so the entire block below becomes unreachable and will be deleted.

Internal algorithm

The basic garbage collection algorithm is called ** “mark-sweep” ** and periodically performs the following “garbage collection” steps:

  • The garbage collector takes the roots and ** “marks” **(remember) them.
  • It then accesses and “flags” all references from them.
  • It then accesses the tagged objects and marks their references. All objects accessed are remembered so that the same object is never accessed twice in the future.
  • And so on, until there are unaccessed references that can be accessed from the root.
  • All objects except those marked are deleted.

For example, the object structure is as follows:

We can clearly see an “unreachable block” on the right. Now let’s see how the ** “mark and clear” ** garbage collector handles it.

The first step is to mark the root

Then mark their references

And a quote from posterity:

Now unreachable objects in the process are considered unreachable and will be removed:

This is how garbage collection works. The JavaScript engine applies a number of optimizations to make it run faster without affecting execution.

Some optimizations:

  • Generational collection – Objects are divided into two groups: “New objects” and “old objects”. Many objects appear, do their work and close quickly, and they will soon be cleaned up. Those who lived long enough became “old” and were rarely examined.

  • Incremental collection – If there are many objects and we try to traverse and mark the entire set of objects at once, it may take some time and there will be some delay in execution. Therefore, the engine tries to split the garbage collection into multiple parts. Then, each part is executed separately. This requires extra markers to keep track of changes, so there are lots of tiny delays, not big ones.

  • Idle time collection – The garbage collector runs only when the CPU is idle to reduce possible impact on execution.

How to answer an interview

1) What is garbage

In general, objects that are not referenced are garbage and should be removed, with the exception that if several object references form a ring that refers to each other, but the root can’t access them, those objects are also garbage and should be removed.

2) How to check garbage

One algorithm is the mark-erase algorithm, and you can see the different algorithms here.

More in-depth explanation newhtml.net/v8-garbage-…

Another awesome answer is to read my blog, of course, to summarize their own blog.

Your likes are my motivation to keep sharing good things.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.