Async, defer és dinamikus szkriptek típusainak megismerése.
A szkriptek manapság nehezebbek lehetnek, mint a HTML, és a letöltési méretük is nagyobb, és a feldolgozási idő is hosszabb.
Mégis adódhat néhány fontos probléma, például:
- A szkriptek nem látják az alattuk lévő DOM-elemeket
- Ha egy terjedelmes szkript van az oldal tetején, az “blokkolja az oldalt”. A felhasználók nem látják az oldal tartalmát, amíg az le nem töltődik és le nem fut.
Megoldhatjuk ezt a problémát azzal, hogy a scriptet a végére (html után) helyezzük, de ez a megoldás a html betöltése után kényszeríti a script betöltését. Hosszú HTML-dokumentumok esetében ez észrevehető késedelmet jelenthet, ha az emberek lassú internettel rendelkeznek.
Szerencsére van két <script> attribútum, amely megoldja számunkra a problémát: defer és async.
A defer attribútummal a böngésző a szkriptet “háttér” üzemmódban tölti be, és akkor hajtja végre, amikor betöltődik.
A defer üzemmód tehát megakadályozza az oldal blokkolását, és a deferrel rendelkező szkriptek mindig akkor kerülnek végrehajtásra, amikor a DOM készen áll, de a DOMContentLoaded esemény előtt.
A DOMContentLoaded esemény akkor lép működésbe, amikor a kezdeti HTML-dokumentum teljesen betöltődött és elemezve lett, anélkül, hogy megvárná a stíluslapok, képek és alképek betöltésének befejezését.
A halasztott szkriptek megtartják relatív sorrendjüket, akárcsak a normál szkriptek. Tehát ha először egy hosszú szkriptünk van, majd egy kisebb, akkor az utóbbi várakozik.
A defer attribútum azonban figyelmen kívül marad, ha a <script> tagben nincs src.
Async
Az async attribútum azt jelenti, hogy segíti a szkript “független” módban történő betöltését.
A böngésző úgy tölti be az oldalakat, hogy nem vár az async szkriptek betöltésére. A DOMContentLoaded és az async scriptek nem várnak egymásra (“load-first” sorrend).
A többi script nem vár a async scriptekre, és a async scriptek nem várnak rájuk. Az aszinkron mód (mint a halasztott mód) nem blokkolja az oldalt.
Aszinkron szkriptek nagyszerűek, ha független, harmadik féltől származó szkriptet integrálunk az oldalba: számlálók, hirdetések, analitikai eszközök és így tovább, mivel ezek nem függnek a mi szkriptjeinktől, és a szkriptjeinknek nem kell várniuk rájuk.
Dinamikus
Dinamikusan is hozzáadhatunk egy szkriptet JavaScript segítségével:
A szkript a dokumentumhoz csatolás után azonnal elkezd betöltődni, és alapértelmezés szerint “aszinkron” szkriptként viselkedik.
Ez azt jelenti:
- Nem várnak semmire, semmi sem vár rájuk.
- A szkript, amelyik először betöltődik – először fut (“load-first” sorrend).
De a dinamikus szkriptek aszinkron üzemmódját kikapcsolhatjuk a script.async = false beállításával, mielőtt a html-hez csatolnánk.
Summary
Az async és a defer egy dolog közös: az ilyen szkriptek letöltése nem blokkolja az oldal renderelését. Így a felhasználó azonnal elolvashatja az oldal tartalmát és megismerkedhet az oldallal.
Köszönjük az olvasást. Remélem, tetszett 😎