3

実際のクライアント側のパフォーマンスを測定するために、 Jiffyの修正バージョンを使用します。

最も重要なことは、リクエストを受信して​​からブラウザでページ読み込みイベントが発生するまでの時間を測定することです。

一部のページにはiframe、当社が管理していない外部サイトを参照する要素が含まれています。これらの要素は、読み込みに時間がかかる場合があります。現時点では、ページのページ ロード イベントは、iframeが完全にロードされた後にのみ発生します (そして、それ自体のロード イベントが発生します)。

これらの測定値を分けたいと思います - を含むすべてiframeがロードされた後に 1 つの測定を行いますが、 を含まない 1 つの測定も行いますiframe- つまり、 がなければページのロードが発生したときiframeです。

これまでのところ、これを行うことができた唯一の方法はiframe、ページ読み込みイベントの後に を DOM に追加することですが、それでは iframe の読み込みが遅れます。

何か案は？

編集: 報奨金は終わりました。助けとアイデアをありがとう! 新しいアイデアが得られたため、Jedの回答を選択しました.iframeの読み込みを開始しますが、ページの読み込みに影響を与えないように「一時停止」します（一時的に設定することによりsrc="about:blank"）。私の結果のより詳細な要約を追加しようとします。

4

4 に答える 4

3

次の方法で、複数の iframe を動的に追加せずにこれを実現できます。

  1. srcすべてのフレームの属性をabout:blankボディ ロード前に設定し、
  2. body load イベントを発生させ、
  3. onload各フレームのロード時間をキャプチャするハンドラを追加してから、
  4. src各フレームの属性を元の値に復元します。

frameTimer2 つのメソッドで構成されるモジュールを作成しました。

  1. タグinitの直前に呼び出す必要があるメソッド、および</body>
  2. measureページの読み込み時に呼び出されるメソッドで、結果とともにコールバックを受け取ります。

結果オブジェクトは次のようなハッシュです。

{
    iframes: {
        'http://google.co.jp/': 1241159345061,
        'http://google.com/': 1241159345132,
        'http://google.co.uk/': 1241159345183,
        'http://google.co.kr/': 1241159345439
    },
    document: 1241159342970
}

読み込み時間ごとに整数を返しますが、ドキュメント本体の読み込みから差分を返すように簡単に変更できます。

この JavaScript ファイル ( frameTimer.js)を使用した実際の動作例を次に示します。

var frameTimer = ( function() {
    var iframes, iframeCount, iframeSrc, results = { iframes: {} };

    return {
        init: function() {
            iframes = document.getElementsByTagName("iframe"),
            iframeCount = iframes.length,
            iframeSrc = [];

            for ( var i = 0; i < iframeCount; i++ ) {
                iframeSrc[i] = iframes[i].src;
                iframes[i].src = "about:blank";
            }
        },

        measure: function( callback ) {
            results.document = +new Date;

            for ( var i = 0; i < iframeCount; i++ ) {
                iframes[i].onload = function() {
                    results.iframes[ this.src ] = +new Date;
                    if (!--iframeCount)
                        callback( results )
                };

                iframes[i].src = iframeSrc[ i ];
            }
        }
    };

})();

およびこの html ファイル ( frameTimer.html):

<html>
    <head>
        <script type="text/javascript" src="frameTimer.js"></script>
    </head>
    <body onload="frameTimer.measure( function( x ){ alert( x.toSource() ) } )">
        <iframe src="http://google.com"></iframe>
        <iframe src="http://google.co.jp"></iframe>
        <iframe src="http://google.co.uk"></iframe>
        <iframe src="http://google.co.kr"></iframe>
        <script type="text/javascript">frameTimer.init()</script>
    </body>
</html>

これは、jQuery を使用すると、はるかに少ないコード (および目立たない) で実行できますが、これは非常に軽量で依存関係のない試みです。

于 2009-05-01T06:34:17.917 に答える
1

私は jiffy自体に精通していませんが、過去に、大まかに次のような大まかな特注関数を使用して同様の測定を行いました（メモリから入力するのに5分かかります）：

<html>
    <head>
        <script>
        var timer = {
            measure:    function(label)
                        {
                            this._timings[label] = new Date();
                        },
            diff:        function(a,b)
                        {
                            return (this._timings[b] - this._timings[a]);
                        },
            _timings: {}
        }
        </script>
    </head>
    <body onload="alert(timer.diff('iframe.start','iframe.done'));">
        <!-- lorem ipsum etc -->
        <script>timer.measure('iframe.start');</script>
        <iframe src="http://www.google.com" onload="timer.measure('iframe.done');"/>
        <!-- lorem ipsum etc -->
    </body>
</html>

そのことから、関連する部分は、iframe が検出される直前に日付スタンプを書き留めてから、iframe の onload イベントにイベント ハンドラーを追加するだけであることがわかります (これは、iframe ソースのドメインに関係なく機能し、必要ありません)。コンテンツを変更する) 別の測定を行います (通常、これらのイベントを addEventListener/attachEvent で追加しますが、アイデアは得られます)。

これにより、合計から差し引くことができるiframeのタイムスパンが得られ、iframeの有無にかかわらずロード時間の合理的なアイデアが得られます。

HTH

于 2009-04-27T08:23:21.090 に答える
0

それがあなたに役立つかどうかはわかりません：

jQuery ユーザーとして、ウィンドウの onLoad イベントが発生するずっと前にコードが実行されます。

読み込まれたページの DOM の準備が整うとすぐに処理できるようにすることは、jQuery の重要な機能です ( jQuery Ready Eventを参照) 。

次に、iframe を含む「後で」ロードを完了する可能性のあるすべての要素にイベント ハンドラーを追加できます。

しかし、iframe をロードせずに「すべて」のタイミングが必要なため、これでは不十分な場合があることを理解しています。iframe ソースを jQuery Ready ハンドラーから設定した場合、ウィンドウの onLoad イベントがどうなるかわかりません。それらは個別にロードされると思いますが、それを確認する必要があります。

反対に... この準備完了関数は、いつ人々があなたのページを「構築中」と見るかを示します。画像などの読み込みは、人間の認識にとってほとんど二次的なものです。そのため、しばらくの間、ロードが完了する前に Windows がデスクトップを表示します :-)

于 2009-05-03T13:30:24.187 に答える