Cu HTML5, avem două noi atribute booleene pentru tag-ul <script>: async și defer. Async permite executarea scripturilor în mod asincron, iar defer permite executarea numai după ce întregul document a fost analizat.
Aceste două atribute sunt indispensabile pentru creșterea vitezei și performanței site-urilor web. Ele permit eliminarea JavaScript-ului care blochează redarea, în cazul în care pagina ar trebui să încarce și să execute scripturile înainte de a termina de redat pagina. Iată un exemplu de utilizare:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Cu async, fișierul este descărcat în mod asincron și apoi executat imediat ce este descărcat.
Cu defer, fișierul este descărcat în mod asincron, dar este executat numai atunci când analiza documentului este finalizată. Cu defer, scripturile se vor executa în aceeași ordine în care sunt apelate. Acest lucru face ca defer să fie atributul de ales atunci când un script depinde de un alt script. De exemplu, dacă utilizați jQuery, precum și alte scripturi care depind de acesta, veți utiliza defer pentru acestea (inclusiv jQuery), asigurându-vă că apelați jQuery înaintea scripturilor dependente.
O strategie bună este să folosiți async atunci când este posibil, iar apoi defer atunci când async nu este o opțiune.
👉Rețineți că ambele atribute nu au niciun efect asupra scripturilor inline.
Suport pentru browser
Pot folosi script-async? Date despre suportul pentru caracteristica script-async în principalele browsere de pe caniuse.com.
.