通过将 a.localeCompare(b) 切换为 (ab?1:0)),排序速度提高 400 倍

2024-01-07

通过切换 javascript 排序函数

myArray.sort(function (a, b) {
  return a.name.localeCompare(b.name);
});

to

myArray.sort(function (a, b) {
  return (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0));
});

我能够将 Chrome 中约 1700 个元素数组的排序时间从 1993 毫秒缩短到 5 毫秒。几乎加速了 400 倍。不幸的是,这是以正确排序非英语字符串为代价的。

显然,当我尝试排序时,我不能让 UI 阻塞 2 秒。我可以做些什么来避免极其缓慢的 localeCompare 但仍然保持对本地化字符串的支持?


通过声明可以获得很大的性能改进collator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator事先对象并使用它的比较方法。例如:

const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });
arrayOfObjects.sort((a, b) => {
  return collator.compare(a.name, b.name);
});

注意:如果元素是浮点数,则此方法无法正常工作。请参阅此处的解释:Intl.Collat​​or 和带有数字选项的自然排序对十进制数字的排序不正确 https://stackoverflow.com/questions/40107588/intl-collator-and-natural-sort-with-numeric-option-sorts-incorrectly-with-decima

下面是比较这 3 种方法的基准脚本:

const arr = [];
for (let i = 0; i < 2000; i++) {
  arr.push(`test-${Math.random()}`);
}

const arr1 = arr.slice();
const arr2 = arr.slice();
const arr3 = arr.slice();

console.time('#1 - localeCompare');
arr1.sort((a, b) => a.localeCompare(
  b,
  undefined, {
    numeric: true,
    sensitivity: 'base'
  }
));
console.timeEnd('#1 - localeCompare');

console.time('#2 - collator');
const collator = new Intl.Collator('en', {
  numeric: true,
  sensitivity: 'base'
});
arr2.sort((a, b) => collator.compare(a, b));
console.timeEnd('#2 - collator');

console.time('#3 - non-locale');
arr3.sort((a, b) => (a < b ? -1 : (a > b ? 1 : 0)));
console.timeEnd('#3 - non-locale');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过将 a.localeCompare(b) 切换为 (ab?1:0)),排序速度提高 400 倍 的相关文章

随机推荐