Uitleg over async, defer en dynamische scripttypes.
Scripts kunnen tegenwoordig zwaarder zijn dan HTML en hun downloadgrootte is groter, en de verwerkingstijd is ook langer.
Maar er kunnen ook enkele belangrijke problemen zijn, zoals:
- Scripts kunnen de DOM-elementen eronder niet zien
- Als er een omvangrijk script bovenaan de pagina staat, “blokkeert het de pagina”. Gebruikers kunnen de inhoud van de pagina niet zien totdat het is gedownload en uitgevoerd.
We kunnen dit probleem oplossen door het script aan het eind te plaatsen (na html), maar die oplossing dwingt het script te laden nadat html is geladen. Voor lange HTML-documenten kan dat een merkbare vertraging opleveren als mensen traag internet hebben.
Gelukkig genoeg zijn er twee <script>-attributen die het probleem voor ons oplossen: defer en async.
Met het defer-attribuut laadt de browser het script in de ‘achtergrond’-modus en voert het uit wanneer het wordt geladen.
Dus defer-modus voorkomt dat de pagina wordt geblokkeerd en scripts met defer worden altijd uitgevoerd wanneer het DOM gereed is, maar vóór DOMContentLoaded-gebeurtenis.
De gebeurtenis DOMContentLoaded vuurt wanneer het oorspronkelijke HTML-document volledig is geladen en geparseerd, zonder te wachten tot stylesheets, afbeeldingen en subframes klaar zijn met laden.
Uitgestelde scripts behouden hun relatieve volgorde, net als gewone scripts. Dus als we eerst een lang script hebben en dan een kleiner, dan wacht het laatste.
Maar het defer-attribuut wordt genegeerd als de <script>-tag geen src heeft.
Async
Het async-attribuut betekent dat het helpt script in ‘onafhankelijke’ modus te laden.
De browser laadt pagina’s zonder te wachten tot async-scripts zijn geladen. DOMContentLoaded en async scripts wachten niet op elkaar (“load-first” volgorde).
Andere scripts wachten niet op async scripts, en async scripts wachten niet op hen. Async mode (net als defer mode) blokkeert de pagina niet.
Async scripts zijn geweldig wanneer we een onafhankelijk script van derden integreren in de pagina: tellers, advertenties, analytische tools enzovoort, omdat ze niet afhankelijk zijn van onze scripts, en onze scripts zouden niet op hen moeten wachten.
Dynamisch
We kunnen een script ook dynamisch toevoegen met behulp van JavaScript:
Het script begint te laden zodra het aan het document is toegevoegd en gedraagt zich standaard als “async”-scripts.
Dit betekent:
- Ze wachten nergens op, niets wacht op hen.
- Het script dat als eerste laadt – wordt als eerste uitgevoerd (“load-first”-volgorde).
Maar we kunnen async mode voor dynamische scripts uitschakelen door script.async = false in te stellen voordat we het aan html toevoegen.
Summary
Zowel async als defer hebben een ding gemeen: het downloaden van zulke scripts blokkeert het renderen van de pagina niet. De gebruiker kan dus de inhoud van de pagina lezen en onmiddellijk kennismaken met de pagina.
Dank je voor het lezen. Ik hoop dat je het leuk vond 😎