《前端演算法系列》如何讓前端程式碼速度提高60倍

今天的問題從排序演算法入手，來講解如何根據業務需求，結合金典的演算法，來實現js高效能開發。

情景

老闆讓小明給公司的20000+條資料排個序，但是由於排序的操作會頻繁發生，如果操作執行的時間很慢，則會嚴重降低使用者體驗，聽到這條噩耗後小明開始了程式碼。

1.毫無違和感的排序演算法 小明根據需求，思考了一會，寫下了如下演算法：

/**
 * max排序
 * @param {*} arr 
 * 耗時：760ms
 */
 function maxSort(arr) {
     let result = [...arr];
     for(let i=0,len=result.length; i< len; i++) {
        let minV = Math.min(...result.slice(i))
        let pos = result.indexOf(minV,i)
        result.splice(pos, 1)
        result.unshift(minV)
     }
     return result.reverse()
 }
複製程式碼

自信的小明陶醉在自己的演算法中，準備測試一下效能，

/*
 * @Author: Mr Jiang.Xu 
 * @Date: 2019-06-11 10:25:23 
 * @Last Modified by: Mr Jiang.Xu
 * @Last Modified time: 2019-06-13 21:03:59
 * @desc 測試函式執行的時間
 */

const testArr = require('./testArr');
module.exports = async function getFnRunTime(fn) {
    let len = testArr.length;
    let startTime = Date.now(), endTime;
    let result = await fn(testArr);
    endTime = Date.now();
    console.log(result);
    console.log(`total time:${endTime-startTime}ms`,
                'test array\'length:' + len, 
                result.length
    );
}
複製程式碼

執行該測試函式後，耗時760ms，小明覺得還不錯，放到專案中後，第一次操作還好，連續操作了幾次後，頁面明顯示卡頓。。。（求此時小明心裡的陰影面積）

2.氣泡排序

小明不甘心，在網上查詢相關資料後，寫下了如下氣泡排序程式碼：

/**
  * 置換函式
  * @param {源陣列} arr 
  * @param {原陣列的A項} indexA 
  * @param {原陣列的B項} indexB 
  */
 function swap(arr, indexA, indexB) {
    [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]];
 }

/**
 * 原始氣泡排序
 * @param {陣列} arr 
 * 耗時：377ms
 */
 function bubbleSort1(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      for (let j = 0; j < i; j++) {
        if (arr[j] > arr[j + 1]) {
          swap(arr, j, j + 1);
        }
      }
    }
  
    return arr;
  }
複製程式碼

測試後耗時377ms，完美，小明放到專案中測試，頻繁排序還是會有點卡頓，能不能再優化一下呢？ 思考許久之後，小明完善了氣泡排序：

/**
 * 利用索引優化後的氣泡排序
 * @param {陣列} arr 
 * 耗時：350ms
 */ 
function bubbleSort2(arr) {
    let i = arr.length - 1;

    while (i > 0) {
        let pos = 0;

        for (let j = 0; j < i; j++) {
        if (arr[j] > arr[j + 1]) {
            pos = j;
            swap(arr, j, j + 1);
        }
        }
        i = pos;
    }

    return arr;
}
複製程式碼

根據快取索引位置來提高排序效能，時間節約了20ms，但收益很小。小明開始和自己過不去了，在維基百科上繼續查詢，最後發現了一個方法：

/**
 * 在每趟排序中進行正向和反向兩遍冒泡 ,
 * 一次可以得到兩個最終值（最大和最小）, 
 * 從而使外排序趟數大概減少了一半
 * @param {*} arr 
 * 耗時：312ms
 */
function bubbleSort3(arr) {
    let start = 0;
    let end = arr.length - 1;
  
    while (start < end) {
      let endPos = 0;
      let startPos = 0;
      for (let i = start; i < end; i++) {
        if (arr[i] > arr[i + 1]) {
            endPos = i;
            swap(arr, i, i + 1);
        }
      }
      end = endPos;
      for (let i = end; i > start; i--) {
        if (arr[i - 1] > arr[i]) {
          startPos = i;  
          swap(arr, i - 1, i);
        }
      }
      start = startPos;
    }
  
    return arr;
  }
複製程式碼

