Blockiert CSS an Parsen und Rendering? Eine detaillierte Analyse

CSS Lade, Analyse und Anwendung bei der Optimierung der Webseitenleistung: Ein Schlüsselthema

Die Lade, Analyse und Anwendung von CSS sind die wichtigsten Links der Webleistungoptimierung. Das Verständnis dieses Prozesses ist für die Optimierung der Ladezeit des Seitens und der Verbesserung der Benutzererfahrung unerlässlich. Im Folgenden wird die Analyse und das Rendering des CSS untersucht, um den DOM und den dahinter stehenden Mechanismus zu blockieren.

CSS -Last und DOM -Parsing

Dom Parsing

Die Analyse

DOM (Dokumentobjektmodell) bezieht sich auf den Prozess des Browsers, der den empfangenen HTML -Byte -Fluss in den DOM -Baum umwandelt.

Während der Analyse des HTML -Dokuments wird versucht, die Ressourcen parallel herunterzuladen und das Dokument gleichzeitig weiter zu analysieren, wenn der Parser auf nicht blockierende Ressourcen (z. B. asynchrones Skript) stößt.
• blockiert CSS die DOM -Analyse?

CSS selbst blockiert keine DOM -Analyse. Mit anderen Worten, der Browser wird weiterhin HTML analysieren und einen DOM -Baum erstellen.

CSS blockiert jedoch die DOM -Rendering und die Ausführung von JavaScript. Dies bedeutet, dass der Browser, obwohl der DOM -Baum konstruiert werden kann, vor der Analyse des relevanten CSS (dh dem CSSOM -Baum) keine Rendering -Operationen durchführt. Dies soll sicherstellen, dass die Seite auf dem Bildschirm korrekt angezeigt wird, um erneut zu arrangieren und zu erledigen.
• Wenn der Browser HTML analysiert, um den DOM -Baum zu generieren, lädt er auch CSS -Dateien parallel herunter und erstellt ein CSSOM (CSS -Objektmodell). Die Konstruktion von DOM und CSSOM erfolgt gleichzeitig, was bedeutet, dass der Download und die Analyse von CSS die Konstruktion des DOM nicht blockieren.

CSSOM Tree und Rendering

cssom Baum

CSSOM (CSS -Objektmodell) ist eine Datenstruktur, die parallel zum DOM ist und alle CSS -Informationen auf der Seite enthält. Der Browser baut ihn ein Rendering -Baum auf.

Wenn der Browser
• Tags oder
-Tags auf
• -Tags begegnet wird, wird das Laden und Parsen von CSS eingestellt und einen CSSOM -Baum erstellt. <link></link> <style>
Die Konstruktion des Renderingbaums

Der Rendering -Baum ist das Ergebnis der Kombination des Dombaums und des CSSOM -Baumes, was bedeutet, dass der Browser gerendert wird.

• Bevor der CSSOM -Baum abgeschlossen ist, kann der Rendering -Baum nicht konstruiert werden, da der Rendering -Baum die Stilinformationen aller DOM -Elemente erfordert.
Dieser Prozess kann durch ein Diagramm dargestellt werden:

Warum lädt CSS JavaScript JavaScript?

1. Stellen Sie sicher, dass genaue Stilberechnungen : Wenn JavaScript versucht, den DOM zu ändern oder den Stil zu berechnen, wenn das CSS nicht vollständig geladen und analysiert wird, kann die von JavaScript abgerufenen Stilinformationen möglicherweise ungenau sein. Um dies zu vermeiden, stellt der Browser sicher, dass alle relevanten CSS vor der Ausführung von JavaScript geladen und analysiert werden, damit das Drehbuch -Abrufen des endgültigen Stils des DOM -Elements.
Vermeiden Sie die Re -arrangement- und reacking
2. : Wenn JavaScript ausgeführt wird, wenn das CSSOM unvollständig ist, kann es die DOM basierend auf unvollständigen Informationen ändern. Sobald das CSSOM abgeschlossen ist, muss der Browser möglicherweise die gerenderten Elemente wieder herstellen und neu zeichnen, um die Renderungseffizienz erheblich zu verringern. Die Abhängigkeit von der Analysereihenfolge
: Während des HTML -Parsens beginnt das Browser, wenn das Browser auf das
3. -Tag trifft, sofort mit dem Laden von CSS. Wenn es auf Tags (nein oder Attribute) begegnet wird, wird die DOM -Parsen ausgesetzt, um das Skript auszuführen. Wenn das CSS nicht vollständig geladen ist, hängt die Skriptausführung von unvollständigen Informationen zur Stil ab. Daher wartet der Browser auf das Skript, bevor CSSOM fertig ist. <link href="..." rel="stylesheet"></link> <script> async CSS in JavaScript schreiben wird die DOM -Rendering blockieren? defer
Wenn Sie einen CSS -Stil in JavaScript schreiben, blockiert das DOM -Rendering je nach Anwendungsmethode und Zeit des Stils. Dies beinhaltet den Rendering -Prozess des Browsers, insbesondere die Beziehung zwischen JavaScript, CSS und DOM. Lassen Sie es uns ausführlich besprechen:

