Wenn wir Webseiten schreiben, müssen wir häufig JavaScript-Dateien in HTML-Dateien einfügen. Zu diesem Zeitpunkt verwenden wir normalerweise
Start
Bevor wir die Attribute defer und async einführen, werfen wir zunächst einen Blick auf sie
<script src="path/to/script.js"></script>
Dieser Code lädt die Datei script.js sofort herunter und führt sie aus, wenn der Browser sie analysiert. Wenn wir mehrere JavaScript-Dateien in die HTML-Datei einfügen müssen, können wir mehrere hinzufügen
<script src="path/to/script1.js"></script>
<script src="path/to/script2.js"></script>
<script src="path/to/script3.js"></script>
Das Problem dabei ist, dass es bei Abhängigkeiten zwischen diesen Dateien zu Problemen mit der Ausführungsreihenfolge kommen kann. Wenn beispielsweise script2.js von einer in script1.js definierten Variablen abhängt, tritt ein Fehler auf, wenn script2.js vor script1.js ausgeführt wird. Um dieses Problem zu lösen, können wir die Attribute defer und async verwenden.
Vor- und Nachteile von JS-Defer- und Async-Attributen
defer und async sind Eigenschaften, mit denen das Laden und Ausführen von JavaScript-Skripten gesteuert wird. Sie können <script>in Tags verwendet werden.
Vor- und Nachteile des Defer-Attributs:
Vorteile:
- Das Laden des Skripts blockiert nicht das Parsen der Seite und das Skript wird ausgeführt, nachdem das Parsen der Seite abgeschlossen ist.
- Mehrere Skripte mit Defer-Attributen werden in der Reihenfolge ausgeführt, in der sie auf der Seite erscheinen.
Mangel:
- Der Ausführungszeitpunkt des Skripts ist ungewiss, was sich auf das Verhalten und die Wirkung der Seite auswirken kann.
- Nicht geeignet für Skripte, die sofort ausgeführt werden müssen.
Vor- und Nachteile von asynchronen Attributen:
Vorteile:
- Das Laden und Ausführen des Skripts erfolgt asynchron und blockiert nicht das Parsen der Seite und das Laden anderer Ressourcen.
- Geeignet für Skripte, die sofort ausgeführt werden müssen, wodurch die Seitenladegeschwindigkeit verbessert werden kann.
Mangel:
- Die Ausführungsreihenfolge mehrerer Skripte mit dem Async-Attribut ist unsicher und kann zu Abhängigkeitsproblemen führen.
- Der Ausführungszeitpunkt des Skripts ist ungewiss, was sich auf das Verhalten und die Wirkung der Seite auswirken kann.
Im Allgemeinen eignet sich „defer“ für Skripte, die nacheinander ausgeführt werden müssen, während „async“ für Situationen geeignet ist, die sofort ausgeführt werden müssen und nicht auf andere Skripte angewiesen sind. Bei der tatsächlichen Verwendung können Sie geeignete Attribute auswählen, um das Laden und Ausführen von Skripten entsprechend bestimmten Umständen zu steuern.
defer-Attribut
Das defer-Attribut weist auf eine verzögerte Ausführung von JavaScript-Dateien hin. Wenn der Browser das Defer-Attribut analysiert
<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
<script src="path/to/script3.js" defer></script>
In diesem Beispiel lädt der Browser die drei JavaScript-Dateien sofort herunter, führt sie jedoch nicht sofort aus. Warten Sie stattdessen, bis die Seite analysiert wurde, und führen Sie diese drei Dateien nacheinander in der Reihenfolge aus, in der die Tags auf der Seite erscheinen.
Es ist zu beachten, dass das Defer-Attribut nur für externe JavaScript-Dateien gültig ist. Wenn
asynchrones Attribut
Das async-Attribut gibt die asynchrone Ausführung von JavaScript-Dateien an. Wenn der Browser das asynchrone Attribut analysiert
<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
<script src="path/to/script3.js" async></script>
In diesem Beispiel lädt der Browser diese drei JavaScript-Dateien sofort herunter und blockiert nicht das Parsen und Rendern der Seite. Sobald die Dateien heruntergeladen sind, führt der Browser sofort alle drei Dateien aus. Da die Ausführungsreihenfolge undefiniert ist, eignet sich diese Methode nur für Code, der nicht von anderen JavaScript-Dateien abhängt.
Es ist zu beachten, dass das async-Attribut nur für externe JavaScript-Dateien gültig ist. Wenn
der Unterschied
Der Unterschied zwischen Defer- und Async-Attributen besteht darin, dass das Defer-Attribut garantiert, dass die Ausführungsreihenfolge von JavaScript-Dateien mit der Reihenfolge übereinstimmt, in der sie auf der Seite angezeigt werden, während das Async-Attribut die Ausführungsreihenfolge nicht garantiert. Zusätzlich mit dem Defer-Attribut
abschließend
In der tatsächlichen Entwicklung sollten wir uns je nach bestimmten Umständen für die Verwendung von Verzögerungs- oder Asynchronattributen entscheiden. Wenn eine Abhängigkeit zwischen JavaScript-Dateien besteht, sollten wir das Defer-Attribut verwenden. Wenn keine Abhängigkeiten zwischen JavaScript-Dateien bestehen, können wir das async-Attribut verwenden, um die Seitenladegeschwindigkeit zu verbessern.
Das Obige ist die detaillierte Einführung der Verzögerungs- und Asynchronattribute. Ich hoffe, dass dieser Artikel für alle hilfreich sein kann.