Führt das Laden von CSS zu einer Blockierung?

Führt das Laden von CSS zu einer Blockierung?

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? Als Nächstes werde ich die Auswirkungen des CSS-Ladens auf die Analyse und Darstellung des DOM-Baums testen.

Um diesen Test abzuschließen, lernen wir zunächst, wie man Chrome verwendet, um die Download-Geschwindigkeit einzustellen

\1. Öffnen Sie die Chrome-Konsole (drücken Sie F12). Sie können das folgende Bild sehen. Der Fokus liegt dort, wo ich den roten Kreis zeichne.

Klicken Sie auf den roten Kreis (Keine Drosselung) und Sie sehen das folgende Bild. Wir wählen die Option GPRS aus.

\2. Klicken Sie auf den roten Kreis (Keine Drosselung), und Sie sehen das folgende Bild. Wir wählen die GPRS-Option

Auf diese Weise wird unsere Download-Geschwindigkeitsbegrenzung für Ressourcen auf 20 kb/s begrenzt. OK, kommen wir zur Sache.

3. Auf diese Weise wird die Obergrenze der Downloadgeschwindigkeit unserer Ressource auf 20 kb/s begrenzt. OK, kommen wir zur Sache.

Blockiert das Laden von CSS das Parsen und Rendern des DOM-Baums?

Reden wir über Code:

<!DOCTYPE html>
<html lang="de">
  <Kopf>
    <title>CSS-Blockierung</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
    <Stil>
      h1 {
        Farbe: rot !wichtig
      }
    </Stil>
    <Skript>
      Funktion h () {
        Konsole.log(Dokument.QuerySelectorAll('h1'))
      }
      setTimeout(h, 0)
    </Skript>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
  </Kopf>
  <Text>
    <h1>Das ist rot</h1>
  </body>
</html>

Annahme: Das Laden von CSS blockiert die Analyse und Darstellung des DOM-Baums

Annahme: Bevor bootstrap.css geladen wird, wird der folgende Inhalt nicht analysiert und gerendert. Daher sollte das, was wir zuerst sehen, ein weißer Bildschirm sein und h1 wird nicht angezeigt. Und das Ergebnis von console.log sollte zu diesem Zeitpunkt ein leeres Array sein.

Tatsächliches Ergebnis: wie unten gezeigt

Blockiert CSS die DOM-Baumanalyse?

Aus der obigen Abbildung können wir ersehen, dass h1 nicht angezeigt wird, wenn CSS nicht geladen wurde. Die Konsolenausgabe lautet jedoch wie folgt

Es ist ersichtlich, dass zu diesem Zeitpunkt der DOM-Baum zumindest bis h1 analysiert wurde, das CSS jedoch noch nicht geladen wurde, was bedeutet, dass das CSS die Analyse des DOM-Baums nicht blockiert.

Blockiert das Laden von CSS die Darstellung des DOM-Baums?

Aus dem obigen Bild können wir auch erkennen, dass die Seite einen weißen Bildschirm anzeigt, wenn das CSS nicht geladen wurde. Die rote Schrift wird erst angezeigt, wenn das CSS geladen ist. Mit anderen Worten, obwohl der folgende Inhalt analysiert wird, wird er nicht gerendert. Daher blockiert das Laden von CSS die Darstellung des DOM-Baums.

Meine persönliche Einschätzung dieses Mechanismus

Tatsächlich glaube ich, dass es sich hierbei auch um einen Optimierungsmechanismus des Browsers handeln könnte. Denn wenn Sie CSS laden, können Sie den Stil der folgenden DOM-Knoten ändern. Wenn das Laden von CSS das Rendern des DOM-Baums nicht blockiert, muss der DOM-Baum nach dem Laden von CSS möglicherweise neu gezeichnet oder neu umbrochen werden, was zu unnötigen Verlusten führt. Ich analysiere also zunächst einfach die Struktur des DOM-Baums, erledige die Arbeit, die erledigt werden kann, und rendere dann, nachdem Ihr CSS geladen ist, den DOM-Baum entsprechend dem endgültigen Stil. Dieser Ansatz ist in Bezug auf die Leistung tatsächlich besser.

Blockiert das Laden von CSS die Ausführung von JS?

Aus der obigen Schlussfolgerung können wir schließen, dass das Laden von CSS die DOM-Baumanalyse nicht blockiert, die DOM-Baumdarstellung jedoch blockiert. Blockiert also das Laden von CSS die JS-Ausführung?

Überprüfen Sie dies erneut über den Code.

<!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>
      console.log('vor CSS')
      var startDate = neues Datum()
    </Skript>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
  </Kopf>
  <Text>
    <h1>Das ist rot</h1>
    <Skript>
      var endDate = neues Datum()
      console.log('nach CSS')
      console.log('verstrichene Zeit' + (Enddatum - Startdatum) + 'ms')
    </Skript>
  </body>
</html>

Annahme: Das Laden von CSS blockiert die nachfolgende Ausführung von JS

Erwartetes Ergebnis: Der JS-Code nach dem Link sollte ausgeführt werden, nachdem das CSS geladen wurde.

Tatsächliches Ergebnis:

Aus der obigen Abbildung können wir ersehen, dass der JS-Code vor der CSS-Ladeanweisung zuerst ausgeführt wird, der Code nach der CSS-Ladeanweisung jedoch erst ausgeführt wird, wenn das CSS geladen ist. Dies zeigt auch, dass das Laden von CSS die Ausführung nachfolgender JS-Anweisungen blockiert. Detaillierte Ergebnisse finden Sie in der folgenden Abbildung (das Laden des CSS dauerte über 5600 ms):

abschließend

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).

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 Haupttypen:

WebKit-Rendering-Prozess

Gecko-Rendering-Prozess

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

Analysieren Sie HTML-Dateien, um einen DOM-Baum zu generieren, und analysieren Sie CSS-Dateien, um einen CSSOM-Baum zu generieren. Kombinieren Sie Dom-Baum und CSSOM-Baum, um einen Render-Baum zu generieren. Rendern und zeichnen Sie entsprechend dem Render-Baum und rendern Sie Pixel auf dem Bildschirm.

Aus dem Prozess können wir sehen

  1. DOM-Parsing und CSS-Parsing sind zwei parallele Prozesse. Dies erklärt auch, warum das Laden von CSS das DOM-Parsing nicht blockiert.
  2. 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.
  3. 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

  1. Wenn auf der Seite nur CSS vorhanden ist oder JS vor CSS platziert wird, muss DomContentLoaded nicht warten, bis CSS geladen ist.
  2. 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');
      })
    </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 in der folgenden Abbildung dargestellt:

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.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  So verwenden Sie den EXPLAIN-Befehl in SQL

>>:  Mehrere Möglichkeiten für Vue, die Kommunikation zwischen Komponenten zu erreichen (mehrere Szenarien)

Artikel empfehlen

Verwendung von „align-content“ im Zeilenumbruchbereich des Flex-Layouts

1. Das in diesem Artikel implementierte Effektdia...

11 Möglichkeiten, Duplikate aus JS-Arrays zu entfernen

Bei der tatsächlichen Arbeit oder bei Interviews ...

Erfahren Sie in einem Artikel mehr über den Anzeigemodus für CSS-Beschriftungen

Tag-Typ (Anzeigemodus) HTML-Tags werden im Allgem...

Die einfachste Lösung für das Problem, dass Sublime Text in Ubuntu kein Chinesisch eingeben kann

Sublimieren Sublime Text ist ein Code-Editor (Sub...

Tipps zum Implementieren mehrerer Rahmen in CSS

1. Mehrere Grenzen[1] Hintergrund: Box-Shadow, Um...

5 gängige Szenarien und Beispiele für die Destrukturierungszuweisung in JavaScript

Inhaltsverzeichnis Vorwort 1. Daten extrahieren 2...

Vue-Anweisungen für benutzerdefinierte V-HAS, Schritte zur Beurteilung der Schaltflächenberechtigung

Inhaltsverzeichnis Anwendungsszenario Einfach aus...

So verwenden Sie nginx, um bestimmte URL-Anfragen durch reguläre Ausdrücke abzufangen

Nginx-Server nginx ist ein ausgezeichneter Webser...

Detaillierte Erklärung der wichtigsten Einzigartigkeit von v-for in Vue

Inhaltsverzeichnis 1. DOM-Diff 2. Fügen Sie Eleme...

Schritte zum Erstellen eines WEBSERVERS mit NODE.JS

Inhaltsverzeichnis Was ist nodejs Installieren Si...

Welche Eigenschaften sollte eine gute Werbung haben?

Manche Leute sagen, dass Werbung machen wie ein Me...

So verwenden Sie JSONP in Vue

Inhaltsverzeichnis 1. Einleitung 2. Installation ...

Parsen von Apache Avro-Daten in einem Artikel

Zusammenfassung: Dieser Artikel zeigt, wie Avro-D...

Detaillierte Erläuterung des Grafikbeispiels für Vue-Überwachungsattribute

Inhaltsverzeichnis Was ist die Listener-Eigenscha...

Warum sollten Sie mit der add_header-Direktive von Nginx vorsichtig sein?

Vorwort Wie wir alle wissen, legt die Nginx-Konfi...