Lesezeit in der Registerkarte Firebug Net berichtet

Question

diesen Screenshot von Firebug Net Registerkarte Siehe:

http://www.scdi.org/~avernet/try/firefox-times.png

Ich weiß, dass:

• Die Zeit zwischen 1 und 2 ist die Zeit, um meine genommen ist durch App, um den HTML-Code zu generieren und die Daten zum Browser zu gelangen.
• Die Zeit zwischen 3 und 4 ist die Zeit, die mein JavaScript-Initialisierungscode benötigt, der auf DOMContentLoaded ausgeführt wird.

Aber was ist mit der Zeit zwischen 2 und 3? Ist das die Zeit, die Firefox benötigt, um die Seite zu "rendern"? In diesem Fall ist es ziemlich wichtig (etwa 1,5 Sekunden). Wie kann ich dieses Teil optimieren?

Answer 1

Die Zeit zwischen 2-3 ist der Browser analysieren und Rendern der Inhalte der Datei zwischen 1-2 heruntergeladen. Dies schließt den gesamten HTML-Code und alle Inline-CSS- oder JavaScript-Dateien ein. Die einfachste Möglichkeit, dies zu verkürzen, ist 1) senden weniger Daten für den Browser zu analysieren 2) stellen Sie sicher, dass Ihr HTML/CSS validiert und 3) für wirklich langsam CSS-Regeln/Ausdrücke.

Im Allgemeinen konzentrieren sich die meisten Leute nicht darauf, wie lange es dauert, bis der Browser die Seite vollständig rendert, sondern wie schnell er auf der Client-Seite zu rendern beginnt. Im Allgemeinen als progressives Rendering bezeichnet, ermöglicht es dem Browser, Teile der Seite anzuzeigen, bevor die gesamte Seite gerendert wurde. Einer der häufigsten Gründe, warum dies nicht geschieht, besteht darin, den Inhalt der Seite in eine Datei einzufügen, die verhindert, dass der Browser sie so lange rendert, bis sie vollständig analysiert wurde. This post hat einige gute Tipps, wie man das macht. Sie möchten wahrscheinlich die Firefox-Erweiterung YSlow betrachten, die Ihnen einige gute Tipps geben kann, wie Sie Ihre Website schneller machen können.