Using the new javascript performance.timing API on iframes?

Question

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>

windm · Answer 1 · 2012-03-31T17:16:04.553

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

Looks good to a point :) If I have a single function in there i get valid perf data from the console. But as soon as there is more than one I get all zeroes — Seer, Mar 30 '12 at 14:39
added the code to an edit of the orginal question so you can see where I am screwing up :) — Seer, Mar 30 '12 at 14:41
Many thanks for the time and effort - been on vacation since the last post so sorry for delay! The latest code is interesting for sure and once I have my head wrapped around I almost understand it :) Three issues are apparent. 1. All timing results come out as 0ms 2. Some domains are ignored e.g. http://www.google.co.uk simply doesn't appear to be processed. 3. No iframes are displayed - just the results (the iframes will be a good feature for the providers to see their content is also loading correctly. I'll dig into some logs now and if I find anything Ill post in next comment — Seer, Apr 10 '12 at 13:21
Final bump for @Mawi12345 in the hope he has notifications on :) — Seer, Apr 23 '12 at 09:49

Using the new javascript performance.timing API on iframes?

1 Answers1