Probleme beim Laden und Blockieren von JavaScript-Dateien: Fallstudie zur Leistungsoptimierung

Probleme beim Laden und Blockieren von JavaScript-Dateien: Fallstudie zur Leistungsoptimierung

Lassen Sie mich mit einer Frage beginnen: Wenn Sie beim Schreiben einer HTML-Seite eine JS-Datei von außen importieren möchten, wo wird dann das Skript-Tag platziert? Hat die unterschiedliche Platzierung Auswirkungen auf das Laden der Seite?
Standardmäßig laden Browser JavaScript-Skripte synchron : Das heißt, die Rendering-Engine stoppt, wenn sie auf ein Skript-Tag stößt, wartet, bis das Skript ausgeführt wird , und fährt dann mit dem Rendering fort. Handelt es sich um ein externes Skript, muss zusätzlich der Zeitpunkt des Downloads des Skripts angegeben werden.
Wenn das Skript sehr groß ist , dauert das Herunterladen und Ausführen sehr lange und blockiert den Browser. Benutzer haben das Gefühl, der Browser sei „festgefahren“, mit einer kurzen Leermeldung und keiner Reaktion. Dies führt zu einer sehr schlechten Benutzererfahrung. Für dieses Problem gibt es zwei Lösungen:

①. Ändern Sie die Platzierung des Skript-Tags . Am besten platzieren Sie es am Ende des Body-Tags, also vor dem Tag </body> . Diese Methode hat keinen Einfluss auf die DOM-Darstellung des Browsers und wird ausgeführt, nachdem die Seitenverarbeitung abgeschlossen ist.

②. Konvertieren Sie synchron in asynchron . Der Browser erlaubt das asynchrone Laden von Skripten. Auf diese Weise kann das Skript-Tag weiterhin im Kopf platziert werden. Im Folgenden sind zwei Syntaxen für das asynchrone Laden aufgeführt:

<script src="./1.js" asynchron></script>
<script src="./1.js" verschieben></script>

asynchron und verzögert

Asynchron bedeutet, dass das Skript asynchron geladen wird, wenn das Attribut „defer“ oder „async“ im Skript-Tag aktiviert ist. Wenn die Browser-Rendering-Engine auf diese Befehlszeile stößt, beginnt sie mit dem Herunterladen des externen Skripts . Während des Herunterladens führt die Rendering-Engine die nachfolgenden Befehle direkt aus.

Sowohl „async“ als auch „defer“ verhindern, dass die Rendering-Engine angehalten wird, während externe Skripte heruntergeladen werden.

Der Unterschied zwischen dem asynchronen Attribut und dem Defer ist:

Bildbeschreibung hier einfügen

Die blaue Linie stellt Netzwerklesevorgänge (Skriptdownloads) dar, die rote Linie stellt die Ausführung dar (beides für Skripte); die grüne Linie stellt die HTML-Analyse dar.

Wenn das Attribut „defer“ verwendet wird, lädt der Browser das entsprechende Skript sofort herunter. Die Seitenverarbeitung wird während des Downloadvorgangs nicht angehalten. Das Skript wird erst ausgeführt , wenn die Dokumentanalyse abgeschlossen ist .

async -Attribut, der Browser lädt das entsprechende Skript sofort herunter. Die Seitenverarbeitung wird während des Downloadvorgangs nicht angehalten. Sie wird sofort nach Abschluss des Downloads ausgeführt . Die Seitenverarbeitung wird während des Ausführungsvorgangs angehalten.

Wenn keine Attribute festgelegt sind, wird die Seitenverarbeitung bei Auftreten eines Skripts fortgesetzt, nachdem das Skript heruntergeladen und ausgeführt wurde.

[ Hinweis ] Async ist leistungsfähiger als Defer. Wenn dasselbe Tag beide Attribute gleichzeitig verwendet, befolgen Sie Async! ! !

Mehrere Skripte

Der Unterschied zwischen asynchron und verzögert spiegelt sich nicht nur beim Herunterladen und Ausführen externer Skriptdateien wider, sondern auch im Unterschied, wenn mehrere Skripte vorhanden sind:
Hier ist ein Codebeispiel:

