2009年9月27日日曜日

Firebug で JavaScript の関数の実行時間を計測する

1. console.time() で関数の実行時間を測る

Firebug で、JavaScript の関数の実行時間を知りたい。

例えば、HTML の pre 要素内で JavaScript ファイルを読み込むとする。

index.html

<html>
    <head></head>
    <body>
        <pre><script src="test.js"></script></pre>
    </body>
</html>

JavaScript のファイルである test.js の中で、console.time(), console.timeEnd() 関数を使うと、関数が実行される時間を測ることができる。

Firebug and Logging によると、

The low-fi approach is to call console.time("timing foo") before the code you want to measure, and then console.timeEnd("timing foo") afterwards.

test.js において、hoge 関数の実行時間を知りたい場合、次のように記述する。

var hoge = function(){
	for (var i = 0; i < 100; i++) {
		document.writeln("hoge");
	}
}

console.time("hoge");
hoge();
console.timeEnd("hoge");

Firebug のコンソールを開き、index.html にアクセスすると、hoge の実行時間が表示される。

090927-006.png

 

2. console.profile() で関数の実行結果を詳しく得る

console.profile() 関数を使うと、console.time() よりも情報を得られる。

The high-fi approach is to use the JavaScript profiler. Just call console.profile() before the code you want to measure, and then console.profileEnd() afterwards

(同上より)

例えば、test.js に piyo 関数を追加し、hoge 関数と piyo 関数実行時間を測る。

var piyo = function(){
	var _piyo = function(){
		for (var i = 0; i < 100; i++) {
			document.writeln("piyo");
		}
	}();
}

console.profile("test");
hoge();
piyo();
console.profileEnd();

index.html を開いて、先ほどと同じくコンソールを見ると、console.time() よりも多くの情報が表示される。

090927-008.png

 

参考