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

Um eine Blockierung zu verhindern, ist es am besten, den Skript-Tag unten im Textkörper zu platzieren.
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! ! !
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
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

Der Unterschied zwischen ${param} und #{param} in MySQL

MySQL Advanced Learning Notes (Teil 3): Einführung in die logische Architektur von MySQL, detaillierte Erläuterung der MySQL-Speicher-Engine

Artikel

Detaillierte Erklärung der Lösung zum doppelten Einfügen von MySQL-Primärschlüssel und eindeutigem Schlüssel

Artikel

Artikel empfehlen

Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile

rm-Befehl Der Befehl rm wird von den meisten Benu...

Beispielcode für die Codevorlage für die Linux C-Protokollausgabe

Vorwort Dieser Artikel stellt hauptsächlich den r...

Probleme und Lösungen bei Fehler 08001 bei der Verknüpfung mit MySQL in IDEA und keiner Tabellenanzeige nach erfolgreicher Verbindung

Fehler: Connection to blog0@localhost failed. [08...

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

asynchron und verzögert

Mehrere Skripte

Zusammenfassung

siehe

Der Unterschied zwischen ${param} und #{param} in MySQL

Ausführliche Erklärung des Sperrmechanismus in MySQL InnoDB

Wie lang ist eine Funktion in js?

So verbergen und fälschen Sie die Versionsnummer in Nginx

Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)

Beispiele für Clearfix und Clear

Detaillierte Erklärung der scp- und sftp-Befehle unter Linux

Detaillierte Erläuterung der Cache-Konfiguration von Nginx Proxy_Cache

MySQL Advanced Learning Notes (Teil 3): Einführung in die logische Architektur von MySQL, detaillierte Erläuterung der MySQL-Speicher-Engine

Detaillierte Erklärung der Lösung zum doppelten Einfügen von MySQL-Primärschlüssel und eindeutigem Schlüssel

Artikel empfehlen

Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile

Beispielcode für die Codevorlage für die Linux C-Protokollausgabe

Probleme und Lösungen bei Fehler 08001 bei der Verknüpfung mit MySQL in IDEA und keiner Tabellenanzeige nach erfolgreicher Verbindung

Beste Möglichkeit, den Schlüssel im JSON-Objekt zu ersetzen

Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS

Lösung für das Problem mit sicheren Dateiprivilegien beim Exportieren von MySQL-Daten

Über die Konvertierung von Textbereichstext in HTML, d. h. Wagenrücklauf und Zeilenumbruch

So installieren Sie MySQL 5.7.17 und stellen die Kodierung in Windows auf UTF-8 ein

Zusammenfassung der MySQL-Datenbank-ähnlichen Anweisung zur Platzhalter-Fuzzy-Abfrage

PHP geplante Backup MySQL und mysqldump Syntax-Parameter detailliert

JS implementiert die Append-Funktion von jQuery

Detaillierte Erklärung zur Verwendung von Tomcat Native zur Verbesserung der Tomcat IO-Effizienz

css3-Animation, Ballrollen, js-Steuerung, Animationspause

Detaillierte Erläuterung von drei Möglichkeiten, Docker-Container miteinander zu verbinden

Verwenden Sie Javascript, um ein Sliding-Nav-Navigations-Plugin mit Gleitbalkeneffekt zu entwickeln