Externe Skriptdateien
1.js-Datei:

// ... viel JS-Code console.log('1');

2.js-Datei:

konsole.log('2');

Haupt-HTML-Datei

Verwenden Sie defer :

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>JS-Blockierung</title>
    <!-- defer lässt dom zuerst ausführen -->
    <script src="./1.js" verschieben></script>
    <script src="./2.js" verschieben></script>
</Kopf>
<Text>
    Wie funktioniert die <h1>js-Blockierung? </h1>
    <Skript>
        document.addEventListener('DOMContentLoaded', Funktion() {
            console.log('DOMContentLoaded');
        })
    </Skript>
</body>
</html>

Ergebnisse der Konsolenausführung:

Bildbeschreibung hier einfügen

Verwenden von async :

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>JS-Blockierung</title>
    <!-- defer lässt dom zuerst ausführen -->
    <script src="./1.js" asynchron></script>
    <script src="./2.js" asynchron></script>
</Kopf>
<Text>
    Wie funktioniert die <h1>js-Blockierung? </h1>
    <Skript>
        document.addEventListener('DOMContentLoaded', Funktion() {
            console.log('DOMContentLoaded');
        })
    </Skript>
</body>
</html>

Ergebnisse der Konsolenausführung:

Bildbeschreibung hier einfügen

Aus den laufenden Ergebnissen der Konsole können wir Folgendes ersehen:
defer : Das erste verzögerte Skript wird vor dem zweiten verzögerten Skript ausgeführt (wenn einige Browser den HTML5-Standard nicht vollständig erfüllen, werden sie natürlich möglicherweise nicht in der richtigen Reihenfolge ausgeführt) , und diese beiden Skripte werden vor dem Ereignis DOMContentLoaded ausgeführt.

async : Der zuerst abgeschlossene Download wird sofort ausgeführt ! ! ! Diese beiden Skripte dürfen nicht ausgeführt werden, bevor das Ereignis DOMContentLoaded ausgelöst wird, sie werden jedoch definitiv vor dem Ereignis window.onload ausgeführt. Darüber hinaus ist zu beachten, dass während der Ausführung des zuerst heruntergeladenen Skripts der Download anderer Skripte nicht unterbrochen wird, sondern fortgesetzt wird.

[ Hinweis ] DOMContentLoaded wird ausgelöst, nachdem das Laden des DOM abgeschlossen ist, d. h. nachdem das Dokument vollständig geladen und analysiert wurde.
○ Weitere Informationen zu DOMContentLoaded finden Sie unter https://www.jb51.net/article/222345.htm

Zusammenfassung

  1. Um eine Blockierung zu verhindern, ist es am besten, den Skript-Tag unten im Textkörper zu platzieren.
  2. defer und async sind in Bezug auf das Lesen (Herunterladen) im Netzwerk gleich, beide sind asynchron (im Vergleich zur HTML-Analyse).
    Der Unterschied zwischen beiden liegt darin , wann das Skript nach dem Herunterladen ausgeführt wird . Offensichtlich entspricht Defer unseren Anforderungen an das Laden und Ausführen von Anwendungsskripten am nächsten, insbesondere in Fällen, in denen Abhängigkeiten zwischen Skriptdateien bestehen (Abhängigkeit bedeutet, dass diese JS-Datei auf den Inhalt der vorherigen JS-Datei verweisen kann). Es führt die Skripte in der Reihenfolge aus, in der sie geladen wurden! ! !
  3. async ist ein Meister der Out-of-Order-Ausführung. Dabei sind das Laden und Ausführen von Skripten eng miteinander verbunden, sodass es unabhängig von der angegebenen Reihenfolge sofort ausgeführt wird, solange es geladen wird. <br /> Wenn Sie genau darüber nachdenken, ist async für Anwendungsskripte nicht sehr nützlich, da es Abhängigkeiten überhaupt nicht berücksichtigt (selbst die niedrigste Ebene der sequentiellen Ausführung), aber es eignet sich sehr gut für Skripte, die von keinem Skript abhängen oder von keinem Skript abhängig sind . Das typischste Beispiel ist: Google Analytics
  4. defer/async eignen sich nur für die Ausführung externer Skripte . Außerdem ist es am besten, async/defer nicht für die Ausführung von DOM-Skripten zu verwenden , da bei Verwendung von async der JS-Code möglicherweise ausgeführt wird, bevor die Seite geladen wird, was wahrscheinlich zu Ausnahmen führt. Wenn Sie es verwenden müssen, können Sie den JS-Teil, der das DOM ausführen muss, zur Ausführung in den DOMContentLoaded-Ereignisrückruf einfügen ☺!

