Beherrschen von Skript-Tags: Verwenden von Async und Defer für eine präzise Skriptsteuerung

In der Welt der Webentwicklung ist die Optimierung der Seitenladezeiten von entscheidender Bedeutung. Zwei leistungsstarke Attribute des Tag – Async und Defer – kann die Leistung Ihrer Website erheblich beeinträchtigen. Die Verwendung dieser Attribute ohne gründliches Verständnis kann die Leistung beeinträchtigen und zu Fehlern führen. Beginnen wir mit den Grundlagen und lernen, was diese Attribute bewirken und wann man sie verwendet.

Die Grundlagen: Wie Skripte geladen werden

Wenn ein Browser standardmäßig auf ein tag, it:

Pausiert die HTML-Analyse Ladet das Skript herunter Führt das Skript aus 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 wurde, 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 und möglicherweise Abhängigkeiten zerstören.

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

Attribute Download Execution HTML Parsing Main Risk None Blocks Immediate Paused Slow Initial Render Async Parallel ASAP Paused when downloaded Race Conditions Defer Parallel After HTML Continues Delayed Functionality

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:

Regelmäßige 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. 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. 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. Skripte mit Asynchronität und Verzögerung:

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

Beispiel für eine Ausführungsreihenfolge:

Mögliche Ausführungsreihenfolge:

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

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

Best Practices

Verwenden Sie Async für unabhängige Skripte wie Analysen. Verwenden Sie defer für Skripte, die von DOM oder anderen Skripten abhängen. Platzieren Sie Skripte im mit async oder verschieben Sie den Download, um früher zu beginnen. Erwägen 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 .