Laden van Javascript in HTML pagina’s

Er zijn een aantal manier om je Javascript te laden. Elke manier heeft zijn voor- en nadelen.

In de <head>

Je Javascript kan geladen worden in de <head> van je webpagina.Het nadeel hiervan is dat de rest van de pagina pas geladen wordt als je Javascript klaar is met laden. Dat kan zorgen voor een ongewenste vertraging.

Een tweede nadeel is dat Javascript meestal de DOM Document Object Model: een hiërachisch model van alle HTML elementen. Voor meer info, zie de beschrijving van de DOM op css-tricks.com.  nodig heeft. Met Javascript in de <head>, heb je kans dat de DOM nog niet gemaakt is.

Er zijn ruwweg drie manieren voor het laden van je Javasript:

  • onderaan de pagina,
  • in de <head> met async,
  • in de <head> met defer

Onderaan de pagina

Bij voorkeur plaats je je Javascript onderaan de pagina, vlak voor de </body> tag. Hierdoor wordt de pagina zonder ophouden geladen en is de DOM gereed voor het laden van je Javascript.

Maar, er zijn situaties waarin het nodig is dat je Javascript geladen wordt voordat de pagina zelf geladen is. In dat geval kun je je Javascript in de <head> plaatsen. Met async of defer kun je laad- of DOM-problemen oplossen.

async

Async is een afkorting van asynchroon. Als Javascript asynchroon wordt geladen, wordt tegelijkertijd de rest van de pagina geladen. Geen vertraging dus in het laden van je pagina (rendering blocking). Blijft alleen het probleem over, dat de DOM nog niet klaar is. Dat laatste kan Javascript errors geven.

defer

Met defer wordt aan de browser de opdracht gegeven wel de Javascript te laden, maar deze pas uit te voeren als de DOM gereed is. Handig!