Vue advanced (Yao Lujiu) : JS garbage recycling mechanism

• Memory: composed of read and write units, representing a piece of operable space;
• Management: to operate the application, use and release of a space artificially;
• Memory management: developers actively apply for space, use space, release space;
• Management process: application – Use – Release

Some languages (such as C) need to manually release the memory, but it can be very troublesome. Therefore, many languages, such as JAVA, provide an automatic memory management mechanism called “Garbage Collecation”, and JavaScript also provides Garbage Collecation (GC).

Examples of situations that would be considered garbage in JavaScript are as follows:

• The object is no longer referenced;
• The object can not be asked from the root petition;

The most common garbage collection method used by early browsers is called “reference counting” : the language engine has a “reference table” that holds the number of references to all resources (usually values) in memory. If the number of references to a value is zero, the value is no longer needed, so it can be freed.

const user1 = {age: 11}
const user2 = {age: 22}
const user3 = {age: 33}

const userList = [user1.age, user2.age, user3.age]
Copy the code

User1, user2, and user3 are referenced by the userList, so their reference count is not zero and will not be recycled

function fn() {
    const num1 = 1
    const num2 = 2
}

fn()
Copy the code

After the fn function is executed, num1 and num2 are local variables. After the fn function is executed, their reference count will be zero and all such code will be recycled as “garbage”.

Reference counting algorithms have one big problem: circular references

function objGroup(obj1, obj2) {
    obj1.next = obj2
    obj2.prev = obj1

    return {
        o1: obj1,
        o2: obj2,
    }
}

let obj = objGroup({name: 'obj1'}, {name: 'obj2'})
console.log(obj)
Copy the code

In the example above, obj1 and obj2 refer to each other through their respective attributes, and none of them have a zero reference count so that they are not collected by the garbage collection mechanism, resulting in a waste of memory.

In fact, reference counting algorithm has a relatively big disadvantage, is that we need to set aside a separate space to maintain the reference count of each variable, which for large programs, space overhead is relatively large.

Advantages of reference counting algorithm:

• When the reference count is zero, garbage is immediately collected.
• Minimizing program pauses;

Disadvantages of reference counting algorithm:

• Unable to recycle objects referenced by loop;
• Large space overhead;

In order to solve the problem of memory fragmentation and improve the utilization of memory, a tag collation algorithm is introduced.

Tag cleanup can be seen as an enhancement to tag cleanup. The operation of the tag phase is the same as that of tag clearing.

The cleanup phase performs a cleanup, moving object locations, moving surviving objects to one side, and then cleaning up memory outside end boundaries.

The disadvantage of tag collation is that objects are not immediately recycled when they are moved.

• Using the idea of generation recycling;
• Memory is divided into new generation, old generation;
  
  

Different algorithms are used for different objects:

(1) Cenozoic: The survival time of objects is short. Newborn objects or objects that have been garbage collected only once.

(2) Old generation: the object lives for a long time. Objects that have undergone one or more garbage collections.

The V8 stack is equal to the new generation plus the old generation. And for different operating systems to do the space of the memory limit.

Reasons for limiting memory:

This is more than enough memory for a browser.

According to the GC mechanism of the browser, after continuous testing, if the memory is set a little larger, the GC recovery time will reach the user’s perception, which will cause the perception of the lag.

A new generation of GC still alive needs to be promoted. When an object is copied From the From space To the To space, if more than 25% of the To space is used, the object is promoted directly To the old generation. The reason for the 25% ratio is that when recycled Scavenge is completed, the To space is flipped To the From space To continue the allocation of object memory. If the proportion is too large, subsequent memory allocation will be affected.

Because the Cenozoic generation occupies less space, space – time mechanism is adopted. Old generation area space is relatively large, not suitable for a large number of copy algorithm and mark sorting, so the most commonly used is the mark clearing algorithm, in order to minimize the total pause time.

1. Avoid using global variables

• Global variables are mounted under the window;
• Global variables have at least one reference count;
• Global variables live longer and continue to consume memory;
• In the case of clear data scope, try to use local variables;

2. Reduce the level of judgment

Function doSomething(part, chapter) {const parts = ['ES2016', 'Vue', 'React', 'Node'] if (part) {if (parts.includes(part)) {console.log(' chapter > 5 ') {console.log(' you need to provide VIP status ')}} } else {console.log(' please confirm module info ')}} doSomething('Vue', 6) Chapter) {const parts = ['ES2016', 'Vue', 'React', 'Node'] if (! Part) {console.log(' Please confirm module information ') return} if (! Parts.includes (part)) return console.log(' includes ') if (chapter > 5) {console.log(' includes ')}} doSomething('Vue', 6)Copy the code

3. Reduce data reads For frequently used data, we cache the data.

<div id="skip" class="skip"></div>

<script>
    var oBox = document.getElementById('skip')

    // function hasEle (ele, cls) {
    //     return ele.className === cls
    // }

    function hasEle (ele, cls) {
        const className = ele.className
        return className === cls
    }

    console.log(hasEle(oBox, 'skip'))
</script>
Copy the code

4. Reduce activity in the circulatory body

Var test = () => {var I var arr = ['Hello World ', 25, 'Hello World '] for(I = 0; i < arr.length; I ++) {console.log(arr[I])}} Var test = () => {var I var arr = ['Hello World ', 25, 'Hello World '] var len = arr. Length for(I = 0; i < len; i++) { console.log(arr[i]) } }Copy the code

5. Event binding optimization

<ul class="ul"> <li>Hello World! </li> <li>25</li> <li> Robe with child < / li > < / ul > < script > var list = document. QuerySelectorAll (' li ') function showTxt (ev) { Console. log(ev.target.innerhtml)} for (item of list) {item.onclick = showTxt} function showTxt(ev) {var target = ev.target if (target.nodeName.toLowerCase() === 'li') { console.log(ev.target.innerHTML) } } var ul = document.querySelector('.ul') ul.addEventListener('click', showTxt) </script>Copy the code

6. Avoid closure traps

<button class=" BTN "> click </button> <script> function foo() {let el = document.querySelector('.btn') el.onclick = Function () {console.log(el.classname)}} foo() function foo1() {let el = document.querySelector('.btn') El.onclick = function() {console.log(el.classname)} el = null // Set el to null to prevent references in closures from being recycled} foo1() </script>Copy the code