javascript 数値型への変換で「parseInt」と「Number」のパフォーマンスを計測する

javascript 数値型への変換で「parseInt」と「Number」のパフォーマンスを計測する

javascriptで、「parseInt」と「Number」で数値型への変換処理を行った時のパフォーマンスを計測するサンプルコードを記述してます。

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.66

パフォーマンス計測

「performance.now」を使用して、「parseInt」と「Number」を使用して、
BigIntを数値に変更する処理を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)`);
    }

    let num = '100'
    
    // 計測
    start = performance.now();
    
      for (let i = 0; i < times; ++i) {
        num = '100'
        parseInt(num)
      }
    
    end = performance.now();
    
    benchmark('parseInt', start, end);
    
    // 計測
    start = performance.now();
    
      for (let i = 0; i < times; ++i) {
        num = '100'
        Number(num)
      }
    
    end = performance.now();
    
    benchmark('Number', start, end);
    
</script>

実行結果(chrome 103.0.5060.66)

<1回目>
実行回数:1000000回 関数名:parseInt 実行時間:6.20(ms)
実行回数:1000000回 関数名:Number   実行時間:6.70(ms)

<2回目>
実行回数:1000000回 関数名:parseInt 実行時間:5.40(ms)
実行回数:1000000回 関数名:Number   実行時間:5.80(ms)

<3回目>
実行回数:1000000回 関数名:parseInt 実行時間:6.30(ms)
実行回数:1000000回 関数名:Number   実行時間:6.50(ms)

ほぼ同じという結果になりました。

firefox102の場合は「Number」の方が少し速そうです。

<1回目>
実行回数:1000000回 関数名:parseInt 実行時間:17.0(ms)
実行回数:1000000回 関数名:Number   実行時間:21.0(ms)

<2回目>
実行回数:1000000回 関数名:parseInt 実行時間:24.0(ms)
実行回数:1000000回 関数名:Number   実行時間:29.0(ms)

<3回目>
実行回数:1000000回 関数名:parseInt 実行時間:21.0(ms)
実行回数:1000000回 関数名:Number   実行時間:33.0(ms)

safari15.5でも「Number」の方が少し速そうです。

実行回数:1000000回 関数名:parseInt 実行時間:36.0(ms)
実行回数:1000000回 関数名:Number   実行時間:61.0(ms)

BigIntから変更

また、変換する文字列を文字列ではなくBigIntに変更すると結果は以下のようになります。

let num = 100n

chrome 103.0.5060.66の場合は「Number」の速くなります。

<1回目>
実行回数:1000000回 関数名:parseInt 実行時間:80.9(ms)
実行回数:1000000回 関数名:Number   実行時間:17.0(ms)

<2回目>
実行回数:1000000回 関数名:parseInt 実行時間:71.4(ms)
実行回数:1000000回 関数名:Number   実行時間:16.3(ms)

<3回目>
実行回数:1000000回 関数名:parseInt 実行時間:76.7(ms)
実行回数:1000000回 関数名:Number   実行時間:17.0(ms)

firefox102でも同様です。

<1回目>
実行回数:1000000回 関数名:parseInt 実行時間:52.0(ms)
実行回数:1000000回 関数名:Number   実行時間:21.0(ms)

<2回目>
実行回数:1000000回 関数名:parseInt 実行時間:53.0(ms)
実行回数:1000000回 関数名:Number   実行時間:22.0(ms)

<3回目>
実行回数:1000000回 関数名:parseInt 実行時間:50.0(ms)
実行回数:1000000回 関数名:Number   実行時間:21.0(ms)

safari15.5でも同じ結果になります。

実行回数:1000000回 関数名:parseInt 実行時間:149(ms)
実行回数:1000000回 関数名:Number   実行時間:31.0(ms)