js代码性能优化分析

减少判断层级

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);

提前return的方式减少嵌套层级

减少作用域链查找层级

var name = 'abc';
function foo () {
   var name = 'abc123' //name在当前作用域中,减少层级查找
    function baz () {
        var age = 38;
        console.log(age);
        console.log(name)
    }
    baz();
}
foo();

每当一个函数执行时都会产生一个执行上下文

当函数执行完之后，执行上下文被销毁掉（闭包除外）

多次调用函数时候，就会创建多个上下文
这些上下文都是有自己的作用域的
作用域之间又可以通过作用域链连接

函数执行过程中，每遇到一个变量，就先搜索自己的作用域
如果有，就用自己的，没有的话就沿着作用域链往上查找，
一直到父层

所以变量离作用域近，执行效率更高一些
如果从时间上看，就快
如果从空间上看，定义多变量会多消耗空间

减少数据读取次数

var oBox = document.getElementById('skip');
   // function hasEle(ele, cls){
    //     return ele.className === cls
    // }
    //优化，缓存对象的值
    function hasEle(ele, cls){
        var clsName = ele.className;
        return clsName === cls
    }
    console.log(hasEle(oBox, 'skip')); //true

访问字面量，局部变量 速度快，直接存放栈区中

数组，对象， 访问数组和对象成员，相对慢些，因为要根据引用关系先找到在堆内存中的位置，对象的属性访问还要考虑原型链上的查找，应该减少对象查找次数和属性的嵌套层级

提前对数据缓存，方便后面使用

减少循环体中的活动

var test = () => {
    var i
    var arr = ['joy', 20, 'test']
    for(i = 0; i < arr.length; i++){
        console.log(arr[i])
    }
}

//将经常使用又不发生改变的量缓存起来
var test1 = () => {
    var i
    var arr = ['joy', 20, 'test']
    var len = arr.length
    for(i = 0; i < len; i++){
        console.log(arr[i])
    }
}

//while循环优化
//代码量减少，递减，到0自动结束
var test2 = () => {
    var arr = ['joy', 20, 'test']
    var len = arr.length
    while(len--){
        console.log(arr[len])
    }
}
test()
test1()
test2()