JavaScript performance optimization (code optimization in memory management)

Article description: This article is the notes and experience of the front-end training camp of Regao. If there is something wrong, I hope you can point out and teach, thank you!

1. Avoid the closure trap

Closure characteristics

Outside has a reference to inside
Access data in the "inner" scope in the "outer" scope

function foo(){
    var name = 'lg'
    function fn(){
        console.log(name)
    }
    return fn
}

var a = foo()
a()

Closures are a powerful syntax
Improper use of closures is prone to memory leaks. Once the memory leaks, if you don’t care, wait for it to leak continuously, which will affect the performance of the entire program.
Don't close for the sake of closure

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
    <title>闭包陷阱</title> 
</head> 
<body>
    <button id="btn">
        Add
    </button>
<script type="text/javascript">
//    function foo(){ //由于闭包语法的存在，里面有些变量是无法回收的，在这种情况下，这种操作很多的时候，内存会越来越多
//        var el = document.getElementById('Btn')
//        el.onclick = function(){
//            console.log(el.id)
//        }
//    }

//    foo()

   function foo(){
       var el = document.getElementById('Btn')
       el.onclick = function(){
           console.log(el.id)
       }
       el = null//若是将DOM中button的节点删除之后，DOM中对document的引用消失了，把el置空之后，该函数对document的引用也消失了，这样的空间就会得以释放
   }

   foo()
</script> 
</body> 
</html>

Second, avoid the use of attribute access methods

Object Orientation in JavaScript

JS does not need attribute access methods, all attributes are externally visible
Using attribute access methods will only add a layer of redefinition, without access control

function Person(){
    this.name = 'icoder'
    this.age = 18
    this.getAge = function(){
        return this.age
    }
}

const p1 = new Person()
const a = p1.getAge()//定义了一个成员属性的访问函数，直接调用函数访问


function Person(){
    this.name = 'icoder'
    this.age = 18
}
const p2 = new Person()
const b = p2.age//直接对属性名称进行访问

Three, For loop optimization

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
    <title>For循环优化</title> 
</head> 
<body>
    <p class="btn">add</p>
    <p class="btn">add</p>
    <p class="btn">add</p>
    <p class="btn">add</p>
    <p class="btn">add</p>
    <p class="btn">add</p>
    <p class="btn">add</p>
    <p class="btn">add</p>
    <p class="btn">add</p>
    <p class="btn">add</p>
<script type="text/javascript">
var aBtns = document.getElementsByClassName('btn')

for(var i = 0;i < aBtns.length;i++){
    console.log(i);
}

for(var i = 0,len = aBtns.length;i < aBtns.length;i++){//不需要像上面代码一样，每次都需要重新获取长度
    console.log(i)
}
</script> 
</body> 
</html>

Fourth, choose the best cycle method

When traversing the array, forEach has the best performance, followed by for, and finally for in

var arrList = new Array(1,2,3,4,5)
//三种不同的方式对同一数组进行遍历
arrList.forEach(function(item){
    console.log(item)
})

for(var i = arrList.length;i;i--){
    console.log(arrList[i])
}

for(var i in arrList){
    console.log(arrList[i])
}

//对数组进行遍历时，性能最好的forEach，其次是for，最后是for in

Five, document fragmentation optimization node addition

The adding operation of the node will inevitably have reflow and redraw, which consumes a lot of performance:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
    <title>优化节点添加</title> 
</head> 
<body>
    <button id="btn">
        Add
    </button>
<script type="text/javascript">
    for(var i = 0;i < 10;i++){
        var oP = document.createElement('p')
        oP.innerHTML = i
        document.body.appendChild(oP)
    }
//第二种优化的方式创建节点
    const fragEle = document.createDocumentFragment()//定义一个文档碎片的容器
    for(var i = 0;i < 10;i++){
        var oP = document.createElement('p')
        oP.innerHTML = i
        fragEle.body.appendChild(oP)
    }

    document.body.appendChild(fragEle)
</script> 
</body> 
</html>

Use document fragments to create nodes, which is more efficient

Six, clone optimized node operation

Code demo:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
    <title>克隆优化节点操作</title> 
</head> 
<body>
    <p id="box1">old</p>
<script type="text/javascript">
    for(var i =0;i <3;i++){
        var oP = document.createElement('p')
        op.innerHTML = i
        document.body.appendChild(oP)
    }
//克隆节点
    var oldP = document.getElementById('box1')
    for(var i =0; i < 3;i++){
        var newP = oldP.cloneNode(false)// 通过节点克隆的方法
        newP.innderHTML = i;
        document.body.appendChild(newP)
    }
</script> 
</body> 
</html>

Seven, directly replace Object operation

When we define objects or arrays, we can use new to get the corresponding data, but we can also directly use literals


var a = [1,2,3]

var a1 = new Array(3)
a1[0] = 1
a1[1] = 2
a1[2] = 3