Detaillierte Analyse des Blockierungsproblems von js und css

Detaillierte Analyse des Blockierungsproblems von js und css

DOMContentLoaded und laden

Lassen Sie uns zunächst zwei Ereignisse verstehen, die bei der nachfolgenden Analyse hilfreich sein werden.

Ladeereignis: „Load“ sollte nur verwendet werden, um eine vollständig geladene Seite zu erkennen. Das Ladeereignis wird ausgelöst, wenn eine Ressource und ihre abhängigen Ressourcen vollständig geladen sind. Mit anderen Worten, das Ladeereignis wird erst ausgelöst, nachdem das HTML, CSS, JS, die Bilder und andere Ressourcen der Seite geladen wurden.

DOMContentLoaded-Ereignis: Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne auf das vollständige Laden von Stylesheets, Bildern und Unterframes zu warten. Mit anderen Worten, das Ereignis „DOMContentLoaded“ wird ausgelöst, wenn der DOM-Baum erstellt wurde.

Was ist eine JS-Blockierung?

Da JS während der Ausführung das DOM bedienen, neu strukturieren und neu zeichnen kann, schließen sich der GUI-Rendering-Thread und der JS-Engine-Thread gegenseitig aus.

Wenn beim Parsen von HTML ein Skript-Tag gefunden wird, unterbricht der Rendering-Thread den Rendering-Prozess und übergibt die Kontrolle an die JS-Engine. Inline-JS-Code wird direkt ausgeführt. Wenn es sich um eine externe JS-Datei handelt, müssen Sie die JS-Datei herunterladen und nach Abschluss des Downloads ausführen. Nachdem die JS-Engine fertig ist, gibt der Browser die Kontrolle an den Rendering-Thread zurück und fährt mit der DOM-Analyse fort.

Daher blockiert js den Aufbau des DOM-Baums.

Wird dadurch die Anzeige der Seite blockiert? Testen wir es mit dem folgenden Code.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
</Kopf>
<Text>
  <div>Hallo Welt</div>
  <Skript>
    Debugger
  </Skript>
  <div>hallo welt2</div>
</body>
</html>

Es ist ersichtlich, dass das Laden des DOMContents dieser Seite 2,23 s dauert, was zeigt, dass js den Aufbau des DOM-Baums blockiert. Allerdings wird „Hallo Welt“ fast augenblicklich auf der Seite angezeigt, was darauf hinweist, dass js die Darstellung der davor liegenden DOM-Elemente nicht blockiert.

Für ein besseres Benutzererlebnis versuchen moderne Browser-Rendering-Engines, Inhalte so schnell wie möglich auf dem Bildschirm anzuzeigen. Es wartet nicht, bis die gesamte DOM-Analyse abgeschlossen ist, bevor der Renderbaum angelegt wird. Stattdessen werden bei einer JS-Blockierung die bereits erstellten DOM-Elemente auf dem Bildschirm gerendert, um die Zeit des weißen Bildschirms zu verkürzen.

Aus diesem Grund platzieren wir das Skript-Tag am Ende des Body-Tags, damit es die Darstellung der vorherigen Seite nicht beeinträchtigt.

Was ist CSS-Blockierung?

Wenn wir beim Parsen von HTML auf ein Link-Tag oder ein Style-Tag stoßen, berechnen wir den Stil und erstellen das CSSOM.

CSS blockiert nicht den Aufbau des DOM-Baums, aber die Anzeige der Seite. Probieren wir es doch noch mal anhand eines Beispiels:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</Kopf>
<Text>
  <div class="woo-spinner-filled">hallo Welt</div>
  <div>hallo welt2</div>
</body>
</html>

Verwenden Sie eine externe CSS-Datei und öffnen Sie Slow 3G, um eine langsamere Netzwerkgeschwindigkeit zu simulieren. Sie können sehen, dass es nur 30 ms dauert, bis das Ereignis DOMContentLoaded ausgelöst wird. Die Seite ist zu diesem Zeitpunkt noch leer und der Inhalt erscheint erst fast 2,92 Sekunden nach dem Auftreten des geladenen Ereignisses auf der Seite.

Der Grund dafür ist, dass der Browser während der Erstellung des CSSOM keine der verarbeiteten Inhalte rendert. Auch wenn das DOM analysiert wurde, zeigt die Seite keinen Inhalt an, solange das CSSOM nicht erstellt ist.

CSSOM wird nur erstellt, wenn wir auf ein Link-Tag oder ein Style-Tag stoßen. Wenn sich also vor dem Link-Tag ein DOM-Element befindet, kommt es beim Laden von CSS zu einer Blockierung.

<Text>
  <div class="woo-spinner-filled">hallo Welt</div>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
  <div>hallo welt2</div>
</body>

Dies führt zu einem Problem, nämlich Seitenflackern. Bevor das CSS geladen wird, rendert der Browser <div class="woo-spinner-filled">hallo welt</div> gemäß dem Standardstil. Wenn das CSS geladen wird, wird ein neuer Stil für das Div berechnet und es wird erneut gerendert, was zu einem Flackereffekt führt.

Um Seitenflimmern zu vermeiden, werden Link-Tags üblicherweise im Kopf platziert.

Blockiert CSS die nachfolgende JS-Ausführung? Die Antwort ist ja!

Bei JS geht es um Modifikation. Es hilft uns, jeden Aspekt einer Webseite zu ändern: Inhalt, Stil und wie sie auf Benutzerinteraktion reagiert. Diese „alle Aspekte“ der Änderung sind im Wesentlichen Änderungen am DOM und CSSDOM. Wenn auf den Stil eines Elements in CSSDOM in JS zugegriffen wird, müssen Sie warten, bis der Stil heruntergeladen wurde, bevor Sie mit der Ausführung des JS-Skripts fortfahren können.

