Asynkroniset, lykkäävät ja dynaamiset skriptit

Nykyaikana skriptit voivat olla raskaampia kuin HTML ja niiden latauskoko on suurempi, ja myös käsittelyaika on pidempi.

Mutta voi olla joitakin tärkeitä ongelmia, kuten:

1. Skriptit eivät näe allaan olevia DOM-elementtejä
2. Jos sivun yläreunassa on tilaa vievä skripti, se ”tukkii sivun”. Käyttäjät eivät näe sivun sisältöä ennen kuin se latautuu ja käynnistyy.

Voidaan ratkaista tämä ongelma sijoittamalla skripti loppuun (html:n jälkeen), mutta tämä ratkaisu pakottaa skriptin latautumaan html:n latautumisen jälkeen. Pitkissä HTML-dokumenteissa tämä voi olla huomattava viive, jos ihmisillä on hidas internet.

Onneksi on kaksi <script>-attribuuttia, jotka ratkaisevat ongelman puolestamme: defer ja async.

Defer-attribuutilla selain lataa skriptin ”taustatilassa” ja suorittaa sen, kun se latautuu.

Siten defer-tila estää sivun tukkeutumisen, ja defer-attribuutilla varustetut skriptit ajetaan aina DOM:n ollessa valmiina, mutta kuitenkin DOMContentLoaded-tapahtuman DOMContentLoaded edellä.

DOMContentLoaded-tapahtuma syttyy, kun alkuperäinen HTML-dokumentti on ladattu ja jäsennelty kokonaan odottamatta tyylilomakkeiden, kuvien ja alakehysten latautumisen päättymistä.

Deferred-skriptit säilyttävät suhteellisen järjestyksensä kuten tavalliset skriptitkin. Jos siis ensin on pitkä skripti ja sitten pienempi, jälkimmäinen odottaa.

Mutta defer-attribuutti jätetään huomiotta, jos <script>-tagissa ei ole src.

Async

Async-attribuutti tarkoittaa, että se auttaa skriptiä latautumaan ”itsenäisessä” tilassa.

Selain lataa sivut odottamatta asynkisten skriptien latautumista. DOMContentLoaded ja async-skriptit eivät odota toisiaan (”load-first”-järjestys).

Muut skriptit eivät odota async-skriptejä, eivätkä async-skriptit odota niitä. Asynkinen tila (kuten lykkäystila) ei blokkaa sivua.

Asynkiset skriptit ovat loistavia, kun integroimme sivulle riippumattoman kolmannen osapuolen skriptin: laskurit, mainokset, analytiikkatyökalut ja niin edelleen, koska ne eivät ole riippuvaisia meidän skripteistämme, eikä meidän skriptejemme pitäisi odottaa niitä.

Dynaaminen

Voimme lisätä skriptin myös dynaamisesti JavaScriptin avulla:

Skripti alkaa latautua heti, kun se on liitetty dokumenttiin, ja se käyttäytyy oletusarvoisesti ”asynkisten” skriptien tavoin.

Se tarkoittaa:

1. Ne eivät odota mitään, mikään ei odota niitä.
2. Skripti, joka latautuu ensimmäisenä – suoritetaan ensimmäisenä (”load-first”-järjestys).

Mutta voimme kytkeä dynaamisten skriptien asynkronointitilan pois päältä asettamalla script.async = false ennen html:ään liittämistä.

Yhteenveto

Kummallakin async:llä ja defer:llä on yksi yhteinen piirre: tällaisten skriptien lataaminen ei estä sivun renderöintiä. Käyttäjä voi siis lukea sivun sisällön ja tutustua sivuun välittömästi.

Kiitos lukemisesta. Toivottavasti pidit siitä 😎