Async und Defer in HTML <script> Tags verstehen

Jeder Webentwickler behauptet stolz, HTML zu beherrschen. Aber… kennst du wirklich den Unterschied zwischen async und defer in <script>?

Diese Attribute sind in modernen Frontend-Webanwendungen üblich, werden aber oft übersehen.

Fassen wir zuerst zusammen. In HTML kann ein <script>-Tag auf drei Arten verwendet werden, die im Folgenden einzeln erläutert werden:

Standardmäßige sequentielle Ausführung: <script src='https://...'></script>
Sofortige Ausführung nach dem Download: <script src='https://...' async></script>
Ausführung, nachdem das Dokument vollständig geparst wurde: <script src='https://...' defer></script>

`<script>`

Erklärung

Wenn ein Browser während des Parsens eines HTML-Dokuments auf ein Standard-<script>-Tag trifft:

Blockiert es das Parsen des restlichen HTML.
Lädt es das JavaScript-Skript und führt es sofort aus, sobald das Skript vollständig geladen ist.
Nach der Ausführung wird das HTML-Parsen fortgesetzt.

Betrachten Sie das folgende Beispiel:

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script src="https://.../Chart.min.js"></script>
    <script src="https://.../moment.min.js"></script>
    <script src="https://.../vue.min.js"></script>
  </head>
  <body>
    Page content 1
  </body>
</html>

Ausführungsreihenfolge:

Protokolliert console.log("First script");
Lädt das externe Skript Chart.min.js herunter und führt es aus.
Lädt moment.min.js herunter und führt es aus.
Lädt vue.min.js herunter und führt es aus.
Zeigt den Textinhalt an: Page content 1

Hinweis

Ein Standard-<script> führt Skripte in der Reihenfolge aus. Wenn die Ausführung eines Skripts zu lange dauert, werden die nachfolgenden Skripte in die Warteschlange gestellt und das HTML-Parsen wird angehalten. Dies kann zu einem weißen Bildschirm führen, bis die Ausführung abgeschlossen ist.

`<script async>`

Erklärung

Wenn der Browser auf ein <script>-Tag mit dem Attribut async trifft:

Blockiert es nicht das HTML-Parsen, sondern ruft das JavaScript-Skript asynchron ab.
Sobald das Skript heruntergeladen ist, wird es sofort ausgeführt, wodurch das HTML-Parsen in diesem Moment angehalten wird.
Nach der Ausführung wird das HTML-Parsen fortgesetzt.

Betrachten Sie das folgende Beispiel:

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script async src="https://.../Chart.min.js"></script>
    <script async src="https://.../moment.min.js"></script>
    <script async src="https://.../vue.min.js"></script>
  </head>
  <body>
    Page content 2
  </body>
</html>

Ausführungsreihenfolge:

Protokolliert console.log("First script");
Lädt Chart.min.js, moment.min.js und vue.min.js asynchron herunter, während das HTML-Parsen fortgesetzt wird.
Sobald ein Skript heruntergeladen ist, wird es sofort ausgeführt und das HTML-Parsen wird angehalten.
Das HTML-Parsen wird nach der Skriptausführung fortgesetzt.

Hinweis

Skripte mit async halten das HTML-Parsen während der Ausführung, aber nicht während des Downloads an. Wenn die HTML-Struktur einfach ist, kann sie vollständig geladen werden, bevor Skripte ausgeführt werden, was bedeutet, dass "Page content 2" zuerst angezeigt wird, dann werden Skripte ausgeführt.

Wenn die HTML-Struktur komplex ist und das Parsen länger dauert, kann das Parsen unterbrochen werden, wenn Skripte ausgeführt werden.

`<script defer>`

Erklärung

Wenn der Browser auf ein <script>-Tag mit dem Attribut defer trifft:

Blockiert es nicht das HTML-Parsen, sondern ruft das JavaScript-Skript asynchron ab.
Sobald das Skript heruntergeladen ist, wird es nicht sofort ausgeführt.
Das Skript wird erst ausgeführt, nachdem das gesamte HTML-Dokument vollständig geparst wurde.

Betrachten Sie das folgende Beispiel:

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script defer src="https://.../Chart.min.js"></script>
    <script defer src="https://.../moment.min.js"></script>
    <script defer src="https://.../vue.min.js"></script>
  </head>
  <body>
    Page content 3
  </body>
</html>

Ausführungsreihenfolge:

Protokolliert console.log("First script");
Lädt Chart.min.js, moment.min.js und vue.min.js asynchron herunter, während das HTML-Parsen fortgesetzt wird.
Skripte werden nicht sofort ausgeführt; sie warten, bis das HTML-Parsen abgeschlossen ist und "Page content 3" angezeigt wird.
Führt die heruntergeladenen Skripte in der Reihenfolge aus.

Hinweis

Wenn mehrere defer-Skripte vorhanden sind, lädt der Browser sie parallel herunter. Unabhängig von der Downloadgeschwindigkeit folgt die Ausführungsreihenfolge der Reihenfolge im HTML-Dokument.

Gemischte Verwendung

In realen Szenarien können verschiedene Methoden kombiniert werden. Betrachten Sie das folgende Beispiel:

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script defer src="https://.../Chart.min.js"></script>
    <script async src="https://.../moment.min.js"></script>
    <script defer src="https://.../vue.min.js"></script>
  </head>
  <body>
    Page content 4
  </body>
</html>

Ausführungsreihenfolge:

Protokolliert console.log("First script");
Lädt Chart.min.js, moment.min.js und vue.min.js asynchron herunter.
Da das HTML einfach ist, wird es vollständig geladen, bevor die Skriptausführung beginnt, und zeigt zuerst "Page content 4" an.
moment.min.js wird sofort nach dem Herunterladen ausgeführt.
Chart.min.js und vue.min.js werden nach Abschluss des HTML-Parsens ausgeführt.

Zusammenfassung

Standard-<script> blockiert das HTML-Parsen und führt Skripte in der Reihenfolge aus.
defer blockiert das HTML-Parsen nicht, stellt sicher, dass Skripte in Dokumentreihenfolge ausgeführt werden, und führt Skripte nach Abschluss des HTML-Parsens aus.
async kann das HTML-Parsen blockieren, führt Skripte aber in Downloadreihenfolge aus, was unvorhersehbar ist.

Bewährte Methoden

Wenn ein Skript unabhängig ist und nicht auf andere Skripte oder Ressourcen angewiesen ist, ist async eine gute Wahl (obwohl es das Parsen vorübergehend blockieren kann).
Wenn Skripte voneinander abhängig sind, verwenden Sie defer, um die Reihenfolge sicherzustellen.
Wenn sowohl async als auch defer vorhanden sind, hat async Vorrang.