高性能JavaScript閱讀簡記（三）

4、Aligorithms and Flow Control 算法和流程控制

一、Loops 循環

• a、避免使用for/in循環
  在JavaScript標準中，有四種類型循環。for、for/in、while、do/while，其中惟一一個性能比其餘明顯慢的是for/in。對於for/in循環的使用場景，更多的是針對不肯定內部結構的對象的循環。for/in會枚舉對象的命名屬性，只有徹底遍歷對象的全部屬性以後包括實例屬性和從原型鏈繼承的屬性，循環纔會返回。正由於for/in循環須要搜索實例或者原型的屬性，因此for/in的性能要差不少，所以咱們須要儘可能避免使用for/in循環，對於那些已知屬性列表的對象，更須要避免使用for/in。

• b、Decreasing the work per iteration 減小迭代的工做量
  一個標準的for循環組成：

(初始化體; 前側條件/控制條件; 後執行體){
    循環體;
}

可能對於單次循環操做，咱們所作的性能優化看起來沒什麼用，可是對於屢次循環，這些性能優化加起來是很明顯的。

for (var i = 0; i < items.length; i++){
    eventHandler(items[i]);
}

對於上面這樣一個經典的for循環，它的單次操做中，須要作這些工做：

①在控制條件中讀一次屬性（items.length）
②在控制條件中進行一次比較（i < items.length）
③比較操做，判斷條件控制體的結果是否爲true（i < items.length == true）
④一次自加操做（i++）
⑤一次數組查找（items[i]）
⑥一次函數調用（eventHandler(items[i]);）

你們都知道的一個優化就是在第一步，每一次的循環中都會查詢一次items.length，這個操做會首先查找items，而後計算長度，一方面，查找items時的性能開銷是浪費的，另外一方面，訪問一個局部變量或者是字面量，顯然更快。所以在這裏，咱們能夠經過一個變量緩存items.length，對於較長的數組，能夠節約25%的總循環時間（ie中可達到50%）。
另外一種提高循環體性能的方法是改變循環的順序，這經常使用於數組元素的處理順序和任務無關的狀況，從最後一個元素開始，直處處理完第一個元素。

for(var i = items.length; i--){
    eventHandler(items[i]);
}

在一個for循環中，能夠省略初始化體和後執行體，這裏省略了後執行體，也就是當i -- 以後， i！= flase，則執行eventHandler(items[i]);這裏的i是i--以後的值。這裏優化地方是將咱們前面說的二、3優化了成一步，i是不是true；若是是則執行i--，也就是i = i - 1;
進行這兩方面的優化後，循環體的性能會獲得顯著提高。

• c、Decreasing the number of iterations 減小迭代次數
  除了在設計循環以前周密考慮，使用最優的循環模式，減小迭代次數，另外一個減小迭代次數的有名的方法是達夫設備（Duff's Device），達夫設備最先出現於C中，他的設計理念，是將整個循環每8個一份分紅o份並取餘數p，第一次循環執行n次循環體，而後執行m次循環，每次循環中執行8次循環體中的操做，這樣本來是m * 8 + n 次循環就變成了m + 1次循環。這對於那些循環體耗時很短的循環來說，下降了在判斷條件上浪費的時間，從而提高性能。移植到javascript中的一個典型的達夫設備的例子：

var m = [1,2,3,...];        //爲一個很長很長的數組。
var o = Math.floor(m.length/8);
var p = m.length % 8 ;
var i = 0;
do{
switch(p){
    case 0 : console.log(m[i++]);
    case 7 : console.log(m[i++]);
    case 6 : console.log(m[i++]);
    case 5 : console.log(m[i++]);
    case 4 : console.log(m[i++]);
    case 3 : console.log(m[i++]);
    case 2 : console.log(m[i++]);
    case 1 : console.log(m[i++]);
}
p = 0;
}while(--o);

書上的達夫設備的代碼如上，可是在我看來這段代碼是有問題的，除非m也就是初始循環次數是8的整倍數，不然循環會少執行一輪，也就是8次。不過沒有找到這本書的勘誤，自行完善了一下這裏的代碼：

