YUIでプロファイリング

わざわざ自作しなくても、Yahoo! UI Library: Profilerなんてのもあります。

• オブジェクトや関数をプロファイル対象として登録しておくことで、その後の処理で行われた関数の呼び出しを記録/集計してくれます。
• 回数、平均呼び出し時間、最大/最小呼び出し時間等を取得可能です。

インストール

以下のモジュールをインポートします。

<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/profiler/profiler-beta-min.js"></script>

サンプル

この間作ったものをYahoo! UI Library: Profilerでプロファイリングするサンプルです。

/**
 * テスト対象の処理
 *  -SubLogicAを2回
 *  -SubLogicBを10回
 * 実行する
 */
function MainLogic() {}
MainLogic.prototype  = {
    toString: function() { return "MainLogic"; },
    run: function() {
        this.subA.run();
        this.subA.run();
        for (var i=0; i < 10; i++ ) {
            this.subB.run();
        }
    }
}
/**MainLogicから呼ばれる処理*/
function SubLogicA() {}
SubLogicA.prototype  = {
    toString: function() { return "logicA"; },
    run: function() {
        var str = "";
        for (var i=0; i < 10000; i++ ) {
            str = "hogehoge" + i ;
        }
    }
}
/**MainLogicから呼ばれる処理*/
function SubLogicB() {}
SubLogicB.prototype  = {
    toString: function() { return "logicB"; },
    run: function() {
        var str = "";
        for (var i=0; i < 5000; i++ ) {
            str = "hogehoge" + i ;
        }
    }
}

// インスタンス作成
var main = new MainLogic();
main.subA = new SubLogicA();
main.subB = new SubLogicB();

// プロファイラの計測対象としてマーク
YAHOO.tool.Profiler.registerObject("mainLogic", main);
YAHOO.tool.Profiler.registerObject("logicA", main.subA);
YAHOO.tool.Profiler.registerObject("logicB", main.subB);

// メインロジックを実行
main.run();

// プロファイル結果を表示
var report = YAHOO.tool.Profiler.getFullReport();
var str = "<table border='1px'>";
str += "<tr>" ;
str += "<th>オブジェクト.メソッド</th>";
str += "<th>呼び出し回数</th>";
str += "<th>平均呼び出し時間(msec)</th>";
str += "<th>最大呼び出し時間(msec)</th>";
str += "<th>最小呼び出し時間(msec)</th>";
str += "</tr>";
for ( var i in report ) {
    str += "<tr>" ;
    str += "<td>" + i + "</td>";
    str += "<td>" + report[i]['calls'] + "</td>";
    str += "<td>" + report[i]['avg'] + "</td>";
    str += "<td>" + report[i]['max'] + "</td>";
    str += "<td>" + report[i]['min'] + "</td>";
    str += "</tr>";
}
str += "</table>";
document.getElementById("stdout").innerHTML = str;

実行結果はこちら。なかなか便利。