Javascriptの処理実行時間を取得する方法

Javascriptで開発を行っている歳に「処理の実行時間」を計測したい場合がよくあります。

そんな時のために「処理の実行時間」を計測するクラスを作成しておき、いつでも使えるようにしておくと便利です。

今回は「performance.now() 」を利用して実行時間の計測を行います。

一般的な「Date.now()」で取得したミリ秒の値を比較していた部分を、 performance.now() に置き換えることでマイクロ秒での比較が可能になります。

Javascriptでの処理の実行時間取得
まとめ

Javascriptでの処理の実行時間取得

今回は一般的な「Date.now()」で取得したミリ秒単位を比較していた部分を、「performance.now()」に置き換えることでマイクロ秒単位での比較が可能になるため「performance.now()」を利用します。

できるだけ呼び出す時に面倒な手間はかけたくないのでClass化しておくと便利に使えます。

class Timer() {
constructor() {
this.startTime = performance.now() ;
}
this.endTimer(){
return ( performance.now() - this.startTime ) ;
}
}

ただしこの「class」はIE(Internet Explore）では利用できないので、IE(Internet Explore）で利用する場合は「prototype」にメソッド作って対応しておきます。(Microsoft Edgeでは「class」使えます。）

function Timer() {
this.startTime = performance.now() ;
}
Timer.prototype = {
endTimer:function()
{
return ( performance.now() - this.startTime ) ;
}
}

これでどちらの場合も

var timer = new Timer();
j = 0 ;
for( i = 0 ; i &lt; 1000000; i++){
j++;
j *= 100 ;
j /= 100 ;
}
console.log("実行時間は[" + timer.endTimer() + "]mescです。"); // 何ミリ秒かかったかを表示する

のようにTimerオブジェクトを生成してendTimerメソッドを呼び出すことで、オブジェクトを生成してからメソッドが呼び出されるまでの経過時間をマイクロ秒単位で取得することができるようになります。

まとめ

IE(Internet Explore）とそれ以外のブラウザーでちょっとやる内容は変わりますが、どちらでもマイクロ秒単位で経過時間を取得できるようになります。

また

console.time('hoge');
j = 0 ;
for( i = 0 ; i &lt; 1000000; i++){
j++;
j *= 100 ;
j /= 100 ;
}
console.timeEnd('hoge') ;

出も同じような結果を得られますが「console.timeEnd()」メソッドが戻り値として計測時間を返してくるわけでなない（void型です）ので注意が必要です。（与える引数の名前は合わせる必要があります。）

以上、Javascriptの処理実行時間を取得する方法でした。