Waarom worden scripts meestal aan het einde van de body-tag gekoppeld?
sobes.tech AI
Antwoord van AI
Om te voorkomen dat de pagina rendering wordt geblokkeerd en om toegang tot DOM-elementen direct na het laden te garanderen.
Het opnemen van scripts in <head> of aan het begin van <body> zonder de attributen async of defer, zorgt ervoor dat de browser het HTML-parserproces en de pagina-rendering onderbreekt totdat het script is geladen en uitgevoerd. Dit vertraagt de zichtbare prestaties van de site.
Het plaatsen aan het einde van <body> garandeert dat het DOM-boom al volledig is opgebouwd op het moment dat het script wordt uitgevoerd, waardoor directe interactie met de elementen mogelijk is zonder gebruik te maken van eventhandlers zoals DOMContentLoaded of load alleen voor toegang tot de elementen.
De attributen async en defer zijn moderne alternatieven die meer flexibele opties bieden voor het laden van scripts zonder het HTML-parserproces te blokkeren:
async: Het script wordt asynchroon geladen en onmiddellijk uitgevoerd na het laden, zonder te wachten op volledige DOM-lading. De volgorde van uitvoering van asynchrone scripts wordt niet gegarandeerd.defer: Het script wordt asynchroon geladen en uitgevoerd na volledige parsing van HTML, maar vóór hetDOMContentLoaded-evenement. Scripts metdeferworden uitgevoerd in de volgorde waarin ze in de markup verschijnen.