Использование нового API javascript performance.timing для iframe?

Я играю с новым performance.timing javascript API и очень впечатлен ими.Использование нового API javascript performance.timing для iframe?

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

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

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

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

источник

2012-03-30 Seer

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

пс: performance.timing работает и с Firefox.

Edit:

Пожалуйста, попробуйте новый код для performance.timing теста 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>

источник

2012-03-30 14:13:02 windm

Выглядит хорошо до точки :) Если у меня есть одна функция там я получить достоверные данные перфорация с консоли. Но как только появляется больше одного, я получаю все нули. – Seer

добавил код к редактированию оригинального вопроса, чтобы вы могли видеть, где я напортачиваюсь :) – Seer

Большое спасибо за время и силы - был в отпуске со времени последнего сообщение так извините за задержку! Последний код интересен наверняка, и как только я оберну свою голову, я почти понимаю это. Три вопроса очевидны. 1. Все результаты синхронизации выходят как 0ms 2. Некоторые домены игнорируются, например. http://www.google.co.uk просто не обрабатывается. 3. Никакие iframe не отображаются - только результаты (iframes будут хорошей возможностью для поставщиков видеть, что их контент также загружается правильно. Я буду копаться в некоторых журналах сейчас, и если я найду что-нибудь в следующем комментарии – Seer

Использование нового API javascript performance.timing для iframe?

ответ

Смежные вопросы