4

我一直在使用新的 performance.timing javascript API，对它们印象深刻。

这里有一个很好的描述http://www.html5rocks.com/en/tutorials/webperformance/basics/

我有一个重要的用例，我们需要创建一个简单的页面，让世界各地的测试人员可以双击并从我们的站点从世界各地的不同位置获得例如 20 个 URL 的性能。

我们的网站不是 HTML5，所以我们不能直接在我们的页面中嵌入这样的内容（每月有 10 亿个页面，我们无论如何也不想要那么多数据）。所以我的基本计划是一个简单的“包装器”HTML 页面，其中包含在 iframe 中加载 20 个 url 的脚本。是的，我知道！iframe 很烂，但这东西不需要漂亮，只要有效！

Javascript 绝对不是我的强项！所以我需要一些帮助来了解如何为每个独立的 iframe 获取这些数据（当然，如果你有一个经过验证的方法，我很想听听其他方法）。

让您非常简单地了解它的工作原理（我认为目前仅在 Chrome 和 IE9 中）

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

编辑：

使用@Mawi12345 的想法，我正在尝试以下操作：

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

1 回答 1

0 
<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>
于 2012-03-30T14:13:02.867 回答