コンテンツへスキップ

【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へと格納しなおすだけの処理です。

上記処理を実行した結果、処理実行にかかった時間がミリ秒をコンソール上に表示できました。

まとめ

というわけで、今回はJavaScriptでPerformance APIを利用し、特定処理にかかる処理時間の計算方法をまとめました。

Performance APIは、他にも様々な情報を取得することができますので、詳細を知りたい方は下記のリンクを参考にしてもらえればと思います。

参考サイト：パフォーマンス API – Web API | MDN

タグ: