Verwenden Sie die neue JavaScript-API "performance.timing" für Iframes?

Ich habe mit der neuen performance.timing Javascript API gespielt und bin ziemlich beeindruckt von ihnen.Verwenden Sie die neue JavaScript-API "performance.timing" für Iframes?

Eine gute Beschreibung hier http://www.html5rocks.com/en/tutorials/webperformance/basics/

Ich habe einen wichtigen Anwendungsfall für das das ist, wo wir können die Welt eine einfache Seite, die Tester um einen Doppelklick auf und von, sagen sie, 20 URL bekommen Leistung machen müssen den von unsere Website von ihren verschiedenen Standorten auf der ganzen Welt.

Unsere Website ist nicht HTML5, also können wir so etwas nicht direkt in unsere Seiten einbetten (mit einer Milliarde Seiten pro Monat würden wir sowieso nicht so viele Daten haben). Mein Grundplan ist also eine einfache Wrapper-HTML-Seite mit dem Skript, das die 20 URLs in Iframes lädt. Ja ich weiß! iframes saugen, aber dieses Ding muss nicht hübsch sein, nur effektiv!

Javascript ist definitiv nicht meine Stärke! Also brauche ich Hilfe, wie ich diese Daten für jeden unabhängigen Iframe bekommen könnte (und natürlich bin ich daran interessiert, andere Methoden zu hören, wenn Sie eine bewährte haben).

Um einen Ihnen eine sehr einfache Ansicht zu geben, wie es funktioniert (nur in Chrome und IE9 so weit denke ich)

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

Mit @ Mawi12345 ‚s Idee, die ich bin versuchen, die folgenden:

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

Quelle

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>

ps: performance.timing funktioniert auch in Firefox.

Edit:

Bitte versuchen Sie den neuen Code für 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>

Quelle

2012-03-30 14:13:02 windm

sieht gut aus zu einem Punkt :) Wenn ich dort eine einzige Funktion haben in i gültig perf Daten erhalten von der Konsole. Aber sobald es mehr als einen gibt, bekomme ich alle Nullen – Seer

den Code zu einer Bearbeitung der ursprünglichen Frage hinzugefügt, so dass Sie sehen können, wo ich vermasseln bin :) – Seer

Vielen Dank für die Zeit und Mühe - war im Urlaub seit dem letzten Verzeihung wegen Verspätung! Der neueste Code ist sicher interessant und sobald ich meinen Kopf eingewickelt habe, verstehe ich es fast. Drei Dinge sind offensichtlich. 1. Alle Timing-Ergebnisse werden als 0 ms 2 ausgegeben. Einige Domänen werden z. http://www.google.de scheint einfach nicht verarbeitet zu werden. 3. Es werden keine Iframes angezeigt - nur die Ergebnisse (die Iframes werden eine gute Funktion für die Provider sein, um ihren Inhalt zu sehen, wird auch korrekt geladen. Ich werde jetzt in ein paar Logs graben und wenn ich etwas Ill finden im nächsten Kommentar – Seer

Verwenden Sie die neue JavaScript-API "performance.timing" für Iframes?

Antwort

Verwandte Themen