Skript-Tag
Wenn der Browser in das Skript-Tag aufgelöst wird, wartet der Hauptthread des Browsers auf das Skript oder führt das Skript aus und fährt dann mit der Erstellung fort. Wenn Sie in der Vergangenheit das Skript-Tag oben im Dokument platziert haben, haben Sie warten darauf, dass das Skript heruntergeladen und ausgeführt wird. Während dieser Zeit befindet sich die Seite in einem weißen Bildschirm und ist nicht funktionsfähig. Anstatt sie parallel herunterzuladen, lädt der Browser sie einzeln herunter und führt sie aus, was ziemlich schlecht ist Erfahrung. Daher entscheiden sie sich dafür, das Skript am Ende des Dokuments zu platzieren, um die Ausführung des Skripts so weit wie möglich zu verzögern. Dies ist jedoch nicht vollständig kontrollierbar.
Heute können wir dem Skript-Tag Tags hinzufügen, um es asynchron (verzögert) auszuführen und dem Entwickler die Kontrolle zu geben.
Async-Tag
<script src="main.js" async>
Das Async-Tag weist den Browser an, andere Dinge zu tun, während er auf den JS-Download wartet. Wenn der JS-Download abgeschlossen ist, wird er sofort (so schnell wie möglich) ausgeführt und mehrere JS können parallel heruntergeladen werden.
Der Vorteil von Async besteht darin, dass mehrere JS nicht aufeinander warten. Während des Download-Zeitraums führt der Browser andere Dinge aus (weiteres Parsen von HTML usw.), asynchronen Download und asynchrone Ausführung.
Marke aufschieben
<script src="main.js" defer></script>
Wie bei Async weist das Defer-Tag den Browser an, andere Dinge zu tun, während er auf den Download von js wartet. Mehrere js können parallel heruntergeladen werden, aber sie werden nicht sofort nach Abschluss des js-Downloads ausgeführt, sondern nach dem Parsen mit der Ausführung beginnen Der gesamte HTML-Code und die js mehrerer Defer-Tags werden der Reihe nach ausgeführt.
<script src="main.js" defer></script>
<script src="main2.js" defer></script>
Selbst wenn main2.js vor main.js heruntergeladen wird, wartet es auf die Ausführung von main.js, bevor es ausgeführt wird.
Welches Tag sollte verwendet werden? Beide
Tags dienen zum asynchronen Herunterladen von Skript-Tags. Der Hauptunterschied besteht darin, dass async die Reihenfolge nicht garantieren kann und nach dem Herunterladen ausgeführt wird, während defer darauf wartet, dass der gesamte HTML-Code analysiert wird, bevor mit der Ausführung begonnen wird entsprechend der eingefügten Reihenfolge ausführen.
Wenn zwischen den beiden Skripten keine Abhängigkeit besteht und sie so schnell wie möglich ausgeführt werden können, ist die Verwendung von Async besser geeignet. Im Gegenteil, wenn zwischen den beiden Skripten eine Abhängigkeit besteht oder Sie der HTML-Analyse Priorität einräumen möchten, verschieben Sie sie ist besser geeignet.