var m = [1,2,3,...];
var o = Math.floor(m.length/8);
var p = m.length % 8 ;
p === 0 ? '' : o++;
var i = 0;
do{
switch(p){
    case 0 : console.log(m[i++]);
    case 7 : console.log(m[i++]);
    case 6 : console.log(m[i++]);
    case 5 : console.log(m[i++]);
    case 4 : console.log(m[i++]);
    case 3 : console.log(m[i++]);
    case 2 : console.log(m[i++]);
    case 1 : console.log(m[i++]);
}
p = 0;
}while(--o);

理解上面的代碼須要首先明確一點，不論是在C中仍是JavaScript中，若是switch語句中沒有break，則會在匹配到第一個case並執行後執行下一個case中的操做，無論下一個case是否匹配，直到遇到break或者結束的大括號，固然，return也能夠。
上面switch版本的達夫設備的改進版是去掉了switch而變得更快，書中的代碼是個死循環（難道由於我看的是pdf版本的有誤，原書是對的嗎），就不貼出來禍害人了，我這梳理後重寫的代碼以下：

var m = [1,2,3,...];
var p = m.length % 8 ;
while(p){
    console.log(m[--p]);
}
var i = m.length;
var o = Math.floor(m.length/8);
while(o--){
    console.log(m[--i]);
    console.log(m[--i]);
    console.log(m[--i]);
    console.log(m[--i]);
    console.log(m[--i]);
    console.log(m[--i]);
    console.log(m[--i]);
    console.log(m[--i]);
}

這個版本中的達夫設備將主循環和餘數處理的部分分開，並將原數組進行倒序處理。代碼很易懂就很少說。
在實測中，達夫設備的性能並不比傳統的for循環快多少，甚至廣泛會慢那麼一點點（FireFox無論處理什麼樣的循環，都比Chrome慢三倍，這個必須吐槽一下），這是由於在現代瀏覽器中，隨着設備性能的提高，瀏覽器的實現對循環的算法優化的愈來愈好，在瀏覽器內部處理循環時也會採用本身獨特的算法提高循環的性能，編程時達夫設備帶來的性能提高已經慢慢的變得不足爲道；加上達夫設備這種寫法，對於代碼可讀性很不友好，所以如今已經慢慢愈來愈少會有人採用這樣的方式來作性能優化。可是達夫設備最初這種詭異的寫法和思路，仍是驚豔了不少人的，值得咱們思考。

二、Function-Based Iteration 基於函數的迭代

在多數現代瀏覽器的實現中，forEach可做爲一個原生的方法去使用，此方法至關於遍歷數組的全部成員，並在每一個成員上執行一個函數，每一個成員上執行的函數做爲forEach()的參數傳進去。這種狀況下，每個數組成員都被掛載了一個函數，在執行迭代時調用，這種基於函數的迭代比基於循環的迭代要慢不少，在實測中，會慢20%左右。複雜的函數處理的時候，性能上的問題會更突出。

三、Conditionals 條件表達式

• a、if-else Versus switch if-else與switch比較
  你們約定俗稱的一點是，在條件數量較少時傾向於使用if-else，在條件數量較大時使用switch，無論從代碼可讀性考慮，仍是從性能方面考慮，這種作法都是正確的。儘管在實際上，較少條件數量時，使用switch多數狀況下也比if-else快，但也只是快的微不足道，所以這種約定俗稱的使用方式是沒有問題的。

• b、Optimzing if-else 優化if-else
  if-else決定了JavaScript運行流的走向，讓JavaScript運行流盡快找到運行條件並運行顯然會提升函數的執行效率，所以在有多個條件數量時，讓最可能出現的條件排在前面。例如，用js設置中獎機率，一等獎機率10%，二等獎機率20%；三等獎機率30%；不中獎機率40%；更多人的習慣寫法是：

