Med HTML5 får vi to nye boolske attributter til <script>-tagget: async og defer. Async gør det muligt at udføre scripts asynkront, og defer gør det først muligt at udføre dem, når hele dokumentet er blevet analyseret.
Disse to attributter er et must for at øge hastigheden og ydeevnen på websteder. De gør det muligt at eliminere JavaScript, der blokerer for rendering, hvor siden skal indlæse og udføre scripts, før den er færdig med at rendere siden. Her er et brugseksempel:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Med async bliver filen hentet asynkront og derefter udført, så snart den er hentet.
Med defer bliver filen hentet asynkront, men først udført, når parsningen af dokumentet er afsluttet. Med defer udføres scripts i samme rækkefølge, som de bliver kaldt. Dette gør defer til den foretrukne attribut, når et script er afhængigt af et andet script. Hvis du f.eks. bruger jQuery og andre scripts, der er afhængige af det, skal du bruge defer på dem (inklusive jQuery) og sørge for at kalde jQuery før de afhængige scripts.
En god strategi er at bruge async, når det er muligt, og derefter defer, når async ikke er en mulighed.
👉Bemærk, at begge attributter ikke har nogen effekt på inline-scripts.
Browser Support
Kan jeg bruge script-async? Data om understøttelse af script-async-funktionen på tværs af de vigtigste browsere fra caniuse.com.