通過在每趟排序中進行正向和反向兩遍冒泡，小明把時間又降低了38ms，不錯～

再次推薦大家有事多上上維基百科，總有一款適合你。 ####3.插入排序 在收入小規模勝利後，小明膨脹了，狂言要把排序時間降低到100ms一下，於是後又安利瞭如下演算法：

/**
   * 插入排序 -- 基礎版
   * @param {*} arr 
   * 耗時：897ms
   */
  function insertionSort(arr) {
    for (let i = 1, len = arr.length; i < len; i++) {
      const temp = arr[i];
      let preIndex = i - 1;
  
      while (arr[preIndex] > temp) {
        arr[preIndex + 1] = arr[preIndex];
        preIndex -= 1;
      }
      arr[preIndex + 1] = temp;
    }
  
    return arr;
  }
複製程式碼

897ms,小明留下了沒技術的淚水。

最後小明拿出了這個看家本領，查到了二分搜尋，最後改造後程式碼入下：

/**
   * 改造二分查詢,查詢小於value且離value最近的值的索引
   * @param {*} arr 
   * @param {*} maxIndex 
   * @param {*} value 
   */
  function binarySearch1(arr, maxIndex, value) {
    let min = 0;
    let max = maxIndex;
    
    while (min <= max) {
      const m = Math.floor((min + max) / 2);
  
      if (arr[m] <= value) {
        min = m + 1;
      } else {
        max = m - 1;
      }
    }
  
    return min;
  }

/**
 * 使用二分法來優化插入排序
 * @param {*} arr 
 * 耗時：86ms
 */
function insertionSort1(arr) {
    for (let i = 1, len = arr.length; i < len; i++) {
        const temp = arr[i];
        const insertIndex = binarySearch1(arr, i - 1, arr[i]);

        for (let preIndex = i - 1; preIndex >= insertIndex; preIndex--) {
        arr[preIndex + 1] = arr[preIndex];
        }
        arr[insertIndex] = temp;
    }

    return arr;
}
複製程式碼

完美，只用了86ms！小明激動的站了起來，還拍了下桌子，全然無視觀眾的眼光。

小明已經滿足的不要不要的了，對86ms相當滿意，老闆也對他刮目想看。

4.希爾排序

難道就沒有提升的餘地了麼？進過調查研究表明，是有更優的方案的：

/**
 * 希爾排序
 * 核心：通過動態定義的 gap 來排序，先排序距離較遠的元素，再逐漸遞進
 * @param {*} arr 
 * 耗時：15ms
 */
function shellSort(arr) {
    const len = arr.length;
    let gap = Math.floor(len / 2);
  
    while (gap > 0) {
      // gap距離
      for (let i = gap; i < len; i++) {
        const temp = arr[i];
        let preIndex = i - gap;
  
        while (arr[preIndex] > temp) {
          arr[preIndex + gap] = arr[preIndex];
          preIndex -= gap;
        }
        arr[preIndex + gap] = temp;
      }
      gap = Math.floor(gap / 2);
    }
  
    return arr;
  }
複製程式碼

耗時15ms，膜拜。 ####5.歸併排序

/**
 * 歸併排序
 * @param {*} arr 
 * 耗時 30ms
 */
function concatSort(arr) {
  const len = arr.length;

  if (len < 2) { return arr; }

  const mid = Math.floor(len / 2);
  const left = arr.slice(0, mid);
  const right = arr.slice(mid);

  return concat(concatSort(left), concatSort(right));
}

function concat(left, right) {
  const result = [];

  while (left.length > 0 && right.length > 0) {
    result.push(left[0] <= right[0] ? left.shift() : right.shift());
  }

  return result.concat(left, right);
}
複製程式碼

耗時30ms，也想當優秀。還有沒有更快的方法呢？答案是有的，但是會涉及到比較高僧的數學知識，放棄吧，孩子。。。

接下來會推出更多優秀的演算法，敬請期待哦～ 最後，歡迎加入前端技術群，一起探討前端的魅力

###更多推薦

• 《前端演算法系列》陣列去重

• vue高階進階系列——用typescript玩轉vue和vuex

• 前端三年，談談最值得讀的5本書籍

• 用webpack4.0擼一個單頁/多頁尾手架工具(支援jquery,react,vue,typescript)