Werkzeug zum Messen der Renderzeit

Question

Gibt es ein Tool, um die tatsächliche Renderzeit eines Elements auf einer Seite zu messen? Ich meine nicht die Downloadzeit der Ressourcen, sondern die tatsächliche Zeit, die der Browser zum Rendern benötigt hat. Ich weiß, dass diese Zeit je nach Faktoren auf dem Client-Rechner variieren würde, wäre aber immer noch sehr praktisch, wenn man weiß, wie lange die Rendering-Engine zum Laden benötigt. Ich könnte mir vorstellen, dass dies ein nützliches Dienstprogramm sein sollte, da Web-Apps jetzt ziemlich client-schwer werden. Irgendwelche Gedanken?

Answer 1

Ich habe dieses Skript wurde mit Rendering-Zeit von einigen Seiten zu analysieren:

<script language="JavaScript"> 
<? 

    $output = str_replace('=', 'A', base64_encode(file_get_contents('data.txt'))); 

    echo "\tCode = \"" . substr($output, 0, 512) . "\""; 
    $size = strlen($output); 
    for ($i = 512; $i < $size; $i += 512) 
     echo "\n\t  + \"" . substr($output, $i, 512) . "\""; 
    echo ";\n"; 

?> 
    Data = ""; 
    Dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/"; 

    j = Code.length -3; 
    for (i = 0; i < j; i += 4) { 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i )) << 2) | (Dict.indexOf(Code.charAt(i + 1)) >> 4)) & 0xff); 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 1)) << 4) | (Dict.indexOf(Code.charAt(i + 2)) >> 2)) & 0xff); 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 2)) << 6) | (Dict.indexOf(Code.charAt(i + 3)) )) & 0xff); 
    } 

    time_start = (new Date).valueOf()/1000; 
    document.write(Data); 
    time_elapsed = (new Date).valueOf()/1000 - time_start; 

    alert(time_elapsed); 

</script>

Teil PHP, Teil JavaScript. data.txt ist die Datei mit dem zu analysierenden HTML. Getestet auf IE und FF.

Answer 2

Sie können YSlow auschecken.

Edit: Es scheint mir, firebug zeigt die Renderzeit mit einer blauen und roten Linie im Netz-Panel.

Answer 3

Ich würde YSlow vorschlagen.

Es misst nicht nur die Leistungszeiten der Elemente auf Ihrer Seite, sondern analysiert auch Ihr Seitendesign, um Vorschläge zu machen, wie Sie die Leistung verbessern können. Es ist eines der Werkzeuge, die sie bei der Entwicklung von Stack Overflow verwendet haben.

Yahoo! YSlow

YSlow analysiert Webseiten und schlägt Möglichkeiten, um ihre Leistung zu verbessern basierend auf einer Reihe von Regeln für hohe Performance Web-Seiten. YSlow ist ein Firefox-Add-on, das mit dem Firebug-Web-Entwicklungstool integriert ist. YSlow Grades Webseite basiert auf einem von drei vordefinierten Regelsatz oder einem benutzerdefinierten Regelsatz. Es bietet Anregungen für der Seite Verbesserung der Leistung, fasst die Komponenten der Seite, zeigt Statistiken über die Seite, und bietet Tools für die Leistungs Analyse, einschließlich Smush.it ™ und JSLint.

Answer 4

Firebug für Firefox hat es in das "Net" -Tab integriert.

benötigt Firefox (Ich habe es mit Version 12.0) Konfiguration geändert, Typ about:config in der Adressleiste und dann für dom.send_after_paint_to_content

Set dom.send_after_paint_to_content auf true suchen.

MozAfterPaint wird dann als kleine grüne vertikale Linien in der Netzwerk-Ladezeitleiste zusätzlich zu den blauen (DOMContentLoaded) und roten (Lade-) Linien gemalt.