Führen Sie das folgende Beispiel aus und Sie werden feststellen, dass „Dies ist ein Test“ erst in der Konsole ausgegeben wird, nachdem das CSS geladen wurde.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</Kopf>
<Text>
  <div class="woo-spinner-filled">hallo Welt</div>
  <div>hallo welt2</div>
  <Skript>
    console.log('Dies ist ein Test')
  </Skript>
</body>
</html>

Optimierung

Verwenden Sie Inline-JavaScript und CSS, damit der Rendering-Prozess direkt nach dem Abrufen der HTML-Datei starten kann.

Nicht alle Situationen sind für Inlining geeignet. Sie können daher auch versuchen, die Dateigröße zu reduzieren, indem Sie beispielsweise nutzlosen Code löschen und die Größe von CSS- und JavaScript-Dateien mithilfe von Konstruktionstools wie webpack komprimieren oder CDN aktivieren, um das Herunterladen von Dateien zu beschleunigen.

Bei großen CSS-Dateien können Sie Media-Query-Attribute verwenden, um sie in mehrere CSS-Dateien für unterschiedliche Zwecke aufzuteilen, sodass bestimmte CSS-Dateien nur in bestimmten Szenarien geladen werden.

Wenn die JavaScript-Datei keinen DOM-bezogenen Code enthält, können Sie das JavaScript-Skript so einstellen, dass es asynchron geladen wird, indem Sie den Code mit „async“ oder „defer“ markieren.

<script src="index.js"></script>
//Der Browser muss warten, bis index.js geladen und ausgeführt ist, bevor er etwas anderes tun kann.

<script async src="index.js"></script>
//Das Laden von index.js erfolgt asynchron und hindert den Browser während des Ladens nicht daran, andere Dinge zu tun.
//Wenn der Ladevorgang abgeschlossen ist, wird das JS-Skript sofort ausgeführt.

<script defer src="index.js"></script>
//Das Laden von JS erfolgt asynchron und die Ausführung wird verzögert.
//Mit „defer“ markierte Skriptdateien warten, bis das gesamte Dokument analysiert und ausgeführt wurde, bevor das Ereignis DOMContentLoaded ausgelöst wird.

Zusammenfassen

Dies ist das Ende dieses Artikels über das Blockierungsproblem von JS und CSS. Weitere relevante Inhalte zum Blockieren von JS und CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Implementierung der CSS-Variableneinfügung im Vue3-Stil
  • Bringen Sie Ihnen die Grundlagen von CSS, Stil zu verstehen
  • JS, CSS und HTML zur Implementierung der Registrierungsseite
  • Vue3 implementiert CSS unendlichen nahtlosen Scrolleffekt
  • React führt antd-mobile+postcss ein, um ein mobiles Terminal zu erstellen
  • Eine kurze Diskussion über das Generierungsschema für unregelmäßige CSS-Rahmen
  • CSS Glitch Art erklärt
  • CSS3 verwendet Übergangsanimation und Easing-Effekt – Fallstudie

<<:  Grafisches Tutorial zur Installation und Konfiguration des MySQL Community Server 8.0.16 unter Windows

>>:  So erstellen Sie ein Docker-Repository mit Nexus

Artikel empfehlen

Tutorial zur Konfiguration und Verwendung des MySQL-Protokolls für langsame Abfragen

Vorwort Das MySQL Slow Query Log ist eine Funktio...

Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.

Auf einer Seite gibt es viele Steuerelemente (Elem...

Tutorial zum Verbinden und Verwenden von MySQL 8.0 im Maven-Projekt von IDEA

Schauen wir uns zunächst meine grundlegende Entwi...

js-Speicherleckszenarien, wie man sie im Detail überwacht und analysiert

Inhaltsverzeichnis Vorwort Welche Situationen kön...

Detaillierte Erklärung der wechselseitigen Verwendung von Ref in React

Inhaltsverzeichnis 1. Lassen Sie uns zunächst erk...

Detaillierte Zusammenfassung des JavaScript-Arrays

Inhaltsverzeichnis 1. Array-Induktion 1. Teilen S...

Das ausführliche Tutorial zum Herunterladen und Installieren von MySQL 8.0.15 ist für Anfänger ein Muss!

In diesem Artikel werden die spezifischen Schritt...

Methodenbeispiel zum sicheren Abrufen tiefer Objekte von Object in Js

Inhaltsverzeichnis Vorwort Text Parameter Beispie...

Erläuterung des Vue.js $refs-Anwendungsfalls

Trotz Props und Events müssen Sie manchmal immer ...

Lösen Sie das Problem, dass bei der Set-Operation kein NULL gefunden wird, nicht wie bei MySQL

Eine interessante Entdeckung: Es gibt eine Tabell...

Eine kurze Diskussion über die MySQL-Optimierungslösung für große Tabellen

Hintergrund Die Menge neuer Daten in der Geschäft...

Weitergabe von Techniken für Farbkontrast und -harmonie im Web

Farbkontrast und Harmonie Unter kontrastierenden ...

React verwendet die Upload-Komponente von Antd, um die Funktion zum Senden von Dateiformularen zu implementieren (vollständiger Code).

Ich habe gerade angefangen, React für Projekte zu...

Detaillierte Erläuterung zum Upgrade von Python und zur Installation von Pip unter Linux

Upgrade der Linux-Version: 1. Stellen Sie zunächs...

Einführung und Architektur von Apache Arrow, einem leistungsstarken Datenformatbibliothekspaket auf JVM (Gkatziouras)

Apache Arrow ist ein beliebtes Format, das von ve...