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

This article will explain in detail the example analysis of garbage collection mechanism in browsers. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Garbage collection mechanism of browsers

Garbage collection is an automatic memory management mechanism. When dynamic memory on your computer is no longer needed, it should be freed.

It should be noted that automatic means that the browser can automatically help us collect memory garbage, but it does not mean that we do not have to worry about memory management. If we do not operate properly, there will still be a memory overflow in JavaScript, causing the system to crash.

Since strings, arrays, objects, and so on do not have a fixed size, they need to be dynamically allocated when their size is known. Every time a JavaScript program creates a string, array, or object, the interpreter must allocate memory to store that entity.

The JavaScript interpreter can detect when a program is no longer using an object, and when it determines that the object is useless, it knows that the object is no longer needed and can free up the memory it occupies.

There are two methods of garbage collection commonly used by browsers: tag removal and reference counting.

Mark clear

This is the most commonly used garbage collection method in JavaScript.

Since 2012, all modern browsers have used the garbage collection method of tag removal, except for the reference counting method used in the earlier version of IE.

So what is mark removal?

There is a global object in JavaScript. Periodically, the garbage collector will start with this global object, find all the objects referenced from this global object, and then find the objects referenced by these objects. For these active object tags, this is the marking phase. The clear phase is to know the objects that are not marked.

One problem with tag cleanup is that after cleanup, the memory space is discontiguous, that is, memory fragmentation occurs. If a large contiguous memory space is needed later, it will not be able to meet the requirements. The tagging method can solve this problem effectively.

In the process of marking, the concept is introduced: tricolor labeling, tricolor is:

White: objects that are not marked, that is, unreachable objects (objects that are not scanned), can be recycled

Gray: an object that has been marked (reachable), but the object has not been scanned and cannot be recycled

Black: has been scanned (reachable object) and cannot be recycled

Tag finishing:

The marking phase is no different from tag cleanup, except that after the tag is finished, the tag collation moves the surviving objects to one side of memory, and finally cleans up the boundary memory.

Reference count

The meaning of reference counting is to track the number of times each value is referenced. When a variable An is assigned, the reference number of this value is 1, and when variable An is re-assigned, the reference number of the previous value is subtracted by 1. When the number of references becomes 0, there is no way to access the value, so you can clear the memory occupied by this value.

Most browsers have abandoned this recycling method.

Memory leak

To avoid memory leaks, once the data is no longer in use, it is best to release its reference by setting its value to null. This method is called contact reference.

What conditions can cause memory leaks? How to avoid it?

Take Vue as an example, there are usually these situations:

Monitoring is not unbound in window/body and other events.

Events bound to EventBus are not unbound

There is no unwatch after the $store,watch of Vuex.

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

Solution: destroy in time in beforeDestroy

Event addEventListener, removeEventListener in the DOM/BOM object is bound.

Observer mode $on,$off processing.

If a timer is used in the component, the processing should be destroyed.

If a third-party library is used in the mounted/created hook, the corresponding initialization is destroyed.

Use weak references weakMap, weakSet.

When is the memory of different types of variables released in the browser?

Reference type

After there is no reference, it is automatically recycled through V8.

Basic type

If you are in the case of a closure, it will not be reclaimed by V8 until the closure has no reference.

In the case of non-closure, it is reclaimed when waiting for the new generation switch of V8.

This is the end of the article on "sample analysis of garbage collection mechanism in browsers". I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

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.