Tapahtumasilmukka: call stack, jono ja microtaskit
Hahmota, miten JavaScript suoritetaan: call stack, tehtäväjono, Promise-objektien microtaskit ja se, miksi käyttöliittymä ei esty asynkronisten toimintojen aikana
Tapahtumasilmukka: call stack, jono ja microtaskit on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
JavaScript on yksisäikeinen
JavaScript suoritetaan yhdessä säikeessä — se voi suorittaa vain yhden koodiosan kerrallaan. Silti se käsittelee tuhansia asynkronisia toimintoja (verkkopyyntöjä, ajastimia ja käyttöliittymätapahtumia) estämättä suoritusta. Miten? tapahtumasilmukan avulla.
Kutsupino
Kutsupino on paikka, jossa JavaScript pitää kirjaa parhaillaan suoritettavasta funktiosta. Kun funktiota kutsutaan, pinoon lisätään kehys. Kun se palautuu, kehys poistetaan pinosta. Jos pino täyttyy (ääretön rekursio), syntyy pinon ylivuoto.
function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();
// Call stack during c():
// c ← top
// b
// a
// (anonymous)Web API:t — työn siirtäminen muualle
Kun JavaScript kutsuu asynkronista funktiota (setTimeout, fetch, addEventListener), selain siirtää työn Web API-rajapinnalle. JavaScript-moottori jatkaa seuraavalle riville — se ei jää odottamaan.
console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2Tehtäväjono (makrotehtäväjono)
Kun Web API -toiminto valmistuu (ajastin laukeaa tai fetch valmistuu), callback sijoitetaan tehtäväjonoon (makrotehtäväjonoon). Tapahtumasilmukka siirtää callbackin kutsupinoon vasta, kun pino on tyhjä.
Mikrotehtäväjono
Promiset käyttävät mikrotehtäväjonoa eli korkean prioriteetin jonoa. Kun kukin tehtävä on valmis ja ennen seuraavan tehtävän poimimista kaikki odottavat mikrotehtävät suoritetaan loppuun. Mikrotehtävät suoritetaan aina ennen seuraavaa makrotehtävää.
console.log('1');
setTimeout(() => console.log('timeout'), 0); // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeoutTapahtumasilmukka käytännössä
Tapahtumasilmukan algoritmi: 1) Suorita nykyinen tehtävä kutsupinosta, kunnes pino on tyhjä. 2) Suorita koko mikrotehtäväjono loppuun. 3) Renderöi näkymä tarvittaessa. 4) Poimi seuraava makrotehtävä ja toista.
queueMicrotask()
queueMicrotask(fn) ajoittaa callbackin mikrotehtäväjonoon luomatta Promisea. Sitä tarvitaan harvoin suoraan, mutta sen avulla on hyödyllistä ymmärtää, miten kirjastot toteuttavat ajoituksen.
queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtaskMiksi pitkät tehtävät jäädyttävät käyttöliittymän
Jos synkroninen tehtävä kestää liian kauan (esimerkiksi suuri määrä dataa käsitellään tiukassa silmukassa), tapahtumasilmukka ei pysty käsittelemään käyttöliittymän tapahtumia tai renderöimään näkymää. Tämä jäädyttää sivun. Pilkkokaa pitkä työ osiin käyttämällä setTimeoutia, jotta tapahtumasilmukka saa välillä vuoron.
// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }
// Better — yield periodically:
async function processInChunks(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
}
}Web Workerit — todellinen rinnakkaisuus
Suorittimen laskentaa vaativaan työhön kannattaa käyttää Web Workeria eli erillistä säiettä, jolla on oma tapahtumasilmukkansa. Workerit viestivät pääsäikeen kanssa postMessage-kutsujen avulla. Jaettua muistia ei ole, joten kilpailutilanteita ei synny.
requestAnimationFrame
requestAnimationFrame(callback) ajoittaa callbackin ennen selaimen seuraavaa uudelleenpiirtoa. Käyttäkää sitä JavaScriptilla ohjattuihin animaatioihin: se synkronoituu näytön virkistystaajuuden kanssa (yleensä 60fps).
function animate(timestamp) {
// update positions based on timestamp
element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);Tapahtumasilmukan havainnollistaminen
Interaktiivisessa esimerkissä osoitteessa latentflip.com/loupe voitte liittää koodia ja seurata kutsupinoa, Web APIa, tehtäväjonoa ja tapahtumasilmukkaa hidastettuna. Se on erinomainen apuväline toimintaperiaatteen ymmärtämiseen.
Pikakysymys
Missä jonossa Promisen ratkettua sen .then()-callback suoritetaan?
Kertaus: tapahtumasilmukka
JavaScript on yksisäikeinen. Asynkroninen työ siirtyy Web APIen käsiteltäväksi. Callbackit palaavat joko tehtäväjonon (setTimeout ja fetch-callbackit) tai mikrotehtäväjonon (Promiset) kautta. Tapahtumasilmukka suorittaa mikrotehtävät loppuun jokaisen tehtävän jälkeen, ennen seuraavaa renderöintiä tai makrotehtävää. Pitkä synkroninen koodi estää kaiken muun toiminnan.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Tapahtumasilmukka: call stack, jono ja microtaskit” ilmainen?
Kyllä – oppitunnin ”Tapahtumasilmukka: call stack, jono ja microtaskit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tapahtumasilmukka: call stack, jono ja microtaskit”?
Hahmota, miten JavaScript suoritetaan: call stack, tehtäväjono, Promise-objektien microtaskit ja se, miksi käyttöliittymä ei esty asynkronisten toimintojen aikana Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Tapahtumasilmukka: call stack, jono ja microtaskit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tapahtumasilmukka: call stack, jono ja microtaskit
- Callbackit ja callback-helvetti
- Promiset: then, catch, finally ja Promise.all
- async/await ja virheenkäsittely