Async, Defer och dynamiska skript

Nuförtiden kan skript vara tyngre än HTML och deras nedladdningsstorlek är större, och bearbetningstiden är också längre.

Men det kan finnas några viktiga problem som:

1. Skripter kan inte se DOM-element under dem
2. Om det finns ett skrymmande skript högst upp på sidan ”blockerar” det sidan. Användarna kan inte se sidans innehåll förrän det laddas ner och körs.

Vi kan lösa det här problemet genom att placera skriptet i slutet (efter html), men den lösningen tvingar skriptet att laddas efter att html laddats. För långa HTML-dokument kan det bli en märkbar fördröjning om folk har långsamt internet.

Turligtvis finns det två <script>-attribut som löser problemet för oss: defer och async.

Med attributet defer laddar webbläsaren skriptet i ”bakgrundsläge” och kör det när det laddas.

Så defer-läget förhindrar att sidan blockeras och skript med defer exekveras alltid när DOM är redo, men före DOMContentLoaded händelsen.

Händelsen DOMContentLoaded utlöses när det ursprungliga HTML-dokumentet har laddats och analyserats fullständigt, utan att vänta på att formatmallar, bilder och underramar ska vara färdiga med att laddas.

Deferred scripts behåller sin relativa ordning, precis som vanliga scripts. Så om vi har ett långt skript först och sedan ett mindre skript väntar det senare.

Men defer-attributet ignoreras om <script>-taggens src inte har någon src.

Async

Assync-attributet innebär att det hjälper skriptet att laddas i ”självständigt” läge.

Bläsaren laddar sidor utan att vänta på att async-skript laddas. DOMContentLoaded och asynkrona skript väntar inte på varandra (”load-first”-ordning).

Andra skript väntar inte på async-skript, och async-skript väntar inte på dem. Async-läget (liksom defer-läget) blockerar inte sidan.

Async-skript är bra när vi integrerar ett oberoende tredjepartsskript i sidan: räknare, annonser, analysverktyg och så vidare, eftersom de inte är beroende av våra skript och våra skript inte ska vänta på dem.

Dynamiskt

Vi kan också lägga till ett skript dynamiskt med hjälp av JavaScript:

Skriptet börjar laddas så fort det läggs till i dokumentet och beter sig som standard som ”asynkrona” skript.

Det betyder:

1. De väntar inte på något, ingenting väntar på dem.
2. Det skript som laddas först – körs först (”load-first”-ordning).

Men vi kan stänga av asynkronläget för dynamiska skript genom att ställa in script.async = false innan vi lägger till det i html.

Sammanfattning

Både async och defer har en sak gemensamt: nedladdning av sådana skript blockerar inte sidans rendering. Användaren kan alltså läsa sidans innehåll och bekanta sig med sidan omedelbart.

Tack för att du läste. Jag hoppas att du gillade den 😎

.