Using the new javascript performance.timing API on iframes?

Question

Using the new javascript performance.timing API on iframes?

5.2k Views Asked by Seer At 18 April 2025 at 06:42

I have been playing with the new performance.timing javascript API and am pretty impressed with them.

A good description here http://www.html5rocks.com/en/tutorials/webperformance/basics/

I have an important use case for this which is where we need to make a simple page that testers around the world can double-click and get performance of, say, 20 URL's from our site from their different locations around the world.

Our site is not HTML5 so we cannot embed something like this in our pages directly (with a billion pages a month we wouldnt want that much data anyway). So my basic plan is a simple 'wrapper' HTML page with the script which loads the 20 url's in iframes. Yeah I know! iframes suck, but this thing does not need to be pretty, just effective!

Javascript is definitely not my forte! So I need some help on how I could get this data for each independent iframe (and of course I am interested in hearing other methodologies if you have a proven one).

To give a you a very simple view of how it works (only in Chrome and IE9 so far I think)

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Performance Test</title>
    <style type="text/css">
    </style>
</head>
<body>
    <script type="text/javascript">
        var perf = performance.timing;

        // Date / Time the page was requested
        var navStart = perf.navigationStart;

        // Redirection
        var redStart = perf.redirectStart - navStart;
        var redEnd = perf.redirectEnd - navStart;

        // DNS Lookup
        var dnsStart = perf.domainLookupStart - navStart;
        var dnsEnd = perf.domainLookupEnd - navStart;

        // TCP Connection
        var tcpStart = perf.connectStart - navStart;
        var tcpEnd = perf.connectEnd - navStart;

        // Loading the response
        var reqStart = perf.requestStart - navStart;
        var loadStart = perf.responseStart - navStart;
        var loadEnd = perf.loadEventStart - navStart;

        // document.writeln("navStart = " + navStart);
        // document.writeln("Redirect = " + redStart + "-" + redEnd);

        document.write("DNS LOOKUP = " + dnsStart + "-" + dnsEnd + "ms<br>");
        document.write("EST TCP CON = " + tcpStart + "-" + tcpEnd + "ms<br>");
        document.write("LOADING RESPONSE = " + reqStart + "-" + loadStart + "ms<br>");
    </script>
</body>
</html>

EDIT:

Using @Mawi12345 's idea I am trying the following:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Performance Test</title>
    <style type="text/css">
    </style>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function(){
            var iFrame = $( '<iframe></iframe>' )
            .attr( 'src', 'http://www.ikea.com')
            .appendTo( $( 'body' ) );
            console.log(iFrame[0].contentWindow.performance.timing);
        });
        $(function(){
            var iFrame = $( '<iframe></iframe>' )
            .attr( 'src', 'http://www.bbc.co.uk')
            .appendTo( $( 'body' ) );
            console.log(iFrame[0].contentWindow.performance.timing);
        });
    </script>
</body>
</html>

Original Q&A

There are 1 best solutions below

**windm** · Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
    var iFrame = $( '<iframe></iframe>' )
    .attr( 'src', 'http://www.google.com')
    .css( 'display', 'none')
    .appendTo( $( 'body' ) );
    console.log(iFrame[0].contentWindow.performance.timing);
});
</script>

ps: performance.timing works on Firefox too.

Edit:

Please try the new code for iframe performance.timing test:

 <!DOCTYPE html>
 <html>
 <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript">
         $(function(){
            var timings = {};
            $.each([
            'http://bbc.co.uk', 
            'http://ikea.com',
            'http://www.nasa.gov',
            'http://google.com'], function(index, url){
                var iFrame = $( '<iframe></iframe>' )
                .attr( 'src', url)
                .css('display', 'none')
                .appendTo( $( 'body' ) );
                var item = {
                    'frame': iFrame[0],
                    'timing': iFrame[0].contentWindow.performance.timing,
                    'status': 0,
                    'logged': 0
                }
                timings[url] = item;
                iFrame.load(function(){
                    item.status = 1;
                    $('#log').trigger('check');
                });
             });

             $('#log').bind('check', function(){
                $.each(timings, function(url, item){
                    console.log(item);
                    if (item.status == 0 || item.logged) return;
                    item.logged = 1;
                    var timing = item.timing;
                    var navStart = timing.navigationStart;
                    var redStart = timing.redirectStart - navStart;
                    var redEnd = timing.redirectEnd - navStart;
                    var dnsStart = timing.domainLookupStart - navStart;
                    var dnsEnd = timing.domainLookupEnd - navStart;
                    var tcpStart = timing.connectStart - navStart;
                    var tcpEnd = timing.connectEnd - navStart;
                    var reqStart = timing.requestStart - navStart;
                    var loadStart = timing.responseStart - navStart;
                    var loadEnd = timing.loadEventStart - navStart;
                    $('#log').append($(
                        '<li><b>URL: ' + url + '</b><br />' +
                        'DNS LOOKUP = ' + dnsStart + '-' + dnsEnd + 'ms<br />' +
                        'EST TCP CON = ' + tcpStart + '-' + tcpEnd + 'ms<br />' +
                        'LOADING RESPONSE = ' + reqStart + '-' + loadStart + 'ms</li>'
                    ));
                });
             });

         });
     </script>
 </head>
 <body>
 <ul id="log"></ul>
 </body>
 </html>

Using the new javascript performance.timing API on iframes?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in PERFORMANCE

Related Questions in API

Related Questions in NAVIGATION-TIMING-API

Trending Questions

Popular # Hahtags

Popular Questions