17

サーバーへの Ajax 呼び出しを行い、複雑なデータ キャッシュと DOM レンダリングを実行する Knockout と Backbone で構築された単一ページ アプリがあります。ユーザーから見たパフォーマンスを測定する (そしてサーバーに記録する) ことが本当に好きです。ブラウザのNavigation Timing APIがこれに役立つかどうかについて、頭を悩ませているようには見えません。例からわかるように、Navigation Timing API は関連付けられてwindow.performanceおり、これはページの読み込みに限定されており、Ajax の動作の監視には適していません。正しいか間違っているか？false の場合、他に何を使用できますか?

サーバーの結果で何らかの DOM レンダリングを行う Ajax 呼び出しなど、時間を測定するためのカスタム インストルメンテーション ポイントを設定したいと考えています。

4

5 に答える 5

12

1 - 確かに、window.performance はページの読み込みに関連付けられています。これを示す以下の例を参照してください。

    <button id='searchButton'>Look up Cities</button>
    <br>
    Timing info is same? <span id='results'></span>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
    <script type="text/javascript">
        jQuery('#searchButton').on('click', function(e){
            // deep copy the timing info
            var perf1 = jQuery.extend(true, {}, performance.timing);             
            // do something async
            jQuery.getJSON('http://ws.geonames.org/searchJSON?featureClass=P&style=full&maxRows=10&name_startsWith=Denv', function() {
                // get another copy of timing info
                var perf2 = jQuery.extend(true, {}, performance.timing);
                // show if timing information has changed
                jQuery('#results').text( _.isEqual( perf1, perf2 ) );
            });
            return false;
        });
    </script>

また、たとえそれが機能したとしても、このオブジェクトをサポートしていない古いブラウザーからはデータが失われるでしょう。

2 - Boomerang プロジェクトは Web タイミング API を超えているようで、古いブラウザーもサポートしています。このカンファレンスにリストアップされている現在のメンテナーによるスライドとサンプル コードを使用したトークがあります。直リンクですみません。

于 2013-04-29T23:11:06.287 に答える
9

ユーザー タイミング API (W3C 勧告 2013 年 12 月 12 日) を使用できるようになりました。これは、Javascript のさまざまな部分に API 呼び出しを挿入し、詳細なタイミング データを抽出する方法を提供します。

を使用してこれを行うとmark()、Web アプリケーションでその「マーク」に到達するのにかかっmeasure()た時間を計算し、マーク間の経過時間を計算できます。

特定のケースでは、次のようなものがあります。

app.render = function(content){
  myEl.innerHTML = content;
  window.performance.mark('end_render');
  window.performance.measure('measure_render', 'start_xhr', 'end_render');
};


var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onload = function(e) {
  window.performance.mark('end_xhr');
  window.performance.measure('measure_xhr', 'start_xhr', 'end_xhr');
  app.render(e.responseText);
}
window.performance.mark('start_xhr');
myReq.send();
于 2014-02-18T16:49:38.923 に答える