In der Welt der Webentwicklung ist die Optimierung der Seitenladezeiten von entscheidender Bedeutung. Zwei leistungsstarke Attribute des

Die Grundlagen: Wie Skripte geladen werden

Wenn ein Browser auf ein

1. Pausiert die HTML-Analyse
2. Ladet das Skript herunter
3. Führt das Skript aus
4. Setzt die HTML-Analyse fort

Dieser Vorgang kann das Rendern von Seiten verlangsamen, insbesondere bei großen Skripten oder langsamen Verbindungen. Darüber hinaus kann es zu Fehlern kommen, wenn das Skript ausgeführt wird, bevor bestimmte HTML-Elemente vollständig geladen sind, was häufig der Fall ist, wenn das Skript nicht richtig im Dokument platziert ist.

Async and Defer: Ein zweischneidiges Schwert

Asynchron

• Was es tut: Lädt das Skript asynchron herunter, während die HTML-Analyse fortgesetzt wird.
• Bei der Ausführung: Sobald es heruntergeladen ist, wird die HTML-Analyse angehalten.
• Wenn es verwendet wird: Unabhängige Skripte, die nicht auf andere Skripte oder DOM-Inhalte angewiesen sind.
• Vorbehalt: Kann außerhalb der Reihenfolge ausgeführt werden, wodurch möglicherweise Abhängigkeiten unterbrochen werden.

Verschieben

• Was es tut: Lädt das Skript herunter, während die HTML-Analyse fortgesetzt wird.
• Bei der Ausführung: Nachdem die HTML-Analyse abgeschlossen ist, aber vor dem DOMContentLoaded-Ereignis.
• Wenn es verwendet wird: Skripte, die auf DOM-Inhalten basieren oder in einer bestimmten Reihenfolge ausgeführt werden müssen.
• Vorbehalt: Kann die Ausführung kritischer Funktionen verzögern.

Verhalten vergleichen

Ausführungsreihenfolge: Asynchron, Zurückgestellt und Beides

Das Verständnis der Ausführungsreihenfolge für Skripte mit unterschiedlichen Attributen ist entscheidend für die Verwaltung von Abhängigkeiten und die Gewährleistung der ordnungsgemäßen Funktionalität. So funktioniert es:

1. Reguläre Skripte (nicht asynchron oder verzögert):

   • In der Reihenfolge ausführen, in der sie im Dokument erscheinen.
   • Blockieren Sie die HTML-Analyse, bis sie heruntergeladen und ausgeführt werden.

2. Asynchrone Skripte:

   • Parallel herunterladen und ausführen, sobald sie verfügbar sind.
   • Keine garantierte Ausführungsreihenfolge; Sie werden ausgeführt, sobald sie heruntergeladen werden.
   • Kann ausgeführt werden, bevor das DOM vollständig geladen ist.

3. Skripte zurückstellen:

   • Parallel herunterladen, aber erst ausführen, nachdem die HTML-Analyse abgeschlossen ist.
   • In der Reihenfolge ausführen, in der sie im Dokument erscheinen.
   • Vor dem DOMContentLoaded-Ereignis ausführen.

4. Skripte mit Async und Defer:

   • Das Async-Attribut hat in modernen Browsern Vorrang.
   • In älteren Browsern, die Async nicht unterstützen, greifen sie auf ein verzögertes Verhalten zurück.

Beispiel für eine Ausführungsreihenfolge:

Mögliche Ausführungsreihenfolge:

1. 1.js (blockiert das Parsen)
2. 3.js oder 2.js (je nachdem, was zuerst heruntergeladen wird)
3. 2.js oder 3.js (je nachdem, was als nächstes heruntergeladen wird)
4. 4.js
5. 5.js

Beachten Sie, dass 2 und 3 in beliebiger Reihenfolge oder sogar vor 1 ausgeführt werden können, wenn das Herunterladen von 1.js länger dauert.

Best Practices

1. Verwenden Sie Async für unabhängige Skripte wie Analysen.
2. Verwenden Sie defer für Skripte, die von DOM oder anderen Skripten abhängen.
3. Platzieren Sie Skripte asynchron im oder verschieben Sie sie, um den Download früher zu starten.
4. Berücksichtigen Sie bei kritischen Skripten Inline-Skripte im .

Browser-Unterstützung

Sowohl Async als auch Defer werden in modernen Browsern weitgehend unterstützt. Erwägen Sie bei älteren Browsern die Verwendung eines Skriptladeprogramms oder das Platzieren von Skripts am Ende des