var result = Math.random() * 10;
if(result <= 1){
    //一等獎
}else if(result > 1 && result <= 3){
    //二等獎
}else if(result > 3 && result <= 6){
    //三等獎
}else{
    //不中獎
}

實際上，最可能出現的是不中獎，可是每次在判斷爲不中獎以前須要先進行前三次判斷，此時能夠作的優化就是將上述的寫法反過來：

var result = Math.random() * 10;
if(result <= 4){
    //不中獎
}else if(result > 4 && result <= 7){
    //三等獎
}else if(result > 7 && result <= 9){
    //二等獎
}else{
    //一等獎
}

固然，較真性能的話，這裏用switch更好，不過咱們考慮的是優化if-else的性能。
另一種減小條件判斷的長度的辦法是將並列的if-else判斷，組織成嵌套的if-else減小平均的條件判斷長度，例以下面的例子：

var result = Math.floor(Math.random() * 10);
if(result === 0){
    return 0;
}else if(result === 1){
    return 1;
}else if(result === 2){
    return 2;
}else if(result === 3){
    return 3;
}else if(result === 4){
    return 4;
}else if(result === 5){
    return 5;
}else if(result === 6){
    return 6;
}else if(result === 7){
    return 7;
}else if(result === 8){
    return 8;
}else if(result === 9){
    return 9;
}

這時候計算條件體的最大數目是9，咱們能夠經過嵌套判斷的辦法減小計算判斷體的數目：

if(result < 6){
    if(result < 3){
        if(result === 0){
            return 0;
        }else if(result === 1){
            return 1;
        }else{
            return 2;
        }
    }else{
        if(result === 3){
            return 3;
        }else if(result === 4){
            return 4;
        }else{
            return 5;
        }
    }
}else{
    if(result < 8){
        if(result === 6){
            return 6;
        }else{
            return 7;
        }
    }else{
        if(result === 8){
            return 8;
        }else{
            return 9;
        }
    }
}

看起來代碼是多了，可是最大的條件判斷數變成了4，必定程度上提高了性能。固然，這種狀況下，通常會使用swtich處理的。

• c、Lookup Tables 查表法
  當有大量的離散值須要測試時，使用if-else或者switch不論在可讀性上和性能上都不該該去選擇，好比下面的狀況：

var array = [0,1,2,3,4,5,6,7...];
switch(result){
    case 0: return array[0];
    case 1: return array[1];
    case 2: return array[2];
    case 3: return array[3];
    case 4: return array[4];
    case 5: return array[5];
    case 6: return array[6];
    ...
}

當數組有數十個上百個數據時，switch語句會是一段很龐大的代碼。這時候可使用查表法：

var array = [0,1,2,3,4,5,6,7...];
return array[result];

查表法通常適用於數據量稍大的場合，在實際編程中，仍是常常會用到這種方法的。

• d、Recursion 遞歸
  某些場合，好比說階乘函數，遞歸調用無疑是最優的實現方式：

function calc(n){
    if(n === 0){
        return 1;
    }else{
        return n * calc(n-1);
    }
}

• e、Memoization 製表
  製表的原理是經過緩存已經運行的計算結果，避免後續的重複計算從而提高性能。也經常使用於遞歸運算中，例如上面的階乘函數的調用：

var a = calc(10);
var b = calc(9);
var c = calc(8);

在calc(10)被調用時，就已經計算過了calc(9)和calc(8)的值，這裏calc(9)就重複計算了兩次，而calc(8)重複計算了三次，咱們能夠經過緩存計算結果的辦法去優化：

function m(n){
    if(!m.c){
        m.c = {
            "0": 1,
            "1": 1
        };
    }
    if(!m.c.hasOwnProperty(n)){
        m.c[n] = n * m(n-1);
    }
    return m.c[n];
}
var e = m(10);
var f = m(9);
var g = m(8);

優化後的函數中，m(9)和m(8)並無再去計算，從而避免了重複計算。

高性能JavaScript閱讀簡記（一）
高性能JavaScript閱讀簡記（二）
高性能JavaScript閱讀簡記（三）