Использование нового API-интерфейса performance.timing для javascript в iframes? - PullRequest
Новая
       107

Использование нового API-интерфейса performance.timing для javascript в iframes?

2 голосов
/ 30 марта 2012

Я играю с новым API-интерфейсом javascript performance.timing и впечатлен ими.

Хорошее описание здесь http://www.html5rocks.com/en/tutorials/webperformance/basics/

У меня есть важный пример использования для этого, когда нам нужно создать простую страницу, чтобы тестировщики по всему миру могли дважды щелкнуть и получить, скажем, 20 URL-адресов с нашего сайта из разных мест по всему миру.

Наш сайт не является HTML5, поэтому мы не можем напрямую встраивать что-то подобное в наши страницы (при миллиарде страниц в месяц мы не хотим получать столько данных). Итак, мой основной план - это простая HTML-страница «обертки» со сценарием, который загружает 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>

EDIT:

Используя идею @ 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>

1 Ответ

0 голосов
/ 30 марта 2012 
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...