W HTML5 dostajemy dwa nowe atrybuty boolean dla znacznika <script>: async i defer. Async pozwala na wykonywanie skryptów asynchronicznie, a defer pozwala na ich wykonanie dopiero po parsowaniu całego dokumentu.
Te dwa atrybuty są niezbędne do zwiększenia szybkości i wydajności stron internetowych. Pozwalają one na wyeliminowanie JavaScript blokującego renderowanie, gdzie strona musiałaby załadować i wykonać skrypty przed zakończeniem renderowania strony. Oto przykład użycia:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
W przypadku async, plik jest pobierany asynchronicznie, a następnie wykonywany zaraz po pobraniu.
W przypadku defer, plik jest pobierany asynchronicznie, ale wykonywany dopiero po zakończeniu parsowania dokumentu. Z defer, skrypty będą wykonywane w tej samej kolejności, w jakiej zostały wywołane. To sprawia, że defer jest atrybutem z wyboru, gdy skrypt zależy od innego skryptu. Na przykład, jeśli używasz jQuery, jak również innych skryptów, które od niego zależą, użyj defer na nich (łącznie z jQuery), upewniając się, że jQuery zostanie wywołane przed skryptami zależnymi.
Dobrą strategią jest użycie async, gdy jest to możliwe, a następnie defer, gdy async nie jest opcją.
👉Zauważ, że oba atrybuty nie mają żadnego wpływu na skrypty inline.
Wsparcie przeglądarki
Czy mogę użyć script-async? Dane dotyczące wsparcia dla funkcji script-async w głównych przeglądarkach z caniuse.com.