Tool zum Messen der Render-Zeit

Gibt es ein tool gibt, zur Messung der tatsächlichen Render-Zeit für Sie ein element(s) auf einer Seite? Ich meine nicht die download-Zeit der Ressourcen, sondern die tatsächliche Zeit, die der browser nahm das Rendern etwas. Ich weiß, dass diese Zeit variieren, basierend auf Faktoren, die auf dem client-Rechner, würde aber trotzdem sehr nützlich sein, zu wissen, was die rendering-engine dauert eine Weile zum laden. Ich könnte mir vorstellen, dies sollte ein nützliches Dienstprogramm, da web-apps sind immer ziemlich client schwer jetzt. Irgendwelche Gedanken?

InformationsquelleAutor | 2009-08-24

  1. 0

    Ich habe mit diesem Skript zu analysieren, rendering-Zeit von einigen Seiten:

    <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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

    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 -, JavaScript-Teil. data.txt ist die Datei mit dem HTML-Code zu analysieren.
    Getestet auf IE und FF.

    Süßer Mann. Ich werde check it out. Danke.
    PS: Es wird nicht überlegen, benötigte Zeit zum laden von verlinkten Ressourcen, wie externe .CSS-Dateien oder Bilder, es sei denn, du bist mit mod_expire auf Sie. Vielleicht möchten Sie Haken Sie das Dokument.Körper.onload auch, aber dann wird das Ergebnis auch variieren, indem Sie die Geschwindigkeit Ihrer Internetverbindung und Latenz.

    InformationsquelleAutor Havenard

  2. 3

    Können Sie aus YSlow.

    Edit: Es scheint mir, dass firebug zeigt die rendering-Zeit mit einem blauen und roten Linie im net-panel.

    Ich schaute auf YSlow. Es gibt Ihnen einen Gesamtüberblick über die Leistung, Ladezeiten und cache-Statistiken, aber nichts darüber, wie lange ein bestimmtes element nahm zu Rendern, soweit ich sah. Bin ich etwas fehlt?
    Es macht nur Vorschläge, einige DOM-Elemente entfernt werden. Ich glaube, dass eigentliche rendering-Zeiten ziemlich viel, hängt vom browser.

    InformationsquelleAutor Zed

  3. 2

    Ich würde vorschlagen, YSlow.

    Es misst nicht nur die Leistung die Zeiten der Elemente in der Seite, sondern es analysiert auch zum design Ihrer Seite zu schlagen, wie Sie können performance-Verbesserungen. Es ist eines der Werkzeuge, die Sie verwendet in der Entwicklung von Stack Overflow.

    Yahoo! YSlow

    YSlow analysiert Webseiten und schlägt
    Möglichkeiten, um Ihre Leistung zu verbessern
    basierend auf einem Satz von Regeln für hohe
    Leistung web-Seiten. YSlow ist ein
    Firefox-add-on integriert, mit dem
    Firebug-web-Entwicklung-tool. YSlow
    Sorten web-Seite basiert auf einer der drei
    vordefinierte Regelsatz oder eine Benutzer-definierte
    Regelsatz. Es bietet Anregungen für
    Verbesserung der Seite Leistung,
    fasst der Seite Komponenten,
    zeigt Statistiken über die Seite,
    und bietet tools für performance
    Analyse, einschließlich Smush.es™ und
    JSLint.

    Wie kann ich die Leistung mal die Elemente auf der Seite mit YSlow? Ich habe versucht, auf der Suche nach es, kann es nicht finden...

    InformationsquelleAutor Robert Cartaino

  4. 1

    Firebug für Firefox hat es integriert in die "Net"-Registerkarte.

    Braucht Firefox (ich habe es mit version 12.0) - Konfiguration geändert, geben Sie about:config in der Adresszeile und suchen Sie dann nach dom.send_after_paint_to_content

    Set dom.send_after_paint_to_content zu wahren.

    MozAfterPaint wird dann gemalt, als kleine grüne vertikale Linien in das Netzwerk laden timeline zusätzlich zu den blauen (DOMContentLoaded) und rot (laden) Linien.

    ich habe eingestellt, dom.send_after_paint_to_content = true im FF 19.0.2 aber bekomme keine grüne Linie....?!

    InformationsquelleAutor pl1

Schreibe einen Kommentar