Udforskning af async-, defer- og dynamiske scripttyper.
Nu til dags kan scripts være tungere end HTML, og deres downloadstørrelse er større, og behandlingstiden er også længere.
Men der kan være nogle vigtige problemer, såsom:
- Scripts kan ikke se DOM-elementer under dem
- Hvis der er et omfangsrigt script øverst på siden, “blokerer det siden”. Brugerne kan ikke se sidens indhold, før det downloades og kører.
Vi kan løse dette problem ved at placere scriptet til sidst (efter html), men den løsning vil tvinge scriptet til at blive indlæst, efter at html er indlæst. For lange HTML-dokumenter kan det være en mærkbar forsinkelse, hvis folk har langsomt internet.
Gluksomt nok er der to <script>-attributter, der løser problemet for os: defer og async.
Med defer-attributet indlæser browseren scriptet i “baggrundstilstand” og kører det, når det er indlæst.
Så defer-tilstand forhindrer blokering af siden, og scripts med defer udføres altid, når DOM er klar, men før DOMContentLoaded-hændelsen.
Hændelsen DOMContentLoaded udløses, når det oprindelige HTML-dokument er blevet indlæst og analyseret fuldstændigt, uden at vente på, at stylesheets, billeder og subframes er færdige med at indlæse.
Deferred scripts beholder deres relative rækkefølge ligesom almindelige scripts. Så hvis vi har et langt script først og derefter et mindre script, så venter det sidstnævnte.
Men defer-attributten ignoreres, hvis <script>-taggen ikke har noget src.
Async
Assync-attributten betyder, at den hjælper scriptet med at indlæses i “uafhængig” tilstand.
Browseren indlæser sider uden at vente på, at async-scripts indlæses. DOMContentLoaded og async-scripts venter ikke på hinanden (“load-first”-rækkefølge).
Andre scripts venter ikke på async-scripts, og async-scripts venter ikke på dem. Async-tilstand (ligesom defer-tilstand) blokerer ikke siden.
Async-scripts er gode, når vi integrerer et uafhængigt tredjepartsscript i siden: tællere, annoncer, analyseværktøjer osv., da de ikke er afhængige af vores scripts, og vores scripts bør ikke vente på dem.
Dynamisk
Vi kan også tilføje et script dynamisk ved hjælp af JavaScript:
Scriptet begynder at blive indlæst, så snart det er føjet til dokumentet, og opfører sig som standard som “asynkrone” scripts.
Det betyder:
- De venter ikke på noget, intet venter på dem.
- Det script, der indlæses først – kører først (“load-first”-rækkefølge).
Men vi kan slå async-tilstand fra for dynamiske scripts ved at indstille script.async = false, før vi tilføjer det til html.
Summary
Både async og defer har én ting til fælles: downloading af sådanne scripts blokerer ikke sidens gengivelse. Så brugeren kan læse sidens indhold og stifte bekendtskab med siden med det samme.
Tak for at du læste. Jeg håber, du kunne lide det 😎