Deep Thought

JavaScript in HTML einbinden

2 min read

JavaScript in HTML einbinden

Inline Script

JS-Code wird direkt innerhalb eines <script>-Tags im HTML geschrieben, ohne externe Datei.

<script>
  console.log("Hallo aus Inline-Script!");
</script>

⚠️ Achtung: Die Ausführung des Javascript erfolgt genau an der Stelle im HTML. Wenn nach dem script Tag noch HTML-Elemente folgen, kann im Script noch nicht darauf zugegriffen werden.

Script (extern, ohne Attribut)

JS wird aus einer externen Datei geladen. Das Parsing des HTML wird an dieser Stelle blockiert, bis das Skript geladen und ausgeführt wurde.

<head>
  <script src="app.js"></script>
</head>

⚠️ Achtung: Die Ausführung des Javascript erfolgt genau an der Stelle im HTML. Es ist noch kein Body geladen.

Script async

Externe Datei wird parallel zum HTML-Parsing geladen und sofort nach dem Laden ausgeführt (unterbricht das Parsing kurz). Reihenfolge mehrerer async-Skripte ist nicht garantiert. Kann aufgrund des gleichzeitigen Ladens zu schnelleren Ladezeiten führen.

<head>
  <script async src="analytics.js"></script>
</head>

⚠️ Achtung: Welche Teile des HTML bei der Ausführung des Scripts schon geladen sind ist nicht deterministisch.

Script defer

Externe Datei wird parallel zum HTML-Parsing geladen, aber erst nach vollständigem Parsing (und vor DOMContentLoaded) ausgeführt. Reihenfolge mehrerer defer-Skripte bleibt erhalten.

<head>
  <script defer src="app.js"></script>
</head>

✅ Sehr oft die Standard-Methode bei moderner Webentwicklung. Paralleles Laden, aber vollständiger DOM ist bereits vorhanden.

Am Ende des <body>

Klassische Variante: <script>-Tag wird direkt vor dem schließenden </body>-Tag platziert, damit der DOM beim Ausführen bereits vorhanden ist.

<body>
  <h1>Meine Seite</h1>
  <p>Inhalt ...</p>
 
  <script src="app.js"></script>
</body>
</html>

💡 Praktikable Alternative zu defer, wenn man ältere Browser ohne defer-Unterstützung berücksichtigen muss oder das Script bewusst so spät wie möglich laden will. Nachteil: Wird das Script erst im HTML-Quellcode gefunden, wenn der Parser dort ankommt – im Gegensatz zu defer/async im <head>, wo der Download schon früh (parallel zum restlichen Parsing) starten kann. Dadurch startet der JS-Download tendenziell etwas später als bei defer.

</>

Graph View

Backlinks