Log4js(JavaScriptのログ出力ライブラリ)を改造してJavaScriptのベンチマークができるようにしました : アークウェブのブログ

ホーム » ビジネスブログ » Ajax (システム開発) »

Log4js(JavaScriptのログ出力ライブラリ)を改造してJavaScriptのベンチマークができるようにしました

2007年4月 9日

Log4js(JavaScriptのログ出力ライブラリ)を改造してJavaScriptのベンチマークができるようにしました

投稿者竹村

SEの竹村です。

リッチなアプリケーションを作ろうとするあまり、JavaScriptを多用して複雑な処理を組んでいたりするとCPUスペックが 1GHz程度のパソコンでは動作が遅くなってしまう…ということが多々あると思います。

そんな時は、もっと高速にレスポンスが返るように調整したり、実装方法自体を変えてみたりするわけですが、まずはどの部分が重くなっているのかを知るために、またどれくらい改善できたのかを確認するために、コードをベンチマークしてみる必要があります。

JavaScriptのベンチマークを調べてみると、下記のようなツールを見つけました。

▼[javascript][benchmark.js]ベンチマークツール公開
http://d.hatena.ne.jp/amachang/20060906/1157571938

これは、1つの関数単位で速度計測するため、複数の関数の連動について調べたければ、速度計測するためのテストコードを書かねばならない可能性があります。

もっと、PHPのPEARのBenchMarkのように、任意に埋め込んだマーカーのポイント毎に速度計測してくれればベストですよね。

Log4jsを改造して、そのようなベンチマーク計測ができるようにしました。

まずは、『どのようにしたいか』を見ていただきたいので、先ほどのPEAR BenchMarkについて説明します。

▼PEAR BenchMark
http://pear.php.net/package/Benchmark/docs/1.2.6/Benchmark/Benchmark_Timer.html

<?php
require_once 'Benchmark/Timer.php';

$timer = new Benchmark_Timer();
$timer->start();
(処理)
$timer->setMarker('Marker 1');
(処理)
$timer->stop();
$timer->display();
?>

↓このような結果が表示されます。

	time index	ex time	%
Start	1175677686.93020000	-	0.00%
Marker 1	1175677686.93028200	8.20159912109E-05	65.65%
Stop	1175677686.93032500	4.29153442383E-05	34.35%
total	-	0.000124931335449	100.00%

このように、任意のマーカーを埋め込んで、その間の処理時間が計測できればよい、ということになります。
そこで、Log4jsを利用します。

Log4jsの説明については、下記ページで紹介されているので分かると思います。

▼log4js - JavaScriptログ出力ライブラリ
http://fnya.cocolog-nifty.com/blog/2006/12/log4js_javascri_6be6.html

▼[リンク]AJAXアプリケーションのデバッグ、JavaScriptログ出力、Log4js
http://d.hatena.ne.jp/brazil/20050920/1127212454

Log4jsをそのまま利用するだけでは、ベンチマーク情報は表示されません。そこで、ちょっと改造します。

Log4js.Logger = function(name) {

    // -> add takemura on 2007/04/03:Set startDate and beforeDate

    this.startDate = new Date();

    this.beforeDate = this.startDate;

    // <- add takemura on 2007/04/03:Set startDate and beforeDate

(...)

    debug: function(message) {

        if (this.isDebugEnabled()) {

        // -> modify takemura on 2007/04/03:View process time

        var time  = new Date() - this.startDate;

        var btime = new Date() - this.beforeDate;

        this.beforeDate = new Date();

        this.log(time+'('+btime+"):"+message, Log4js.Level.DEBUG);

        // <- modify takemura on 2007/04/03:View process time

    }

},

使い方は、Log4jsの今までどおりの利用方法で構いません。