Warum werden Skripte normalerweise am Ende des body-Tags eingebunden?
sobes.tech KI
Antwort von AI
Um das wichtigsten Aspekte beim Laden von Webseiten ist die Vermeidung von Blockierungen beim Rendern der Seite und der sofortige Zugriff auf DOM-Elemente nach dem Laden.
Wenn Skripte im <head> oder am Anfang des <body> ohne die Attribute async oder defer eingebunden werden, pausiert der Browser das Parsen des HTML und das Rendern der Seite, bis das Skript geladen und ausgeführt ist. Dies verlangsamt die sichtbare Leistung der Webseite.
Das Einbinden am Ende des <body> stellt sicher, dass das DOM-Baum bereits vollständig aufgebaut ist, wenn das Skript ausgeführt wird, was eine direkte Interaktion mit den Elementen ermöglicht, ohne Event-Handler wie DOMContentLoaded oder load nur zum Zugriff auf die Elemente verwenden zu müssen.
Die Attribute async und defer sind moderne Alternativen, die flexiblere Möglichkeiten bieten, Skripte zu laden, ohne das HTML-Parsing zu blockieren:
async: Das Skript wird asynchron geladen und sofort nach dem Laden ausgeführt, ohne auf das vollständige Laden des DOM zu warten. Die Ausführungsreihenfolge asynchroner Skripte ist nicht garantiert.defer: Das Skript wird asynchron geladen und nach dem vollständigen Parsen des HTML ausgeführt, vor demDOMContentLoaded-Ereignis.defer-Skripte werden in der Reihenfolge ihrer Platzierung im Dokument ausgeführt.