S HTML5 jsme získali dva nové logické atributy pro značku <script>: async a defer. Async umožňuje spouštět skripty asynchronně a defer umožňuje jejich spuštění až po analýze celého dokumentu.
Tyto dva atributy jsou nezbytností pro zvýšení rychlosti a výkonu webových stránek. Umožňují eliminovat JavaScript blokující vykreslování, kdy by stránka musela načíst a provést skripty před dokončením vykreslování stránky. Zde je příklad použití:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs Defer
Při použití async se soubor stáhne asynchronně a spustí se ihned po stažení.
Při použití defer se soubor stáhne asynchronně, ale spustí se až po dokončení analýzy dokumentu. Při použití funkce defer se skripty provedou ve stejném pořadí, v jakém jsou volány. Díky tomu je atribut defer vhodnou volbou v případě, že skript závisí na jiném skriptu. Pokud například používáte jQuery a další skripty, které na něm závisí, použijete u nich (včetně jQuery) defer a ujistíte se, že jQuery bude zavolán před závislými skripty.
Dobrá strategie je použít asynchronní, když je to možné, a pak defer, když asynchronní není možnost.
👉Všimněte si, že oba atributy nemají žádný vliv na inline skripty.
Podpora prohlížeče
Můžu použít script-async? Údaje o podpoře funkce script-async v hlavních prohlížečích z caniuse.com.
.