javascript 文字列配列化で「split」と「Array.from」と「スプレッド構文」とのパフォーマンスを計測する

作成日 2022.05.31
javascript
javascript

javascriptで、「split」と「Array.from」と「スプレッド構文」で同じ処理を行った時のパフォーマンスを計測するサンプルコードを記述してます。

1. 環境
2. パフォーマンス計測

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.63

Javascript サンプル集はこちら

パフォーマンス計測

「performance.now」を使用して、「split」と「Array.from」と「スプレッド構文」を使用して、
文字列を1文字ずつ配列に変換する処理を100万回実行し、パフォーマンスを計測するサンプルコードとなります。

<script>

// 実行回数
const times = 1_000_000;

// 空白を埋めるだけの関数
function spacePadding(val, n = 8) {
  for (; val.length < n; val += ' ');
  return val;
}

// 計測結果を表示
const benchmark = (name, start, end) => {
  let report = (end - start).toPrecision(3);
  // 表示を見やすくするため関数名に空白を埋める
  name = spacePadding(name)
  console.log(`実行回数:${times}回 関数名:${name} 実行時間:${report}(ms)`);
}

// 計測
start = performance.now();

  for (let i = 0; i < times; ++i) {
    'abcde'.split('')
  }

end = performance.now();

benchmark('split', start, end);

// 計測
start = performance.now();

  for (let i = 0; i < times; ++i) {
    Array.from('abcde')
  }

end = performance.now();

benchmark('Array.from', start, end);

// 計測
start = performance.now();

  for (let i = 0; i < times; ++i) {
    [...'abcde']
  }

end = performance.now();

benchmark('[...]', start, end);

</script>

実行結果(chrome 102.0.5005.63)

<1回目>
実行回数:1000000回 関数名:split    実行時間:72.4(ms)
実行回数:1000000回 関数名:Array.from 実行時間:468(ms)
実行回数:1000000回 関数名:[...]    実行時間:308(ms)

<2回目>
実行回数:1000000回 関数名:split    実行時間:71.9(ms)
実行回数:1000000回 関数名:Array.from 実行時間:487(ms)
実行回数:1000000回 関数名:[...]    実行時間:305(ms)

<3回目>
実行回数:1000000回 関数名:split    実行時間:71.6(ms)
実行回数:1000000回 関数名:Array.from 実行時間:521(ms)
実行回数:1000000回 関数名:[...]    実行時間:301(ms)

「split」が、速いという結果になりました。

firefox97.0も同様の結果になりました。

<1回目>
実行回数:1000000回 関数名:split    実行時間:80.0(ms) 
実行回数:1000000回 関数名:Array.from 実行時間:270(ms)
実行回数:1000000回 関数名:[...]    実行時間:149(ms)

<2回目>
実行回数:1000000回 関数名:split    実行時間:68.0(ms)
実行回数:1000000回 関数名:Array.from 実行時間:318(ms)
実行回数:1000000回 関数名:[...]    実行時間:150(ms)

<3回目>
実行回数:1000000回 関数名:split    実行時間:78.0(ms)
実行回数:1000000回 関数名:Array.from 実行時間:246(ms)
実行回数:1000000回 関数名:[...]    実行時間:144(ms)