Home/ Questions/Q 224701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T19:20:30+00:00

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

  • 0

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

The most important thing we do is measure the time between when the request was received and when the page load event fires in the browser.

On some pages we have iframe elements that point to external sites that we don’t control – they sometimes take a long while to load. At the moment, the page load event for our page fires only after the iframe is completely loaded (and it’s own load event fires).

I’d like to separate these measurements – have one measurement after everything including the iframe is loaded, but also one measurement without the iframe – that is, when the page load would have occured if we didn’t have an iframe.

The only way I’ve managed to do this so far is to add the iframe to the DOM after the page load event, but that delays the loading of the iframe.

Any ideas?

EDIT: bounty is over, thanks for the help and ideas! I chose Jed’s answer because it gave me a new idea – start loading the iframes, but “pause” them so they won’t affect page load (by temporarily setting src="about:blank"). I’ll try to add a more detailed summary of my results.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can achieve this for multiple iframes without dynamically adding them by:

    1. setting the src attribute for all frames to about:blank before body load,
    2. letting the body load event fire,
    3. adding an onload handler to capture the load time of each frame, and then
    4. restoring the src attribute of each frame to its original value.

    I’ve created a frameTimer module that consists of two methods:

    1. an init method that needs to be called immediately before the </body> tag, and
    2. a measure method to be called on page load, which takes a callback with the results.

    The results object is a hash like this:

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

    It returns integers for each load time, but could be easily changed to just return the diff from the document body load.

    Here’s a working example of it in action, with this javascript file (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 ];
            }
        }
    };

})();

    and this html file (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>

    This could be done in a lot less code (and less obtrusively) with jQuery, but this is a pretty lightweight and dependency-free attempt.

    • 0