HTML5:n myötä saamme kaksi uutta boolean-attribuuttia <script>-tagiin: asynkronointi ja lykkääminen. Async mahdollistaa skriptien suorittamisen asynkronisesti ja defer mahdollistaa suorittamisen vasta sen jälkeen, kun koko dokumentti on jäsennetty.
Nämä kaksi attribuuttia ovat välttämättömiä verkkosivujen nopeuden ja suorituskyvyn lisäämiseksi. Ne mahdollistavat renderöintiä estävän JavaScriptin poistamisen, kun sivun pitäisi ladata ja suorittaa skriptejä ennen kuin sivun renderöinti on valmis. Tässä käyttöesimerkki:
<script defer src="https://www.digitalocean.com/js/jquery.min.js"></script>Async vs. Defer
Async-ominaisuudella tiedosto ladataan asynkronisesti ja suoritetaan heti, kun se on ladattu.
Defer-ominaisuudella tiedosto ladataan asynkronisesti, mutta se suoritetaan vasta, kun dokumentin jäsennys on valmis. Kun käytössä on defer, skriptit suoritetaan samassa järjestyksessä kuin niitä kutsutaan. Tämän vuoksi defer on suositeltava määrite, kun komentosarja riippuu toisesta komentosarjasta. Jos esimerkiksi käytät jQuerya ja muita siitä riippuvaisia skriptejä, voit käyttää defer-attribuuttia kaikkiin skripteihin (myös jQueryyn) ja varmistaa, että jQuerya kutsutaan ennen riippuvaisia skriptejä.
Hyvä strategia on käyttää asynkronointia silloin, kun se on mahdollista, ja sitten deferiä silloin, kun asynkronointi ei ole mahdollista.
👉Huomaa, että molemmilla attribuuteilla ei ole mitään vaikutusta inline-skripteihin.
selaimen tuki
Käytänkö skripti-asynkronointia? Tietoja script-async-ominaisuuden tuesta tärkeimmissä selaimissa caniuse.com-sivustolta.