A HTML5-tel két új bólus attribútumot kapunk a <script> taghez: async és defer. Az async lehetővé teszi a szkriptek aszinkron végrehajtását, a defer pedig csak a teljes dokumentum elemzése után teszi lehetővé a végrehajtást.
Ez a két attribútum elengedhetetlen a weboldalak sebességének és teljesítményének növeléséhez. Lehetővé teszik a renderelést blokkoló JavaScript kiküszöbölését, amikor az oldalnak be kellene töltenie és végre kellene hajtania a szkripteket, mielőtt befejezné az oldal renderelését. Íme egy használati példa:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs. Defer
Async esetén a fájl letöltése aszinkron történik, majd a letöltés után azonnal végrehajtódik.
Defer esetén a fájl letöltése aszinkron történik, de csak akkor hajtódik végre, amikor a dokumentum elemzése befejeződött. A defer használatával a szkriptek a meghívásuk sorrendjében kerülnek végrehajtásra. Ez teszi a defer attribútumot a legjobb választássá, ha egy szkript egy másik szkripttől függ. Ha például a jQuery-t és más, tőle függő szkripteket használsz, akkor a defer-t használd rájuk (beleértve a jQuery-t is), ügyelve arra, hogy a jQuery-t a függő szkriptek előtt hívd meg.
A jó stratégia az async használata, ha lehetséges, és a defer használata, ha az async nem lehetséges.
👉Megjegyezzük, hogy mindkét attribútumnak nincs hatása az inline szkriptekre.
Böngésző támogatás
A script-async használata? Adatok a főbb böngészők script-async funkciójának támogatásáról a caniuse.com oldalról.