【Javascript】時間、回数、パフォーマンスを詳細に計測する。

めも。

console.profile()、console.profileEnd()を用いると各関数の実行回数、合計の実行時間などを計測し、コンソールへ詳細に吐き出してくれる。
上記関数にはそれぞれ同一のキーを引数として渡し、同じキーが指定されたものをペアとしてその区間の計測結果を出力してくれる。

例えば下記のようなjQueryを用いたコードのパフォーマンスを詳細に計測したい場合。

<script>
var obj = {};

obj.test = function(){
	console.log('ok');
}

$(function(){
	for(var i = 0; i < 100; i++){
		for(var j = 0; j < 10; j++){
			obj.test();
		}
	}
})
</script>

下記のようにconsole.profile()、console.profileEnd()を挿入してみる。

<script>
var obj = {};

obj.test = function(){
	console.log('ok');
}

$(function(){
	console.profile('key');
	for(var i = 0; i < 100; i++){
		for(var j = 0; j < 10; j++){
			obj.test();
		}
	}
	console.profileEnd('key');
})
</script>

そして、これを実行すると下記のようなデバッグ結果が出力される。
※下記はChromeで実行した場合のデバッグコンソール。

c7321b7fafc05912cf004164673dfe9a

パフォーマンスを極限まで追及する際に欠かせない非常に強力な機能だね。