前端性能优化

在工作学习中积累记录一些优化的方法

一.代码层面

1.循环

①有一个等差数列求和

我们可能优先会想到for循环，如下：

let arr = [1, 2, 3, ..., 100];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
    sum += arr[i]
}

console.log(sum);

上面有两种方式可以优化一下，比如arr.length，可以提前声明一下，因为每次求长度的动作计算机还是回去算一下，我们这样：let i = 0，len = arr.length;i < len; i++，这样不会再重复计算；

还有想一下我们学过的求等差数列的公式，（首项 + 末项）* 项数 / 2，使用一个很简单的算法就可以完成：

let arr = [1, 2, 3, ..., 100];
let len = arr.length;
funtion getSum = (arr) => {
    sum = (arr[0] + arr[len - 1]) * len / 2;
    return sum
}

getSum(arr);

在写for循环的时候想一想是否可以优化

2.if...else...优化

我们平常在写很多if...else的时候可以从代码的角度进行优化：

function getPay (level, basic) {
    if (level === 'p5') {
        return basic*2
    }
    if (level === 'p6') {
        return basic*3
    }
    if (level === 'p7') {
        return basic*4
    }
}

我们平常使用switch case：break；去代替使得写法更加简单，但是这没有使代码优化，这里我们可以引入面向对象的思想还有函数单一性的原则，if..else理解起来我们做了三件事，我们需要把计算薪资这件事变成一件事：声明salary对象，里面的元素就是每个职级：

let obj = {
    p5: (s) => {
        return s*2
    },
    p6: (s) => {
        return s*3
    },
    p7: (s) => {
        return s*4
    },
}

调用的的时候可以把获取的函数改成这样：

function getPay (level, basic) {
    return obj[level](basic)
}

这样就实现了if...else...的优化，并且恭喜我们也学到了一种设计模式：策略模式