Wat is het verschil in werking van de modi (async, defer of type) van het <script>-tag?

<script> zonder attributen

• HTML wordt tot aan het <script>-tag geparsed.
• De HTML parsing wordt gepauzeerd bij het detecteren van het <script>-tag.
• De script wordt geladen.
• De script wordt uitgevoerd.
• De HTML parsing wordt hervat na de uitvoering van de script.

<script async>

• HTML wordt gelijktijdig met het laden van de script geparsed.
• De HTML parsing wordt gepauzeerd bij het voltooien van het laden van de script.
• De script wordt uitgevoerd.
• De HTML parsing wordt hervat na de uitvoering van de script.
• De volgorde van uitvoering van scripts met async is niet gegarandeerd, afhankelijk van de laadsnelheid.

<script defer>

• HTML wordt gelijktijdig met het laden van de script geparsed.
• De script wordt uitgevoerd na het voltooien van de HTML parsing, maar vóór het DOMContentLoaded-evenement.
• De volgorde van uitvoering van scripts met defer is gegarandeerd, komt overeen met de volgorde in de HTML.
• Gedrag lijkt op <script> dat vóór de sluitingstag </body> wordt geplaatst.

<script type="module"> (voor ECMAScript-modules)

• Wordt behandeld als <script defer> (uitgestelde uitvoering na parsing, volgorde wordt behouden).
• Kan worden gebruikt met het attribuut async.
• Ondersteunt import/export van modules. Creëert een aparte scope.

Attribuut	Laden van script	Uitvoeren van script	Blokkeren van HTML parsing	Uitvoeringsvolgorde
Geen	Blokkerend	Blokkerend	Ja	Wordt behouden
async	Niet-blokkerend (parallel)	Niet-blokkerend (bij voltooiing van laden)	Nee	Niet gegarandeerd
defer	Niet-blokkerend (parallel)	Niet-blokkerend (na HTML parsing)	Nee	Wordt behouden
type="module"	Niet-blokkerend (parallel)	Niet-blokkerend (na HTML parsing, standaard)	Nee	Wordt behouden (standaard)

// Voorbeeld van eenvoudige script
console.log('Normale script');

// Voorbeeld van asynchrone script
console.log('Asynchrone script');

// Voorbeeld van uitgestelde script
console.log('Uitgesteld script');

// Voorbeeld van module
import { someFunction } from './module.js';
someFunction();
console.log('Module script');