Skripte: async, defer
Eine effiziente Seitenladung ist entscheidend für die Web-Performance. JavaScript muss sorgfältig verwaltet werden, um Ladezeiten zu optimieren und die Benutzererfahrung zu verbessern. Dieser Artikel behandelt Techniken zum asynchronen Laden von Skripten, insbesondere die Attribute async und defer in <script>-Tags. Die korrekte Implementierung dieser Attribute steuert, wie und wann JavaScript-Dateien geladen werden, und beschleunigt Ihre Website erheblich.
Das async-Attribut verstehen
Was ist das async-Attribut?
Wenn Sie das async-Attribut zu einem <script>-Tag hinzufügen, weist es den Browser an, das Skript asynchron zum Rest der Seite zu laden. Das bedeutet, dass das Skript im Hintergrund heruntergeladen wird, ohne das Rendern der Seite zu blockieren. Sobald das Skript heruntergeladen ist, wird es sofort ausgeführt, was möglicherweise vor der vollständigen Analyse des HTML-Dokuments geschieht.
Hinweis: Sowohl async als auch defer funktionieren nur mit externen Skripten, die das src-Attribut enthalten.
Code Example: Using async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Example</title>
</head>
<body>
<h1>Testing Async</h1>
<script async src="https://example.com/async-script.js"></script>
</body>
</html>Vorteile der Verwendung von async
- Nicht-blockierend: Der HTML-Analyseprozess läuft weiter, während das Skript heruntergeladen wird.
- Geschwindigkeit: Kann die wahrgenommene Ladezeit verkürzen, da das Skript im Hintergrund verarbeitet wird.
Das defer-Attribut nutzen
Was ist das defer-Attribut?
Das defer-Attribut ermöglicht beim Einsatz in einem <script>-Tag ebenfalls das asynchrone Laden des Skripts. Im Gegensatz zu Skripten mit dem async-Attribut werden Skripte mit dem defer-Attribut jedoch erst ausgeführt, nachdem das HTML-Dokument vollständig analysiert wurde. Diese Skripte werden nach Abschluss der Analyse, aber vor dem Auslösen des DOMContentLoaded-Ereignisses ausgeführt. Dies ist ideal für Skripte, die das gesamte DOM benötigen und die Struktur des Dokuments nicht beeinflussen.
Code Example: Using defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Example</title>
</head>
<body>
<h1>Testing Defer</h1>
<script defer src="https://example.com/defer-script.js"></script>
</body>
</html>Vorteile der Verwendung von defer
- DOM bereit: Stellt sicher, dass das gesamte HTML-Dokument vor der Ausführung analysiert wurde.
- Reihenfolge erhalten: Skripte werden in der Reihenfolge ausgeführt, in der sie im Dokument erscheinen, was für voneinander abhängige Skripte entscheidend ist.
Wann async vs. defer verwenden
Die Wahl zwischen async und defer hängt weitgehend von Ihren spezifischen Anforderungen ab:
- Verwenden Sie
async, wenn das Skript nicht von anderen Skripten oder DOM-Elementen abhängt. - Verwenden Sie
deferfür Skripte, die das gesamte DOM benötigen, oder wenn die Ausführungsreihenfolge der Skripte wichtig ist.
Praxisbeispiel: Entscheidungen zum Skriptladen
Stellen Sie sich ein Szenario vor, in dem Sie eine Utility-Bibliothek (wie lodash) und Ihre Haupt-JavaScript-Datei, die von dieser Bibliothek abhängt, laden müssen. So könnten Sie entscheiden, diese Skripte zu laden:
<script defer src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
<script defer src="script.js"></script>In diesem Setup werden beide Skripte asynchron geladen, starten aber erst, wenn die gesamte Seite analysiert wurde, und werden in der Reihenfolge ausgeführt, in der sie erscheinen.
Fazit
Der effektive Einsatz der Attribute async und defer in Skript-Tags ist für die moderne Webentwicklung entscheidend. Durch das Verständnis und die korrekte Anwendung dieser Attribute können Entwickler schnellere Seitenladezeiten und eine bessere Benutzererfahrung gewährleisten. Das asynchrone Laden von Skripten dreht sich um Performance-Optimierung und die Entwicklung effizienter, benutzerzentrierter Webanwendungen.
Praxis
Wofür werden die Attribute 'async' und 'defer' in JavaScript verwendet?