Med HTML5 får vi två nya booleska attribut för <script>-taggen: async och defer. Async gör det möjligt att utföra skript asynkront och defer gör det möjligt att utföra dem först när hela dokumentet har analyserats.
Dessa två attribut är ett måste för att öka hastigheten och prestandan på webbplatser. De gör det möjligt att eliminera renderingsblockerande JavaScript där sidan måste ladda in och exekvera skript innan den är klar att rendera sidan. Här är ett användningsexempel:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Med async laddas filen ner asynkront och exekveras så fort den laddats ner.
Med defer laddas filen ner asynkront, men exekveras först när dokumentets parsning är klar. Med defer kommer skript att exekveras i samma ordning som de anropas. Detta gör defer till det bästa attributet när ett skript är beroende av ett annat skript. Om du till exempel använder jQuery och andra skript som är beroende av det, kan du använda defer för dem (inklusive jQuery) och se till att du anropar jQuery före de beroende skripten.
En bra strategi är att använda async när det är möjligt och sedan defer när async inte är ett alternativ.
👉Bemärk att båda attributen inte har någon effekt på inline-skript.
Browser Support
Kan jag använda script-async? Uppgifter om stöd för script-async-funktionen i de största webbläsarna från caniuse.com.