- Sijoituksella on väliä
- Async ja Defer
- Suorituskykyvertailu
- Ei deferiä eikä asyncia, päähän
- Ei deferiä tai async:tä, runkoon
- Async:llä, päähän
- Deferillä, in the head
- Blocking parsing
- Blocking rendering
- domInteractive
- Keeping things in order
- Just tell me the best way
Lataamalla komentosarjakomentosarjaa HTML-sivulle, on oltava varovainen, ettei se haittaa sivun lataustehoa.
Skripti sisällytetään sivulle perinteisesti näin:
<script src="https://flaviocopes.com/javascript-async-defer/script.js"></script>Kun HTML-parseri löytää tämän rivin, tehdään pyyntö hakea skripti, ja skripti suoritetaan.
Kun tämä prosessi on suoritettu, jäsentely voi jatkua, ja loput HTML:stä voidaan analysoida.
Kuten voit kuvitella, tällä toiminnolla voi olla suuri vaikutus sivun latausaikaan.
Jos skriptin latautuminen kestää hieman odotettua kauemmin, esimerkiksi jos verkko on hieman hidas tai jos käytät mobiililaitetta ja yhteys on hieman huolimaton, kävijä näkee todennäköisimmin tyhjän sivun siihen asti, kunnes skripti on ladattu ja se on suoritettu.
Paikalla on väliä
Kun opit ensimmäistä kertaa HTML:ää, sinulle kerrotaan, että skriptitunnisteet asuvat <head>-tagissa:
<html> <head> <title>Title</title> <script src="https://flaviocopes.com/javascript-async-defer/script.js"></script> </head> <body> ... </body></html>Kuten aiemmin kerroin, kun jäsennin löytää tämän rivin, se hakee skriptin ja suorittaa sen. Sitten, kun se on suorittanut tämän tehtävän, se jatkaa rungon jäsentämistä.
Tämä on huono asia, koska se aiheuttaa paljon viivettä. Hyvin yleinen ratkaisu tähän ongelmaan on laittaa script-tagi sivun alareunaan, juuri ennen sulkevaa </body>-tagia.
Tällöin skripti ladataan ja suoritetaan sen jälkeen, kun koko sivu on jo jäsennelty ja ladattu, mikä on valtava parannus verrattuna head-vaihtoehtoon.
Tämä on parasta, mitä voit tehdä, jos sinun täytyy tukea vanhempia selaimia, jotka eivät tue kahta HTML:n suhteellisen uutta ominaisuutta: async ja defer.
Async ja Defer
Kumpikin async ja defer ovat boolean-attribuutteja. Niiden käyttö on samanlaista:
<script async src="https://flaviocopes.com/javascript-async-defer/script.js"></script><script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>Jos määrität molemmat, async on etusijalla nykyaikaisissa selaimissa, kun taas vanhemmat selaimet, jotka tukevat defer mutta eivät async, turvautuvat defer:een.
Nämä attribuutit ovat järkeviä vain silloin, kun käytät komentosarjaa sivun head-osassa, ja ne ovat hyödyttömiä, jos laitat komentosarjan body alatunnisteeseen, kuten edellä nähtiin.
Suorituskyvyn vertailu
Ei deferiä tai async:tä, päähän
Tässä kerrotaan, miten sivu lataa skriptin ilman deferiä tai async:tä, joka on laitettu sivun head-osaan:
Skriptin jäsennys pysähtyy, kunnes skripti on haettu ja se suoritetaan. Kun tämä on tehty, jäsentely jatkuu.
Ei deferiä tai async:tä, bodyyn
Sivu lataa skriptin ilman deferiä tai async:tä, joka on laitettu body-tagin loppuun, juuri ennen sen sulkemista:
Erittely tehdään ilman taukoja, ja kun se on valmis, skripti noudetaan, ja suoritetaan. Jäsennys tehdään ennen kuin skriptiä edes ladataan, joten sivu näkyy käyttäjälle paljon ennen edellistä esimerkkiä.
Asynkronisesti, päähän
Sivu lataa skriptin async:llä, joka on laitettu head-tagiin:
Skripti haetaan asynkronisesti, ja kun se on valmis, HTML:n jäsennys keskeytetään skriptin suorittamista varten, minkä jälkeen sitä jatketaan uudelleen.
With defer, in the head
Sivu lataa skriptin defer, joka on laitettu head-tagiin:
Skripti haetaan asynkronisesti, ja se suoritetaan vasta, kun HTML-jäsennys on valmis.
Skriptin jäsentäminen päättyy aivan kuten silloin, kun laitamme skriptin body-tagin loppuun, mutta kaiken kaikkiaan skriptin suoritus päättyy paljon aikaisemmin, koska skripti on ladattu rinnakkain HTML-jäsennyksen kanssa.
Tämä on siis nopeuden kannalta voittava ratkaisu 🏆
Sivun jäsentämisen estäminen
async estää sivun jäsentämisen, kun taas defer ei.
Renderöinnin estäminen
Kumpikaan async ja defer eivät takaa mitään renderöinnin estämisestä. Tämä riippuu sinusta ja skriptistäsi (esimerkiksi varmistamalla, että skriptisi suoritetaan onLoad) -tapahtuman jälkeen.
domInteractive
Skriptit, joihin on merkitty defer, suoritetaan heti domInteractive-tapahtuman jälkeen, joka tapahtuu sen jälkeen, kun HTML on ladattu, jäsennetty ja DOM on rakennettu.
CSS ja kuvat on tässä vaiheessa vielä jäsenneltävä ja ladattava.
Kun tämä on tehty, selain lähettää domComplete-tapahtuman ja sen jälkeen onLoad.
domInteractive on tärkeä, koska sen ajoitus tunnistetaan koetun latausnopeuden mittarina. Katso lisätietoja MDN:stä.
Toimintojen järjestyksessä pitäminen
Toinen tapaus pro defer: async-merkityt skriptit suoritetaan satunnaisessa järjestyksessä, kun ne tulevat saataville. Skriptit, jotka on merkitty defer, suoritetaan (jäsennyksen päätyttyä) siinä järjestyksessä kuin ne on määritelty merkinnässä.
Kertokaa paras tapa
Sivun latautumisen nopeuttamiseksi skriptejä käytettäessä paras tapa on sijoittaa ne head:een ja lisätä script-tagiin defer-attribuutti:
<script defer src="https://flaviocopes.com/javascript-async-defer/script.js"></script>Tässä skenaariossa nopeampi domInteractive-tapahtuma käynnistyy.
Harkitsemalla defer:n hyviä puolia, se vaikuttaa paremmalta valinnalta kuin async useissa skenaarioissa.
Jos et hyväksy sivun ensimmäisen renderöinnin viivyttämistä, varmista, että haluamasi JavaScript on jo suoritettu, kun sivu jäsennetään.
Lataa ilmainen JavaScriptin aloittelijan käsikirja
Lisää selainoppaita:
- Joitakin hyödyllisiä temppuja saatavilla HTML5:ssä
- Miten minä tein CMS:n-perustuvan verkkosivuston toimimaan offline-tilassa
- The Complete Guide to Progressive Web Apps
- The Fetch API
- The Push API Guide
- The Channel Messaging API
- Service Workers Tutorial
- The Cache API Guide
- The Notification API Guide
- Dive into IndexedDB
- The Selectors API: querySelector ja querySelectorAll
- Tehokasta JavaScriptin lataamista deferin ja async:n avulla
- Dokumentin objektimalli (DOM)
- Web Storage API: Paikallinen tallennus ja istuntosäilytys
- Opi, miten HTTP-evästeet toimivat
- Historia API
- WebP-kuvaformaatti
- XMLHttpRequest (XHR)
- Syväluotaava SVG-opetusohjelma
- Mitkä ovat data-URL:t
- Tiekartta Web-alustan oppimiseen
- CORS, Cross-Origin Resource Sharing
- Web Workers
- Resurssien jakaminen
- The requestAnimationFrame()-opas
- Mikä on Doctype
- Työskentely DevToolsin kanssa Console ja Console API
- Puhesynteesin API
- Miten odottaa DOM ready -tapahtumaa tavallisessa JavaScriptissä
- Miten lisätä luokka DOM:iin elementtiin
- How to loop over DOM elements from querySelectorAll
- How to remove a class from a DOM element
- How to check if a DOM element has a class
- How to change a DOM node value
- How to add a click event to a list of DOM elements returned from querySelectorAll
- WebRTC, the Real Time Web API
- Kuinka saadaan elementin vieritysasento JavaScriptissä
- Kuinka korvataan DOM-elementti
- Kuinka hyväksytään vain kuvia syötetiedostokenttään
- Miksi käyttää selaimen esikatseluversiota?
- The Blob Object
- The File Object
- The FileReader Object
- The FileList Object
- ArrayBuffer
- ArrayBufferView
- The URL Object
- Tyypillinen Arrays
- The DataView Object
- The BroadcastChannel API
- The Streams API
- The FormData Object
- The Navigator Object
- How to use the Geolocation API
- How to use getUserMedia()
- How to use the Drag and Drop API
- How to work with scrolling on Web Pages
- Handling forms in JavaScript
- Keyboard events
- Mouse events
- Touch events
- How to remove all children from a DOM element
- How to create an HTML attribute using vanilla Javascript
- How to check if a checkbox is checked using JavaScript?
- Miten kopioida leikepöydälle JavaScriptillä
- Miten poistaa painike käytöstä JavaScriptillä
- Miten tehdä sivusta muokattavissa oleva selaimessa
- Miten saada kyselymerkkijonon arvot JavaScriptillä URLSearchParamsin avulla
- Miten poistaa kaikki CSS:t sivulta kerralla
- Miten käyttää insertAdjacentHTML:ää
- Safari, varoita ennen kuin lopetat
- How to add an image to the DOM using JavaScript
- How to reset a form
- How to use Google Fonts
.