前端 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

欢迎你们关注个人公众号。有疑问也能够加个人微信前端交流群。