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

Beispielcode zur Verwendung der Elementkalenderkomponente in Vue

Schauen Sie sich zunächst das Wirkungsdiagramm an...

JS implementiert das Ziehen des Fortschrittsbalkens, um die Transparenz von Elementen zu ändern

Was ich heute teilen möchte, ist die Verwendung v...

MySQL-Lernhinweise: Vollständiges Verwendungsbeispiel für Select-Anweisungen, detaillierte Erläuterung

Dieser Artikel veranschaulicht anhand eines Beisp...

Beispielanalyse der Intervallberechnung von MySQL-Datum und -Uhrzeit

Dieser Artikel beschreibt anhand eines Beispiels ...

So verwenden Sie Nginx als Proxy-Cache

Der Zweck der Cache-Verwendung besteht darin, den...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20 winx64

In diesem Artikel erfahren Sie mehr über die Inst...

VUE implementiert eine Timeline-Wiedergabekomponente

In diesem Artikelbeispiel wird der spezifische Co...

Bild-Tag für HTML-Webseite

Bild-Tag <IMG> einfügen Die farbenfrohen Web...

Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet

Vorwort Manchmal habe ich das Gefühl, dass die na...

Die Fallstricke bei der Bereitstellung von Angular-Projekten in Nginx

Wenn man online nach Methoden sucht, um Angular -...

Spezifische Verwendung von Docker Anonymous Mount und Named Mount

Inhaltsverzeichnis Datenvolumen Anonyme und benan...

Der Unterschied und die Verwendung von LocalStorage und SessionStorage in Vue

Inhaltsverzeichnis Was ist LocalStorage Was ist S...

Grundlegendes Installationstutorial zum Dekomprimieren von MySQL-Paketen

Da ich auf einen neuen Computer gewechselt bin, m...

Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL

1. CSV-Datei importieren Verwenden Sie den folgen...

So fügen Sie Batchdaten unter Node.js in eine MySQL-Datenbank ein

Im Projekt (nodejs) müssen mehrere Daten gleichze...