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

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

Artikel empfehlen

Einführung in die JWT-Verifizierung mit Nginx und Lua

Inhaltsverzeichnis Vorwort Lua-Skript nignx.conf-...

Zusammenfassung des Wissens zu MySQL-Sperren

Sperren in MySQL Sperren sind ein Mittel, um Ress...

Zweistündiges Docker-Einführungstutorial

Inhaltsverzeichnis 1.0 Einleitung 2.0 Docker-Inst...

Detaillierte Erklärung der Unterschiede zwischen px-, em-, rem-, %, vw- und vh-Einheiten in CSS

1. px px ist die Abkürzung für Pixel, eine relati...

Erstellen Sie mit PS in zwei Minuten eine Homepage für eine XHTML+CSS-Website

Es gibt zu viele Artikel über Webstandards zur We...

Der visuelle Designpfad der Website sollte den Benutzergewohnheiten entsprechen

Cooper sprach über den visuellen Pfad des Benutze...

Detaillierter Prozess zum Ändern der Apt-Quelle in die Alibaba Cloud-Quelle in Ubuntu 18.04

Inhaltsverzeichnis Vorwort: Ubuntu 18.04 ändert d...

Eine kurze Diskussion zu DDL und DML in MySQL

Inhaltsverzeichnis Vorwort 1. DDL 1.1 Datenbankop...

JavaScript imitiert die Spezialeffekte der Jingdong-Lupe

In diesem Artikel wird der spezifische Code von J...

js Implementierung des Verifizierungscode-Falls

In diesem Artikelbeispiel wird der spezifische Co...

So implementieren Sie die Seiten-Screenshot-Funktion in JS

„Seiten-Screenshot“ ist eine Anforderung, die häu...

Verwendung der MySQL DATE_FORMAT-Funktion

Angenommen, Taobao animiert die Leute zum Einkauf...

Vue implementiert grafischen Überprüfungscode

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung der MySQL-Syntax, Sonderzeichen und regulären Ausdrücke

Häufig verwendete Anzeigebefehle für MySQL 1. Zei...

Lösung für Ubuntu, das keine Verbindung zum Internet herstellen kann

Problembeschreibung: Ich habe einen Desktop-Compu...