siehe

[1] https://blog.csdn.net/mx18519142864/article/details/82021754
[2] https://blog.csdn.net/weixin_42561383/article/details/86564715
[3] https://segmentfault.com/q/1010000000640869

Dies ist das Ende dieses Artikels über die Leistungsoptimierung bei Problemen mit dem Laden und Blockieren von JavaScript-Dateien. Weitere relevante Inhalte zu Problemen mit dem Laden und Blockieren von JavaScript-Dateien finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung des nicht blockierenden Ladens, der Verzögerung und der asynchronen Funktion in JavaScript
  • Perfekte Lösung für das Blockierungsproblem beim Laden von JS-Dateiseiten
  • Laden Sie JS ohne Blockierung, um zu verhindern, dass die Seitenanzeige durch JS-Ladefehler beeinträchtigt wird
  • Schreiben Sie document.write neu, um ein nicht blockierendes Laden von JS-Anzeigen zu erreichen (Ergänzung).
  • Lösung zur Leistungsoptimierung durch nicht blockierendes Laden in JavaScript

<<:  Wo werden MySQL-Daten gespeichert?

>>:  Vergleich zwischen Redis und Memcache und Auswahlmöglichkeiten

Artikel empfehlen

Nginx-Lastausgleichskonfiguration, automatischer Umschaltmodus bei Ausfallzeiten

Streng genommen verfügt nginx nicht über eine Int...

Lassen Sie uns das Ereignisobjekt in js genauer verstehen

Wir wissen, dass die in JS am häufigsten verwende...

So kapseln Sie Axios einfach in Vue

Axios in Vue einfügen importiere Axios von „Axios...

Eine kurze Diskussion über den Aufbau und den Betriebsmechanismus des Echtzeit-Computerframeworks Flink Cluster

Inhaltsverzeichnis 1. Flink-Übersicht 1.1 Grundle...

Analyse und Lösung des Grundes, warum overflow-y: visible; in CSS nicht funktioniert

Szenario Eine aktuelle Anforderung ist eine h5-Se...

Reines CSS zum Erreichen der Funktion „Klicken zum Erweitern und Lesen des Volltexts“

Notiz Beim Entwickeln einer Benutzeroberfläche fü...

CentOS 6.5 i386 Installation MySQL 5.7.18 ausführliches Tutorial

Die meisten Leute kompilieren MySQL und legen es ...

Detaillierte Erklärung zum Ändern des Stils von el-select: popper-append-to-body und popper-class

So ändern Sie den Stil der von elementUI bereitge...

Beispielmethode zum Suchen von Schlüsselwörtern und deren vorangehenden und nachfolgenden Informationen in Linux-Protokollen

Bei der täglichen Arbeit müssen wir häufig Protok...

So verwenden Sie crontab zum Hinzufügen geplanter Aufgaben in Linux

Vorwort Das Linux-System wird durch den Systemdie...

Detaillierte Erklärung der Verwendung von overflow:auto

Bevor ich mit dem Haupttext beginne, werde ich ei...

Detaillierte Erklärung der Javascript-Grundlagen

Inhaltsverzeichnis Variable Datentypen Erweiterun...

impress.js Präsentationsschicht-Framework (Demonstrationstool) - erste Erfahrungen

Ich habe ein halbes Jahr lang nicht gebloggt, wofü...

Analyse des Projektverlaufs bei der Ideenverpackung und beim Hochladen in den Cloud-Dienst

eins. Zuerst müssen Sie es in eine Idee verpacken...

Das Laufschriftelement implementiert Effekte wie scrollende Schriften und Bilder

Mit dem Laufschriftelement können Sie einfache Gle...