使用新的javascript性能.在iframe上优化API

Using the new javascript performance.timing API on iframes?

本文关键字：iframe 优化 API 性能 javascript      更新时间：2023-09-26

我一直在玩新的性能。优化javascript API，对它们印象深刻。

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

我有一个重要的用例，那就是我们需要制作一个简单的页面，世界各地的测试人员可以双击它，从我们的网站上从他们在世界各地的不同位置获得20个URL的性能。

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

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>

<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也适用于Firefox。

编辑：

请尝试iframe性能的新代码。计时测试：

 <!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>
相关文章：