ブログ

Blog

Posted at: 2023-02-05

【JavaScript】パフォーマンスAPIを使ってJavaScriptの特定処理の速度計測をやってみる

JavaScriptではPerformance APIを利用し、特定処理にかかる処理時間を計測することができます。
今回は、Performance APIを利用した処理時間の計測方法についてまとめていきます。

Performance APIでの処理速度計測

// 処理開始ポイントをマーク
performance.mark('startPoint');

//
// 計測対象の処理を記述
//

// 処理終了ポイントをマーク
performance.mark('endPoint');

// 処理開始ポイントと処理終了ポイントの差分を計測
performance.measure(
    'perfResult',
    'startPoint',
    'endPoint'
);

// 結果を取得
const result = performance.getEntriesByName('perfResult');

// 処理時間をコンソールに出力
console.log(result[0].duration);

上記が処理時間計測のためのサンプルプログラムになります。

「計測対象の処理を記述」というところに処理時間を計測したいプログラムを記述し、実行するとで該当処理にかかる時間を計測することができます。

配列操作の処理時間を計測してみる

実際に以下プログラムで配列操作の処理時間を計測してみました。

// 1000000桁の配列を用意
const digits = 1000000;
const ary = [...Array(digits)].map((_, i) => i);

// 新しく作成する配列
let newAry = [];

// 処理開始ポイントをマーク
performance.mark('startPoint');

// 計測したい処理
newAry = ary.map(val => val);

// 処理終了ポイントをマーク
performance.mark('endPoint');

// 処理開始ポイントと処理終了ポイントの差分を計測
performance.measure(
    'perfResult',
    'startPoint',
    'endPoint'
);

// 結果を取得
const result = performance.getEntriesByName('perfResult');

// 処理時間をコンソールに出力
console.log(result[0].duration);

処理内容は非常にシンプルで、０～999999までの数字を持った配列を用意し、ループ出力してnewAryへと格納しなおすだけの処理です。