JavaScript 的 if 跟 switch 效能

發表於 | 更新於 | 分類於

前言

該使用 if 還是 switch 一直以來都是一個話題，所以這時候就來驗證一下這兩者差異以及效能上的差別。

if vs switch 效能

在網路上當我們 Google 「JavaScript if vs switch」 其實可以看到相當多的文章，其中我挑出幾篇相當不錯的而且可以驗證的部分。

Switch-case vs. if/else

這邊底下就可以線上比較這兩者個差異，當你按下 Run 之後你會發現 switch 很快就會轉換成完成，最後的結果就可以看到每一個的比較，這個測試網站很棒的地方他連雙等號以及三等號都會做比較，所以我們可以透過這個網站來了解每一個的效能

Switch-case vs. if/else

範例程式碼

這邊也有一個網站相當不錯

JavaScript switch Statement

文章底下有一段程式碼可以測試，但我稍微調整了一下，避免複製貼上導致 Lag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var count1 = 0;
var count2 = 0;
var x1 = performance.now();
// Version 1: this switch has a fall-through case.
for (var i = 0; i < 100000; i++) {
    for (var x = 0; x < 3; x++) {
        switch (x) {
            case 0:
                count1++;
            case 1:
                count2++;
                break;
            case 2:
                count1 = 0;
                count2 = 0;
                break;
        }
    }
}
var x2 = performance.now();
// Version 2: this switch has a break on all cases.
for (var i = 0; i < 100000; i++) {
    for (var x = 0; x < 3; x++) {
        switch (x) {
            case 0:
                count1++;
                count2++;
                break;
            case 1:
                count2++;
                break;
            case 2:
                count1 = 0;
                count2 = 0;
                break;
        }
    }
}
var x3 = performance.now();

// Results.
console.log("TIME 1: " + (x2 - x1)); // TIME 1: 276
console.log("TIME 2: " + (x3 - x2)); // TIME 2: 271

額外補充一下 performance.now() 語法。

基本上你會覺得差異不大，因為執行次數較少的關係，但是可以發現 switch 的效能終究比 if 好一點，如果你的電腦夠好的話，你可以試著貼入以下原始範例程式碼(請務必注意，該程式碼會導致 LAG。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var count1 = 0;
var count2 = 0;
var x1 = performance.now();
// Version 1: this switch has a fall-through case.
for (var i = 0; i < 10000000; i++) {
    for (var x = 0; x < 3; x++) {
        switch (x) {
            case 0:
                count1++;
            case 1:
                count2++;
                break;
            case 2:
                count1 = 0;
                count2 = 0;
                break;
        }
    }
}
var x2 = performance.now();
// Version 2: this switch has a break on all cases.
for (var i = 0; i < 10000000; i++) {
    for (var x = 0; x < 3; x++) {
        switch (x) {
            case 0:
                count1++;
                count2++;
                break;
            case 1:
                count2++;
                break;
            case 2:
                count1 = 0;
                count2 = 0;
                break;
        }
    }
}
var x3 = performance.now();

// Results.
console.log("TIME 1: " + (x2 - x1));
console.log("TIME 2: " + (x3 - x2));

總結

基本上一般開發上除非專案太大需要判斷的非常多，否則在效能比較上是不太明顯的，如果 if...else if... 太多的話是可以考慮改用 switch，其主要原因在於 if...else if... 寫太多會有很嚴重的巢狀問題，而搞不清楚花括號 { 在哪裡，此時 switch 就會顯得非常好用。

那麼 switch 的使用時機可以用於不需要比較的判斷，例如

1
2
3
4
5
switch(a) {
  case '1':
    break;
  ...
}

但若要使用比較判斷的話，那麼使用 if...else if... 還是會比較好的，當然這兩者沒有絕對得答案，只是還是重點在於可讀性。

參考文獻

0%