Optimale Platzierung von Skript-Tags im HTML-Markup Einführung Bei der Integration von JavaScript in HTML-Dokumente ist die richtige Platzierung von Tags sind seit langem Gegenstand von Debatten. In diesem Artikel werden die Best Practices für die Tag-Platzierung untersucht und die Missverständnisse im Zusammenhang mit dem <head> und <body> Abschnitte.</p> <h3>Historische Missverständnisse</h3> <p>In der Vergangenheit wurde davon abgeraten, <script> Tags im <head> Abschnitt. Diese Empfehlung war jedoch veraltet und beruhte auf der Möglichkeit, dass Skripte das Rendern von Seiten während der Analyse blockieren könnten.</p> <p>Umgekehrt ist die Platzierung von <script> Tags am Anfang des <body> Abschnitt wurde ebenfalls als unerwünscht eingestuft. Dies lag daran, dass der Browser das JavaScript analysieren musste, bevor er die Seite vollständig rendern konnte, was zu potenziellen Leistungsproblemen führen konnte.</p> <h3>Moderne Best Practices</h3> <p>Heute ist die optimale Platzierung für <script> -Tags befindet sich im <head> Abschnitt. Dadurch können Browser sofort mit dem Herunterladen von Skripten beginnen, ohne die Analyse des restlichen Dokuments zu blockieren.</p> <p>Um das mit der Skriptanalyse verbundene Blockierungsverhalten zu vermeiden, unterstützen Browser jetzt die Attribute „async“ und „defer“.</p> <h3> Verwenden von async- und defer-Attributen</h3> <p><strong>Async:</strong> Skripte mit dem async-Attribut sind asynchron ausgeführt, was bedeutet, dass der Browser das Dokument weiter analysieren kann, während das Skript heruntergeladen und ausgeführt wird.</p> <p><strong>Defer:</strong> Skripte mit dem Defer-Attribut werden in der Reihenfolge ausgeführt, in der sie im Dokument erscheinen, jedoch erst danach Das gesamte Dokument wurde analysiert.</p> <p><strong>Module:</strong> JavaScript-Module mit Typ="module" werden asynchron geladen und behandelt wie verzögerte Skripte.</p> <h3>Fazit</h3> <p>Durch die Verwendung der Attribute async, defer oder module und die Platzierung von <script> Tags im <head> Im Abschnitt können Website-Entwickler die Geschwindigkeit beim Laden von Seiten optimieren und die Benutzererfahrung verbessern.</p> <h3>Referenzen</h3> <ul> <li>[async vs defer attributes](https://www.html5rocks.com/en/tutorials /speed/script-loading/)</li> <li>[JavaScript effizient laden mit defer and async](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/defer-loading-javascript)</li> <li>[Renderblockierendes JavaScript entfernen](https://www .w3.org/TR/html5/scripting-1.html#remove-render-blocking-javascript)</li> <li>[Async, Defer, Module: Ein visueller Cheatsheet](https://addyosmani.com/blog/async-defer-modules-explained/#~a-visual-explanation)</li> <li>[<script>: Typattribut](https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)</li> </ul>