前端 BUG 錄 - 因數組排序形成的卡頓

前端 BUG 錄 - 因 lodashjs debounce 去抖優化形成的 bug
這兩個 BUG 實際上是同一個 BUG，怎麼說呢？兩個都沒錯，錯就錯在同時使用了。

由於我沒處理邊界，致使我會給一個大數組排序，形成了卡頓。而後卡頓形成了節流時間成爲了笑話。

提問

由於這個 BUG 其實有好幾個限定條件纔會觸發，因此我先來提幾個問題

1. 5000 條亂序的數據，排序須要多少時間？ Array.prototype.sort
2. 5000 條有序的數據，排序須要多少時間？ Array.prototype.sort
3. 對於有序數據，什麼樣的算法合適？
4. 對於無序數據，什麼樣的算法合適？
5. Array.prototype.sort 使用的是什麼算法？

這些靈魂拷問，你有答案嗎？

我當前的這個場景是分頁拉取數據，展現的時候要有序。

若是你有答案，那能夠知道，sort 對於個人這個場景不是很適用，插入排序應該是最優的選擇。

Array.prototype.sort 測試

地址：https://www.lilnong.top/static/html/user-session-list-virtual-insertsort-log-2.html

Array.prototype.shuffle = function() {
  let array = this;
  let len = array.length;
  for (let i = len - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}
vm.list.shuffle();

console.time('a')
vm.list.sort((n,m)=>n.id-m.id);
console.timeEnd('a')

console.time('b')
vm.list.sort((n,m)=>n.id-m.id);
console.timeEnd('b')

console.time('c')
vm.list.sort((n,m)=>n.id-m.id);
console.timeEnd('c')

我遇到的問題&解決方案

Array.prototype.sort 代碼有過升級

其實在新的瀏覽器中跑，個人方案也是能過去了，耗時也就 10ms 如下。
可是由於咱們是 pc客戶端，須要兼容 xp 系統，因此 chrome 的版本極低（40多）。

新版本使用的實際上是 timsort，timsort 是工業級算法，其混用插入排序與歸併排序，二分搜索等算法，亮點是充分利用待排序數據可能部分有序的事實，而且依據待排序數據內容動態改變排序策略——選擇性進行歸併以及 galloping。什麼是Timsort排序方法？

因此這裏咱們能夠把 sort 改爲 timsort。

只須要一次插入排序

https://www.lilnong.top/static/html/user-session-list-virtual-insertsort-log-2.html

由於個人數據是有序的，因此插入排序能夠更快。

我依賴 lodash 的 _.sortedIndexBy 來實現，由於還有置頂規則，因此提供了一個計算權重的方法

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。