前端性能優化

在工作學習中積累記錄一些優化的方法

一.代碼層面

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...的優化，并且恭喜我們也學到了一種設計模式：政策模式