[JavaScript] 日本語を含んだ文字配列を大量に比較する場合「localeCompare」と「Intl.Collator の compare」のどちらがパフォーマンス良いか検証した

フロントエンドで日本語を含んだ文字配列を比較する手段として、

• localeCompare
• Intl.Collatorのcompare

の2つがあります。
どちらが、パフォーマンスが良いか検証した際のメモを残します。

localeCompare と Intl.Collatorのcompare

本記事記載（ES2020）時点において、
文字列を比較するlocaleCompareというメソッドが提供されています。

• MDN - String.prototype.localeCompare

localeCompareで配列の内容を五十音順ソートの記事にもある通り、
漢字を含めた日本語をソートしたい場合、localeCompareを使用する手があります。

が、MDNのlocalCompareの説明を読み進めると、
以下の記載が見つかりました。

パフォーマンス
巨大な配列のソートなど大量の文字列を比較する場合は Intl.Collator オブジェクトを作成し、 compare プロパティで提供される関数を利用すると良いでしょう。

• MDN - Intl.Collator.prototype.compare

日本語を含めた文字配列を作成し、検証してみました。

CodeSandboxで検証

• Faker.js
• テストデータ・ジェネレータ

から、1000個の名前ダミーデータ（英字500個, 日本語500個）を用意し、
CodeSandboxで検証用のロジックを書いてみました。

• CodeSandbox - Intl.Collator localCompareの検証

• Intl.Collator Sortを押下すると、Intl.Collatorのcompareを使った比較および時間計測
• localCompare Sortを押下すると、localCompareを使った比較および時間計測

が行われ、コンソールへ以下のように出力されます。

// 1回目
Object {used: "Intl.Collator", time: 1.8749999981373549, localSamples: Array[1000]}
Object {used: "localeCompare", time: 3.025000001769513, localSamples: Array[1000]}

// 2回目
Object {used: "Intl.Collator", time: 1.8199999976204708, localSamples: Array[1000]}
Object {used: "localeCompare", time: 3.224999996717088, localSamples: Array[1000]}

MDNのドキュメント通り、Intl.Collatorの方が高速にソートできるようです。

結論

日本語を含む文字配列を大量に比較する場合は、
localeCompareよりIntl.Collatorを使うとパフォーマンスが良いとわかりました。

が、仕様上、一二三のような漢字も一三二とソートされますので、
注意して使用してください。¹

おわり

以上です。
おかしい、気になった点などありましたら、
フィードバックいただけると助かります。

参考記事

• Qiita - ウェブサイトをグローバル化するために便利なIntl APIの話 ... Intl系の他機能を紹介されています
• ダミーデータ系
  • Faker.js
  • テストデータ・ジェネレータ

1. 名前に紐づくふりがなのような項目がある場合は、ふりがなでソートした方が正確に並び替えられます。 ↩