Heim >Web-Frontend >js-Tutorial >Wie handhabt JavaScript das Laden von Skripten und die Ausführungsreihenfolge auf Webseiten?

Wie handhabt JavaScript das Laden von Skripten und die Ausführungsreihenfolge auf Webseiten?

Linda Hamilton
Linda HamiltonOriginal
2024-12-11 02:47:09376Durchsuche

How Does JavaScript Handle Script Loading and Execution Order in Web Pages?

Wie ist die Lade- und Ausführungsreihenfolge von JavaScript-Skripten auf einer Webseite?

JavaScript-Skripte können auf verschiedene Weise in eine Webseite eingebunden werden Möglichkeiten, einschließlich:

  • Inline-Code oder von einer externen URL geladen
  • Im Lieferumfang enthalten oder Tags
  • Haben keine, zurückgestellten oder asynchronen Attribute (nur für externe Skripte)
  • In der statischen Quelle enthalten oder dynamisch mithilfe anderer Skripte hinzugefügt

Laden Reihenfolge

Skripte werden in der Reihenfolge geladen, in der sie im HTML-Code vorkommen, unabhängig davon, ob dies der Fall ist Inline oder extern. Allerdings kann die Ladereihenfolge dynamisch hinzugefügter Skripte durch das Browserverhalten beeinflusst werden.

Ausführungsreihenfolge

Die Ausführungsreihenfolge von JavaScript-Skripten hängt von mehreren Faktoren ab:

  • Allgemeine Regel: Skripte werden in der Reihenfolge ausgeführt, in der sie auf der Seite vorkommen, mit Ausnahme der mit markierten Skripte async.
  • async Scripts: Mit async markierte Skripte werden in einer unvorhersehbaren Reihenfolge ausgeführt. Sie können ausgeführt werden, sobald sie geladen werden oder nachdem der Parser fertig ist.
  • Dynamisch hinzugefügte Skripte:Das Verhalten dynamisch hinzugefügter Skripte hängt vom Browser ab.
  • Defer-Skripte: Mit „Defer“ markierte Skripte warten, bis der Parser fertig ist, und werden dann in der Reihenfolge ausgeführt, in der sie waren angetroffen.
  • Modulskripte (type="module"):Modulskripte erhalten automatisch das Defer-Attribut und werden nach Abschluss der Analyse der Reihe nach ausgeführt. Sie können auch das async-Attribut verwenden, um Inline-Modulskripte sofort auszuführen.

Beispiel

Im gegebenen Beispiel mit Inline-Skripten im Textkörper die Ladereihenfolge ist:

  1. Initialisierungsskripte im
  2. Externe Skripte zum Laden von Skripten
  3. Inline-Skript, das ein weiteres externes Skript hinzufügt
  4. Inline-Skript, das das hinzugefügte externe Skript verwendet

Das Die Ausführungsreihenfolge hängt davon ab, ob das dynamisch hinzugefügte Skript als asynchron markiert ist oder nicht:

  • Wenn das hinzugefügte Skript dies ist nicht als asynchron markiert, wird es nach dem Inline-Skript ausgeführt, das es hinzugefügt hat.
  • Wenn das hinzugefügte Skript als asynchron markiert ist, ist seine Ausführungsreihenfolge unvorhersehbar und kann vor oder nach dem Inline-Skript erfolgen, das es hinzugefügt hat.

Das obige ist der detaillierte Inhalt vonWie handhabt JavaScript das Laden von Skripten und die Ausführungsreihenfolge auf Webseiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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