jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose HTML-Script-Ladestrategie-Builder

Generiere Script-Tags mit der richtigen Ladestrategie — normal, defer, async oder type module.

Tool wird geladen...

Was ist HTML-Script-Ladestrategie-Builder?

Wie ein Skript geladen wird, beeinflusst die Seitenleistung und die Ausführungsreihenfolge. Ein normales Skript blockiert das HTML-Parsing. defer lädt parallel und führt nach dem HTML-Parsing aus. async lädt parallel und führt sofort aus, wenn es bereit ist. type='module'-Skripte werden standardmäßig deferiert. Die richtige Strategie hängt davon ab, ob das Skript kritisch ist, von anderen Skripten abhängt oder unabhängig ist.

Kurze Antwort

Wählen Sie eine Skript-Ladestrategie basierend auf dem Ausführungszeitpunkt. Verwenden Sie defer für Skripte, die das vollständige DOM benötigen. Verwenden Sie async für unabhängige Skripte wie Analytics. Verwenden Sie type='module' für modernen ES-Modul-Code.

Last updated: 2026-05-25

Einschränkungen

  • defer erhält die Skript-Ausführungsreihenfolge; async nicht. Wählen Sie basierend darauf, ob die Reihenfolge wichtig ist.
  • async-Skripte werden sofort nach Download ausgeführt, was das Rendering blockieren kann.
  • type='module'-Skripte werden standardmäßig deferiert und benötigen kein zusätzliches defer-Attribut.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Skript-Typ, der Ihrem Anwendungsfall entspricht.
  2. Geben Sie die Skript-URL ein.
  3. Das Tool empfiehlt das beste Lade-Attribut.
  4. Kopieren Sie das Skript-Tag mit den korrekten Attributen.

Wofür du es nutzen kannst

  • Fügen Sie ein deferred Anwendungs-Bundle hinzu, das nach dem Seiten-Parsing ausgeführt wird.
  • Binden Sie ein async Analytics-Skript ein, das unabhängig lädt.
  • Richten Sie ein Modul-Skript für einen Vite- oder Astro-Einstiegspunkt ein.

Anwendungsfalle

Praxisbeispiele

Beispiel

Analytics-Skript mit async

Ein Analytics-Skript verwendet async, damit es ohne Blockieren der Seite lädt.

Beispiel

App-Bundle mit defer

Ein App-Bundle verwendet defer, um die Ausführungsreihenfolge beizubehalten, ohne das HTML-Parsing zu blockieren.

Haufige Fehler

  • async für Skripte zu verwenden, die von DOM-Elementen oder anderen Skripten abhängen.
  • defer für Skripte zu verwenden, die sofort unabhängig vom Parse-Zustand ausgeführt werden müssen.
  • type='module' für Skripte zu verwenden, die keine ES-Module sind.

Überprüfung

  1. Öffnen Sie das Chrome DevTools Netzwerk-Panel und prüfen Sie die Initiator- und Wasserfall-Spalten für den Lade- und Ausführungszeitpunkt.
  2. Testen Sie Seiten-Rendering und Interaktivität mit verschiedenen Strategien im Performance-Panel.

Vergleich

async vs defer vs type="module"

Aspectasyncdefertype="module"
Execution timingExecutes as soon as the script finishes downloading, before DOMContentLoadedExecutes after HTML parsing is complete, just before DOMContentLoadedExecutes after HTML parsing is complete, same as defer behavior
Script order guaranteeNo. Scripts execute in the order they finish downloading.Yes. Scripts execute in the order they appear in the HTML.Yes. Scripts execute in the order they appear, same as defer.
Blocks HTML parsingDoes not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.
Use casesIndependent scripts such as analytics, A/B testing, or social widgetsScripts that need the full DOM such as app bundles that query or modify the pageModern ES module code where import/export syntax is used
Default behavior without attributeWithout any attribute, the script blocks HTML parsing until it downloads and executesN/Atype="module" scripts are deferred by default and do not need an explicit defer attribute

Async downloads in parallel and runs on completion. Defer downloads in parallel but waits for the HTML to finish parsing. Module scripts are deferred by default and support ES module dependency graphs.

FAQ

Fragen zu HTML-Script-Ladestrategie-Builder

Was ist der Unterschied zwischen defer und async?

defer lädt parallel und wartet auf das Ende des HTML-Parsings, wobei die Skript-Reihenfolge erhalten bleibt. async lädt parallel und führt sofort aus, wenn bereit, ohne Reihenfolgegarantie.

Benötigt type='module' defer?

Nein. Modul-Skripte werden standardmäßig deferiert und benötigen kein explizites defer-Attribut.

Wo sollte ich das script-Tag im HTML-Dokument platzieren?

Die moderne Best Practice ist, script-Tags im head mit defer oder type='module' zu platzieren. Beide laden parallel und führen nach DOM-Bereitschaft aus.

Funktioniert defer bei Inline-Skripten?

Nein. defer funktioniert nur bei externen Skripten mit src-Attribut. Inline-Skripte werden während des HTML-Parsings sofort ausgeführt.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren