先了解一下 堆栈中的JS执行过程

1. 减少判断层级

// 没有优化
function doSomething(part, chapter) {
    const parts = ['ES2016', '工程化', 'Vue', 'React', 'Node']
    if (part) {
        if (parts.includes(part)) {
            console.log('属于当前课程')
            if (chapter > 5) {
                console.log('您需要提供 VIP 身份')
            }
        } 
    } else {
        console.log('请确认模块信息')
    }
}
doSomething('ES2016', 6)

// 优化后
function doSomething(part, chapter) {
    const parts = ['ES2016', '工程化', 'Vue', 'React', 'Node']
    
    if (!part) {
        console.log('请确认模块信息')
        return
    }
    if (!parts.includes(part)) return
    console.log('属于当前课程')
    if (chapter > 5) {
        console.log('您需要提供 VIP 身份')
    }
}
doSomething('ES2016', 6)

2. 减少作用域链查找层级

// 优化前
var name = "zce"
function foo() {
    name = "zce666"
    function baz() {
        var age = 20
        console.log(age)
        console.log(name)
    }
    baz()
}
foo()

// 优化后
var name = "zce"
function foo() {
    // 在这里name使用了var声明
    var name = "zce666"
    function baz() {
        var age = 20
        console.log(age)
        console.log(name)
    }
    baz()
}
foo()

3. 减少数据读取次数

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

// 相当于空间换时间
// 优化前
function hasEle(ele, cls) {
    return ele.className == cls
}

// 优化后
function hasEle(ele, cls) {
    var clsname = ele.className
    return clsname == cls
}
hasEle(document.getElementById('skip'), 'skip')

4. 字面量与构造式

// 优化前
let test = () => {
    let obj = new Object()
    obj.name = 'zce'
    obj.age = 38
    obj.slogan = '我为前端而活'
    return obj
}
console.log(test())



// 优化后
let test = () => {
    let obj = {
        name: 'zce'，
        age: 38,
        slogan: '我为前端而活'
    }
    return obj
}
console.log(test())

5. 减少循环体活动

for (var i = 0, len = arr.length; i < len; i++)

6. 减少声明及语句数

<div id="box" style="width: 100px; height: 100px;"></div>

var oBox = document.getElementById('box')

// 优化前
var test = (ele) => {
    let w = ele.offsetWidth
    let h = ele.offsetHeight
    return w * h
}

// 优化后
var test = (ele) => {
    return ele.offsetWidth * ele.offsetHeight
}

// -------------------------
// 优化前
var test = () => {
    var name = 'zce'
    var age = 38
    var slogan = '我为前端而活'
    return name + age + slogan
}

// 优化后
var test = () => {
    var name = 'zce',
        age = 38,
        slogan = '我为前端而活'
    return name + age + slogan
}

7. 采用事件委托

<ul id="ul">
    <li>ZCE</li>
    <li>28</li>
    <li>我为前端而活</li>
</ul>

var oUl = document.getElementById('ul')
oUl.addeventListener('click', showTxt, true)
function showTxt(e) {
    var target = e.target
    if (target.nodeName.toLowerCase() == 'li') {
        console.log(target.innerHTML)
    }
}