前端js代码优化-CFANZ编程社区

jsbench

优化方式

慎用全局变量

全局变量位于全局作用域，在局部作用域中需要逐层向上查找
全局变量在全局执行上下文中，会一直存在于作用域栈，直到程序结束才能被GC算法回收
局部执行上下文中出现同名变量，则会污染全局变量

缓存全局变量

在原型对象上添加附加方法

避开闭包陷阱

<body>
    <button id="btn" class="btn">click</button>
    <script>
        function click(){
            let btn = document.getElementById("btn")
            btn.onclick = function(){
                console.log(btn)
            }
        }
        click()
    </script>
</body>

修改为：

<body>
    <button id="btn" class="btn">click</button>
    <script>
        function click(){
            let btn = document.getElementById("btn")
            btn.onclick = function(){
                console.log(btn)
               
            }
             btn = null
        }
        click()
    </script>
</body>

for循环优化

几种循环的时间花销比较

文档碎片优化节点添加

 //before
        for(let i = 0;i<5;++i){
            let span = document.createElement("span")
            span.innerHTML = i
            document.body.appendChild(span)
        }
        //after
        let fag = document.createDocumentFragment()
        for(let i = 0;i<5;++i){
            let span = document.createElement("span")
            span.innerHTML = i;
            fag.appendChild(span)
        }
        document.body.appendChild(fag)

克隆优化节点

 <span id="sp">sx</span>
    <script>
        //before
        for(let i = 0;i<5;++i){
            let span = document.createElement("span")
            span.innerHTML = i
            document.body.appendChild(span)
        }
        //after
        let sp = document.getElementById("sp")
        console.log(sp)
        for (let index = 0; index < 5; index++) {
            let span = sp.cloneNode(false) 
            span.innerHTML = index
            document.body.appendChild(span)         
        }
    </script>

直接量替换new object操作

//before 
let arr = new Array()
arr[0] = 0;
arr[1] = 1;
arr[2] = 2;

//after

let arr = [1,2,3]

减少层级判断

//判断是否是18岁的小明
//before

function judgeMing(name,age){
    if(name==='小明'){
        if(age === 18){
            console.log('正确')
        }
        else {
            console.log('错误')
        }
    }
    else {
        console.log('错误')
    }
}

//after

function judgeMing(name,age){
    if(name!=="小明"|| age!==18)
        console.log('错误')
    else {
        console.log('正确')
    }
}

减少作用域链查找层级

//before

let name = 'sx'
function foo(){
    let getName = ()=>{
        console.log(name)
    }
}

//after

let name = 'sx'
function foo(){
    let name = 'sx2'
    let getName = ()=>{
        console.log(name)
    }
}

采用事件绑定

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>

    </ul>
    <script>
        function show(){
            console.log('sx')
        }
        //before 
        let item = document.getElementsByTagName("li")
        for(let i of item){
            i.onclick = show
        }

        //after
        let ul = document.getElementsByTagName("ul")
        ul[0].addEventListener('click',show,true)
    </script>