1. Die Reihenfolge der IE -Downloads erfolgt von oben nach unten und die Reihenfolge des Renderings erfolgt auch von oben nach unten. Download und Rendering werden gleichzeitig durchgeführt.
2. Beim Rendern eines Teils der Seite wurden alle oben genannten Teile heruntergeladen (nicht alle zugehörigen Elemente wurden heruntergeladen).
3. Wenn Sie auf eine semantische Interpretations -Tag -Einbettdatei (JS -Skript, CSS -Stil) stoßen, aktiviert der IE -Download -Prozess eine separate Verbindung zum Herunterladen.
4. Nach dem Download des Stylesheets wird es mit allen zuvor heruntergeladenen Stilblättern analysiert. Nach Abschluss des Parsens werden alle früheren Elemente (einschließlich derjenigen, die zuvor gerendert wurden) erneut gerendert.
5. Wenn in JS und CSS eine Neudefinition vorliegt, überschreibt die spätere Definitionsfunktion die vorherige Definitionsfunktion.
Laden von js1. kann nicht parallel herunterladen und analysieren (Blocking Download).
2. Wenn auf JS verwiesen wird, sendet der Browser eine JS -Anfrage und wartet auf die Rückgabe der Anfrage. Da der Browser eine stabile Dom -Baum -Struktur benötigt, ist es sehr wahrscheinlich, dass es gibt
Der Code ändert direkt die DOM -Baumstruktur, z. B. die Verwendung von Document.write oder AppendChild oder sogar direkt mit Ort.reif für Sprünge. Um zu verhindern, dass JS -Reparaturen auftreten, ist der Browser
Um den DOM -Baum zu ändern, ist es erforderlich, den DOM -Baum wieder aufzubauen, damit andere Downloads und Renderings blockiert werden.
So beschleunigen Sie die HTML -Seite Laden1. Seite Gewichtsverlust:
A. Das Gewicht der Seite ist der wichtigste Faktor, der die Ladegeschwindigkeit beeinflusst.
B. Löschen Sie unnötige Räume und Kommentare.
C. Verschieben Sie das Inline -Skript und CSS in externe Dateien.
D. Sie können HTML Tidy verwenden, um für HTML Gewicht zu verlieren, und Sie können auch einige Komprimierungswerkzeuge verwenden, um für JavaScript Gewicht zu verlieren.
2. Reduzieren Sie die Anzahl der Dateien:
A. Durch die Reduzierung der auf der Seite verwiesenen Dateien können Sie die Anzahl der HTTP -Verbindungen verringern.
B. Viele JavaScript- und CSS -Dateien können zusammengeführt werden, und es ist am besten, sie zu verschmelzen. Caibangzi hat ihr JavaScript zusammengeführt. Funktionen und Prototypen.js in eine Base.js -Datei.
3..
A. DNS -Abfragen und analysierte Domain -Namen verbrauchen auch Zeit, sodass wir den Hinweis auf externe JavaScript, CSS, Bilder und andere Ressourcen verringern müssen. Je weniger Sie unterschiedliche Domainnamen verwenden, desto besser.
4.. Cache -Wiederverwendung von Daten:
A. Cache wiederverwenden Daten.
5. Optimieren Sie die Ladereihenfolge der Seitenelemente:
A. Laden Sie zuerst den ursprünglich auf der Seite angezeigten Inhalt und den damit verbundenen JavaScript und CSS und laden Sie dann HTML-bezogene Dinge, wie z.
6. Reduzieren Sie die Anzahl der Inline -JavaScript:
A. Der Browser -Parser geht davon aus, dass Inline -JavaScript die Seitenstruktur ändert. Die Verwendung von Inline -JavaScript ist daher teuer.
B. Verwenden Sie nicht document.write (), eine Methode zur Ausgabe von Inhalten, verwenden Sie moderne W3C -DOM -Methoden, um Seiteninhalte für moderne Browser zu verarbeiten.
7. Verwenden Sie moderne CSS und legale Tags:
A. Verwenden Sie moderne CSS, um Etiketten und Bilder zu reduzieren. Beispielsweise kann die Verwendung moderner CSS+ -Text einige nur einige Textbilder ersetzen.
B. Verwenden Sie rechtliche Tags, um Fehlerkorrekturen und andere Operationen zu vermeiden, wenn der Browser HTML analysiert. Sie können auch HTML Tidy verwenden, um für HTML Gewicht zu verlieren.
8. Chunk deinen Inhalt:
A. Verwenden Sie keine verschachtelten Tabellen, sondern nicht Nestnested Tabellen oder Divs. Zersetzen Sie das Layout der Tabelle, die auf großen Stücken verschachtelter Tabellen in mehrere kleine Tische basieren, sodass Sie nicht warten müssen, bis der gesamte Inhalt der gesamten Seite (oder der großen Tabelle) geladen wird, bevor sie angezeigt wird.
9. Geben Sie die Größe des Bildes und der Tabelle an:
A. Wenn der Browser die Größe des Bildes oder der Tabelle sofort bestimmen kann, kann die Seite sofort angezeigt werden, ohne eine Layoutanordnung neu auszusetzen.
B. Dies beschleunigt nicht nur die Anzeige der Seite, sondern verhindert auch einige unsachgemäße Änderungen im Layout, nachdem die Seite geladen wurde.
C. Bild verwendet Größe und Breite.
HTML -Seite Lade- und Parsenprozess1. Der Benutzer tritt in die URL ein (vorausgesetzt, es handelt sich um eine HTML -Seite und das erste Mal, dass Sie darauf zugreifen), der Browser gibt eine Anforderung an den Server aus, und der Server gibt die HTML -Datei zurück.
2. Der Browser lädt den HTML -Code und stellt fest, dass in der <kopf> -T -Tag ein <Link> -Tag über die externe CSS -Datei verweist.
3. Der Browser gibt eine Anfrage für die CSS -Datei aus, und der Server gibt die CSS -Datei zurück.
4. Der Browser lädt den <body> -Teil des Codes in der HTML weiterhin, und die CSS -Datei wurde erhalten, sodass Sie die Seite mit dem Rendern der Seite beginnen können.
5. Der Browser fand ein <img> -Tag im Code, der auf ein Bild Bezug genommen und an den Server angewendet wurde. Zu diesem Zeitpunkt wird der Browser nicht warten, bis das Bild heruntergeladen wird, sondern den nachfolgenden Code weiterhin rendert.
6. Der Server gibt die Bilddatei zurück. Da das Bild einen bestimmten Bereich einnimmt, wirkt es sich auf die Anordnung der nachfolgenden Absätze aus, sodass der Browser zurückgehen und diesen Teil des Codes erneut rendern muss.
7. Der Browser fand ein <skript> -Tag, das eine Zeile von JavaScript -Code enthielt, und führte es schnell aus.
8. Das JavaScript -Skript führt diese Anweisung aus, die den Browser befiehlt, einen <style> (style.display = Keine) im Code zu verbergen. Schade, plötzlich fehlt ein solches Element, und der Browser muss diesen Teil des Codes erneut rendern.
9. Schließlich wartete ich auf die Ankunft von </html>, und der Browser brach in Tränen aus ...
10. Warten Sie, es ist noch nicht vorbei. Der Benutzer klickte auf die Schaltfläche Skinning in der Schnittstelle, und JavaScript forderte den Browser auf, den CSS -Pfad des <Link> -Tags zu ändern.
11. Der Browser hat alle hier versammelt, alle haben sein Gepäck gepackt, wir müssen es noch einmal tun ... Der Browser forderte eine neue CSS-Datei vom Server an und rendern die Seite erneut.