All geek questions in one place

Dimension when only certain page elements are loaded

We use a modified version of Jiffy to measure actual client-side performance.

The most important thing we do is measure the time between receiving the request and the page load event in the browser.

On some pages we have elements iframethat point to external sites that we do not control - they sometimes take a long time to load. At the moment, the page load event for our page is fired only after a full load iframe(and its own load event is fired).

I would like to separate these measurements - to perform one measurement after loading everything iframe, but also one measurement without iframe- that is, when the page would load if we hadn’t iframe.

The only thing I have managed to do so far is to add iframeto the DOM after the page load event, but this delays the loading of the iframe.

Any ideas? Thanks!

EDIT: The reward is over, thanks for the help and ideas! I chose Jed's answer because it gave me a new idea - start loading frames, but “pause” them so that they do not affect page loading (temporarily setting src="about:blank"). I will try to add a more detailed summary of my results.

+3
4

iframe :

  • src about:blank ,
  • ,
  • onload ,
  • src .

frameTimer, :

  • a init, </body>
  • a measure , , .

, :

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

, , diff .

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, .

+3

jiffy per se, , , (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, onload iframes ( iframe 't ), ( addEventListener/attachEvent, ).

iframe, , iframe .

+1

, :

jQuery, , onLoad .

jQuery, , DOM (. jQuery Ready)

, "", iframes.

, , "", . , onLoad , iframe jQuery. , , .

... , "". . , : -)

0

I offer the "domready" event proposed by OderWat with one exception: you do not need jQuery to implement this event. At http://dean.edwards.name/weblog/2006/06/again/ this is well explained for all three (actually 4) major browsers.

In fact, if you run tests in a specific browser, it’s easier for you to implement this event for tracking purposes.

Hope this helps.

0
source

Source: https://habr.com/ru/post/1706906/

More articles:


All Articles