Heim > Artikel > Web-Frontend > Async und Defer verstehen

Async und Defer verstehen

王林Original: 2024-08-09 01:58:42767Durchsuche

Understanding async and defer

Dies ist eine der beliebtesten Frontend-Interviewfragen. Es testet die Kenntnisse der Befragten zu HTML, JS und Leistung.

Dies ist Frage Nr. 1 der Reihe „Frontend-Interviewfragen“. Wenn Sie Ihre Vorbereitung verbessern oder allgemein auf dem Laufenden bleiben möchten, sollten Sie sich bei FrontendCamp anmelden.

Das Skript-Tag wird verwendet, um JavaScript zu einer HTML-Seite hinzuzufügen. Es kann sich um ein Inline-Skript oder ein externes Skript handeln.

<body>
  <!-- Some code before it -->

  <script>
    console.log("This is an inline script.");
  </script>

  <script src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

Wenn der Browser während der HTML-Analyse auf ein Skript-Tag stößt, stoppt er die HTML-Analyse und beginnt mit der Ausführung des JS-Skripts. Wenn es inline ist, beginnt es sofort mit der Ausführung, wenn es sich jedoch um ein externes Skript handelt, wird es heruntergeladen und dann ausgeführt.

Während dieser Zeit, wenn JS-Skripte heruntergeladen und ausgeführt werden, ist die HTML-Analyse blockiert. Der Vorgang kann erst fortgesetzt werden, wenn der Browser mit der Ausführung des JS-Skripts fertig ist.

Sehen Sie, was hier falsch ist? Dies führt zu Leistungsproblemen für den Endbenutzer. Wenn wir viele Skripte haben oder die Ausführung eines Skripts viel Zeit in Anspruch nimmt, wird der Benutzer den Inhalt der Seite lange Zeit nicht sehen.

Um genau dieses Problem zu lösen, haben wir zwei Attribute: async und defer.

asynchron

Wenn das Async-Attribut vorhanden ist, wird das Skript parallel zum Parsen von HTML heruntergeladen und ausgeführt, sobald es verfügbar ist.

Wenn mehrere Skripte das Async-Attribut verwenden, unterscheidet sich die Ausführungsreihenfolge möglicherweise von der Reihenfolge, in der sie im HTML angezeigt werden. Das zuerst verfügbare Skript wird zuerst ausgeführt.

<body>
  <!-- Some code before it -->

  <script async src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

verschieben

Wenn das Defer-Attribut vorhanden ist, wird das Skript parallel zur HTML-Analyse heruntergeladen (genau wie asynchron), aber ausgeführt, nachdem die HTML-Analyse abgeschlossen ist und bevor DOMContentLoaded ausgelöst wird.

Wenn mehrere Skripte das Defer-Attribut verwenden, bleibt die Ausführungsreihenfolge im Gegensatz zu asynchronen Skripten erhalten.

<body>
  <!-- Some code before it -->

  <script defer src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

Zusammenfassung

Sowohl asynchrones als auch verzögertes Download-Skript, ohne die HTML-Analyse zu blockieren.
Das asynchrone Skript wird ausgeführt, sobald es verfügbar ist. Es könnte möglicherweise die HTML-Analyse blockieren.
Das Verzögerungsskript wird erst ausgeführt, wenn die HTML-Analyse abgeschlossen ist, aber bevor DOMContentLoaded ausgelöst wird.
Verwenden Sie asynchron, wenn die Ausführungsreihenfolge keine Rolle spielt und das Skript das DOM nicht ändert.
Verwenden Sie „defer“, wenn die Reihenfolge für die Ausführung wichtig ist oder das Skript das DOM ändert.
Beachten Sie außerdem, dass diese Attribute nicht bei Inline-Skripten funktionieren, d. h. Skripten ohne src-Attribut.
Wenn sowohl Async als auch Defer hinzugefügt werden, hat Async Vorrang.

Ressourcen

MDN: Das Skriptelement
FrontendCamp

Das obige ist der detaillierte Inhalt vonAsync und Defer verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html if for while Attribute JS dom this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Paketmanager verstehen: pnpm vs. npm vs. YarnNächster Artikel：Paketmanager verstehen: pnpm vs. npm vs. Yarn

In Verbindung stehende Artikel

Mehr sehen