Met HTML5 krijgen we twee nieuwe booleaanse attributen voor de <script> tag: async en defer. Met async kunnen scripts asynchroon worden uitgevoerd en met defer kunnen ze pas worden uitgevoerd nadat het hele document is geparsed.
Deze twee attributen zijn een must om de snelheid en prestaties van websites te verbeteren. Ze maken het mogelijk om render-blokkerende JavaScript te elimineren, waar de pagina scripts zou moeten laden en uitvoeren voordat de pagina wordt gerenderd. Hier is een gebruiksvoorbeeld:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Met async wordt het bestand asynchroon gedownload en vervolgens uitgevoerd zodra het is gedownload.
Met defer wordt het bestand asynchroon gedownload, maar pas uitgevoerd als het parsen van het document is voltooid. Met defer worden scripts uitgevoerd in dezelfde volgorde als ze worden aangeroepen. Dit maakt uitstellen het attribuut bij uitstek wanneer een script afhankelijk is van een ander script. Als je bijvoorbeeld jQuery gebruikt en andere scripts die daarvan afhankelijk zijn, dan gebruik je defer voor alle scripts (inclusief jQuery), waarbij je ervoor zorgt dat jQuery voor de afhankelijke scripts wordt aangeroepen.
Een goede strategie is om async te gebruiken als het kan, en dan defer als async geen optie is.
👉Merk op dat beide attributen geen effect hebben op inline scripts.
Browser ondersteuning
Kan ik script-async gebruiken? Gegevens over de ondersteuning van de script-async functie door de belangrijkste browsers van caniuse.com.