Zkoumání asynchronních, odložených a dynamických typů skriptů.
V dnešní době mohou být skripty těžší než HTML a jejich velikost ke stažení je větší, a také doba zpracování je delší.
Mohou však nastat některé důležité problémy, například:
- Skripty nevidí prvky DOM pod sebou
- Pokud je objemný skript v horní části stránky, „blokuje stránku“. Uživatelé nevidí obsah stránky, dokud se nestáhne a nespustí.
Tento problém můžeme vyřešit umístěním skriptu na konec (za html), ale toto řešení donutí skript načíst se až po načtení html. U dlouhých dokumentů HTML to může znamenat znatelné zdržení, pokud mají lidé pomalý internet.
Naštěstí existují dva atributy <script>, které tento problém řeší za nás:
Pomocí atributu defer prohlížeč načte skript v režimu „na pozadí“ a spustí ho až po načtení.
Režim defer tak zabrání zablokování stránky a skripty s defer se spustí vždy, když je DOM připraven, ale před událostí DOMContentLoaded.
Událost DOMContentLoaded se vyvolá, když je původní dokument HTML kompletně načten a analyzován, aniž by se čekalo na dokončení načítání stylů, obrázků a dílčích rámců.
Skripty s odložením si zachovávají relativní pořadí stejně jako běžné skripty. Pokud tedy máme nejprve dlouhý skript a pak menší, čeká ten druhý.
Atribut defer je však ignorován, pokud značka <script> nemá src.
Async
Atribut async znamená, že pomáhá skript načíst v „nezávislém“ režimu.
Prohlížeč načítá stránky bez čekání na načtení asynchronních skriptů. DOMContentLoaded a asynchronní skripty na sebe navzájem nečekají (pořadí „load-first“).
Ostatní skripty nečekají na async skripty a async skripty nečekají na ně. Asynchronní režim (stejně jako režim odložení) neblokuje stránku.
Asynchronní skripty jsou skvělé, když do stránky integrujeme nezávislý skript třetí strany: počítadla, reklamy, analytické nástroje a podobně, protože nejsou závislé na našich skriptech a naše skripty by na ně neměly čekat.
Dynamický
Skript můžeme přidat také dynamicky pomocí JavaScriptu:
Skript se začne načítat ihned po připojení k dokumentu a ve výchozím nastavení se chová jako „asynchronní“ skripty.
To znamená:
- Na nic nečekají, nic na ně nečeká.
- Skript, který se načte jako první – spustí se jako první (pořadí „load-first“).
Pro dynamické skripty ale můžeme asynchronní režim vypnout nastavením script.async = false před připojením do html.
Shrnutí
Oba async a defer mají jedno společné: stahování takových skriptů neblokuje vykreslování stránky. Uživatel si tedy může přečíst obsah stránky a okamžitě se s ní seznámit.
Děkujeme za přečtení. Doufám, že se vám to líbilo 😎