Eine kurze Diskussion darüber, ob CSS das Rendern von Seiten blockiert

Vielleicht weiß jeder, dass die JS-Ausführung die Analyse und Darstellung des DOM-Baums blockiert. Blockiert also das Laden von CSS die Analyse und Darstellung des DOM-Baums? Lassen Sie es uns als Nächstes gemeinsam analysieren.

Prinzipanalyse

Warum also tritt das oben beschriebene Phänomen auf? Lassen Sie uns es anhand des Rendering-Prozesses des Browsers analysieren. Verschiedene Browser verwenden unterschiedliche Kernel, daher sind auch ihre Rendering-Prozesse unterschiedlich. Derzeit gibt es zwei Haupt

WebKit-Rendering-Prozess

Gecko-Rendering-Prozess

Aus den beiden Flussdiagrammen oben können wir ersehen, dass der Browser-Rendering-Prozess wie folgt abläuft:

HTML analysiert die Datei, um einen DOM-Baum zu generieren, und analysiert die CSS-Datei, um einen CSSOM-Baum zu generieren
Kombinieren Sie Dom Tree und CSSOM Tree, um Render Tree zu generieren
Das Rendering erfolgt gemäß dem Renderbaum, wobei Pixel auf dem Bildschirm gerendert werden.

Aus dem Prozess können wir sehen

DOM-Parsing und CSS-Parsing sind zwei parallele Prozesse. Dies erklärt auch, warum das Laden von CSS das DOM-Parsing nicht blockiert.
Da Render Tree jedoch von DOM Tree und CSSOM Tree abhängt, muss es warten, bis CSSOM Tree erstellt ist, d. h. bis die CSS-Ressourcen geladen sind (oder das Laden der CSS-Ressourcen fehlgeschlagen ist), bevor es mit dem Rendern beginnen kann. Daher wird das Laden von CSS die Dom-Wiedergabe blockieren.
Da JS möglicherweise vorherige Dom-Knoten und CSS-Stile bedient, behält der Browser die Reihenfolge von CSS und JS in HTML bei. Daher wird das Stylesheet geladen und ausgeführt, bevor das nachfolgende JS ausgeführt wird. Daher blockiert CSS die Ausführung nachfolgender JS.

DOMContentLoaded

Für Browser gibt es zwei Hauptereignisse zum Laden von Seiten: eines ist DOMContentLoaded und das andere ist onLoad. Zu onLoad gibt es nicht viel zu sagen. Es wird erst ausgelöst, nachdem alle Ressourcen der Seite geladen sind. Zu diesen Ressourcen gehören CSS, JS, Bilder, Videos usw.

DOMContentLoaded wird, wie der Name schon sagt, ausgelöst, wenn der Inhalt der Seite analysiert wird. Wie wir oben besprochen haben, blockiert CSS die Dom-Darstellung und die JS-Ausführung, und JS blockiert die Dom-Analyse. Dann können wir davon ausgehen, dass

Wenn auf der Seite nur CSS vorhanden ist oder JS vor CSS platziert wird, muss DomContentLoaded nicht warten, bis CSS geladen ist.
Wenn die Seite sowohl CSS als auch JS enthält und JS hinter CSS liegt, muss DomContentLoaded warten, bis sowohl CSS als auch JS geladen sind, bevor es ausgelöst wird.

Testen wir zunächst den ersten Fall:

<!DOCTYPE html>
<html lang="de">
 <Kopf>
 <title>CSS-Blockierung</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
 <Skript>
 document.addEventListener('DOMContentLoaded', Funktion() {
 console.log('DOMContentLoaded');
 })![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d30219afd9e84bc99875991b7d284435~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87519598e6484ec38db8daed23f586c9~tplv-k3u1fbpfcp-zoom-1.image)
 </Skript>
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
 </Kopf>
 <Text>
 </body>
</html>

Die experimentellen Ergebnisse sind wie folgt: Aus dem animierten Bild können wir erkennen, dass das Ereignis DOMContentLoaded ausgelöst wurde, bevor das CSS geladen wurde. Weil hinter dem CSS kein JS-Code steckt.

Als nächstes testen wir den zweiten Fall. Er ist ganz einfach. Fügen Sie einfach eine Codezeile nach dem CSS hinzu.

<!DOCTYPE html>
<html lang="de">
 <Kopf>
 <title>CSS-Blockierung</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
 <Skript>
 document.addEventListener('DOMContentLoaded', Funktion() {
 console.log('DOMContentLoaded');
 })
 </Skript>
 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
 <Skript>
 console.log('Bin ich schon dran?');
 </Skript>
 </Kopf>
 <Text>
 </body>
</html>

Wir können sehen, dass das Ereignis DOMContentLoaded erst ausgelöst wird, nachdem das Laden des CSS abgeschlossen ist. Daher können wir Folgendes schlussfolgern:

Wenn die Seite sowohl CSS als auch JS enthält und JS hinter CSS liegt, wird das Ereignis DOMContentLoaded ausgeführt, nachdem CSS geladen wurde.
In anderen Fällen wartet DOMContentLoaded nicht auf das Laden von CSS und das Ereignis DOMContentLoaded wartet nicht auf das Laden anderer Ressourcen wie Bilder und Videos.

Zusammenfassen

Aus dem oben Gesagten können wir folgende Schlussfolgerungen ziehen:

Das Laden von CSS blockiert nicht die Analyse des DOM-Baums
Das Laden von CSS blockiert die Darstellung des DOM-Baums
Das Laden von CSS blockiert die Ausführung nachfolgender JS-Anweisungen

Um zu vermeiden, dass Benutzer lange Zeit einen weißen Bildschirm sehen, sollten wir die CSS-Ladegeschwindigkeit so weit wie möglich erhöhen, beispielsweise mithilfe der folgenden Methoden:

Verwenden Sie CDN (weil CDN den nächstgelegenen Knoten mit zwischengespeicherten Inhalten auswählt, um Ihnen Ressourcen basierend auf Ihren Netzwerkbedingungen bereitzustellen und so die Ladezeit zu verkürzen)
CSS komprimieren (Sie können zahlreiche Verpackungstools wie Webpack, Gulp usw. verwenden oder die GZIP-Komprimierung aktivieren)
Verwenden Sie den Cache richtig (das Festlegen von Cache-Steuerung, Ablaufdatum und E-Tag ist gut, aber beachten Sie, dass Sie nach der Aktualisierung der Datei die Auswirkungen des Caches vermeiden müssen. Eine Lösung besteht darin, nach dem Dateinamen eine Versionsnummer hinzuzufügen).
Reduzieren Sie die Anzahl der HTTP-Anfragen, fügen Sie mehrere CSS-Dateien zusammen oder schreiben Sie sie einfach inline (ein Nachteil von Inline-Styles ist, dass sie nicht zwischengespeichert werden können).

Dies ist das Ende dieses Artikels darüber, ob CSS die Seitendarstellung blockiert. Weitere Informationen dazu, wie CSS die Seitendarstellung blockiert, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)

>>: Details zu den Überwachungseigenschaften der Uhr in Vue

Detaillierte Erläuterung der Installation und Konfiguration des Redis- und phpredis-Erweiterungsvorgangs im Ubuntu 18.04-System

Artikel

Komprimierungs- und Optimierungsvorgänge für Docker-Images

Ein vollständiges Beispiel für die Abfrage von Batchdaten aus einer Tabelle durch MySQL und deren Einfügen in eine andere Tabelle

Sag es im Voraus Nodejs liest die Datenbank als a...

Eine kurze Diskussion darüber, ob CSS das Rendern von Seiten blockiert

Detaillierte Erläuterung der Installation und Konfiguration des Redis- und phpredis-Erweiterungsvorgangs im Ubuntu 18.04-System

Komprimierungs- und Optimierungsvorgänge für Docker-Images

Schritte zum Initialisieren des Passworts nach der ersten erfolgreichen Installation von MySQL

Ideen und Codes zur Realisierung des Lupeneffekts in js

Die perfekte Lösung für die Installation von MYSQL5.7.24 ohne Datenverzeichnis und my-default.ini und Dienststartfehler

So legen Sie den Produktionsumgebungsmodus process.env.NODE_ENV fest

Der Unterschied zwischen zwei MySQL-Anweisungen zum Löschen von Benutzern (Benutzer löschen und Benutzer löschen)

Vue implementiert einen Einkaufswagen, der die Einkaufsmenge ändern kann

Ausführliches Installationstutorial für MySQL Installer Community 5.7.16

So verarbeiten Sie lokal dynamisch geladene Bilder in Vue

Artikel empfehlen

Eine kurze Diskussion über verschiedene Möglichkeiten zur Implementierung einer Front-End-JS-Sandbox

CSS setzt Overflow, um die Bildlaufleiste auszublenden und gleichzeitig das Scrollen zu ermöglichen

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Mehrere Möglichkeiten, Axios in Vue zu kapseln

Ein vollständiges Beispiel für die Abfrage von Batchdaten aus einer Tabelle durch MySQL und deren Einfügen in eine andere Tabelle

Verständnis für Webdesign-Layout

So verwenden Sie Axios-Anfragen im Vue-Projekt

So optimieren Sie eine Website, um die Zugriffsgeschwindigkeit zu erhöhen Update

Lösungen für den Fehler und die Ungültigkeit beim Öffnen von nginx.pid

Verwenden Sie Element+vue, um Start- und Endzeitlimits zu implementieren

Gründe, warum MySQL-Abfragen langsam sind

Implementierung der Leistungsoptimierung des Element-Shuttle-Frames

Detaillierte Erklärung des Unterschieds zwischen JavaScript onclick und click

Über das durch die HTML-Kodierung verursachte verstümmelte Problem

Zwei Möglichkeiten zum Zurücksetzen des Root-Passworts einer MySQL-Datenbank mit lnmp