Ändern Sie direkt den Elementstil

Wenn der CSS -Stil direkt angewendet wird, indem die

-attribute des DOM -Elements in JavaScript (z. B.

) geändert werden, blockieren solche Vorgänge die DOM -Analyse normalerweise nicht. Sie können jedoch den Rendering -Prozess blockieren, da der Browser den Stil neu kalkulieren und die Wiedereinstellung und die Rücklagerung auslösen kann:

style Restaurant element.style.color = 'red';: Wenn die Größe, Struktur oder bestimmte Attribute des Elements auftreten, muss der Browser ihre Position und Größe neu kalkulieren.

Zeichnen
• : Wenn sich das visuelle Erscheinungsbild des Elements ändert (z. B. Farbe oder Rand), jedoch seine Größe oder Struktur nicht beeinflusst, zeigt dies den Browser an, um Elemente wieder zu ziehen.
Dynamisches Insertion oder
• Etikett Wenn JavaScript
oder

Tags zu

dynamisch hinzugefügt wird, wirkt sich dies auf das Rendering aus: <style>

• Rendering Block : Der Browser muss suspendiert werden, um die neu eingefügten CSS -Regeln zu analysieren, bevor sie weiterhin rendern können. Dies kann zu einer schweren Rendering -Verzögerung führen, insbesondere wenn die CSS -Datei groß ist oder die Netzwerkbedingung nicht gut ist.
Leistungswirkung
• : Wiederholter Betrieb, wie z. B. das Einfügen von -Tags in den Zyklus, kann zu einer doppelten Umschnackung und Wiederholung führen, was die Leistung der Seite ernsthaft beeinflusst. <style>
CSS in JavaScript ist nicht ordnungsgemäß behindert oder verzögert das Dom -Rendering, insbesondere wenn dynamische Erzeugung und Anwendungsstil.

Schlussfolgerung

Obwohl die CSS -Belastung die DOM -Analyse nicht blockiert, blockiert sie die DOM -Rendering. Das CSS -Laden blockiert auch das Follow -up des Follow -up -JavaScript.

Wir sind Leapcell, Ihr Host Node.js -Projekt ist die erste Wahl.

---

Leapcell wird für Web -Sorgerecht, asynchrone Aufgabe und Redis -nächste Generation ohne Serverplattform verwendet:

Multi -Sprache -Unterstützung

Verwenden Sie Node.js, Python, Go oder Rost for Development.

Kostenlose Bereitstellung unbegrenzter Projekte

Sie müssen nur die Anwendungsgebühr -Anfrage zahlen, keine Gebühr.

beispiellose Kostenvorteile

bezahlt nach Gebrauch, es gibt keine Leerlaufkosten.

zum Beispiel: 25 USD unterstützt 6,94 Millionen Anfragen mit einer durchschnittlichen Reaktionszeit von 60 Millisekunden.

vereinfachte Entwickler erfahren

• intuitive Benutzeroberfläche, einfache Einstellungen.

Vollautomatische CI/CD -Pipeline und Gitops -Integration.

Real -Time -Indikatoren und Protokolldatensätze bieten operative Erkenntnisse.

Einfache Expansion und hohe Leistung
Automatische Erweiterung, um leicht hoch und fusioniert zu handhaben.
Null Betriebskosten -Fokus nur auf den Bau.

Weitere Informationen im Dokument finden Sie!

• Folgen Sie unserem x: @leapcellhq
Lesen Sie unseren Blog

Das obige ist der detaillierte Inhalt vonBlockiert CSS an Parsen und Rendering? Eine detaillierte Analyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!