JavaScriptin suoritusmalli on vivahteikas ja helppo ymmärtää väärin. Tapahtumasilmukan ymmärtäminen sen ytimessä voi auttaa.

JavaScript on yksisäikeinen kieli, joka on suunniteltu käsittelemään tehtäviä yksi kerrallaan. Tapahtumasilmukka antaa kuitenkin JavaScriptin käsitellä tapahtumia ja takaisinkutsuja asynkronisesti emuloimalla samanaikaisia ​​ohjelmointijärjestelmiä. Tämä varmistaa JavaScript-sovellustesi suorituskyvyn.

Mikä on JavaScript-tapahtumasilmukka?

JavaScriptin tapahtumasilmukka on mekanismi, joka toimii jokaisen JavaScript-sovelluksen taustalla. Sen avulla JavaScript voi käsitellä tehtäviä järjestyksessä estämättä sen pääsuoritussäiettä. Tätä kutsutaan nimellä asynkroninen ohjelmointi.

Tapahtumasilmukka pitää jonon suoritettavista tehtävistä ja syöttää ne oikealle web API toteuttamista varten yksi kerrallaan. JavaScript seuraa näitä tehtäviä ja käsittelee niitä tehtävän monimutkaisuustason mukaan.

Ymmärtää JavaScript-tapahtumasilmukan ja asynkronisen ohjelmoinnin tarpeen. Sinun on ymmärrettävä, minkä ongelman se olennaisesti ratkaisee.

instagram viewer

Ota tämä koodi esimerkiksi:

functionlongRunningFunction() {
// This function does something that takes a long time to execute.
for (var i = 0; i < 100000; i++) {
console.log("Hello")
 }
}
functionshortRunningFunction(a) {
return a * 2 ;
}


functionmain() {
var startTime = Date.now();
 longRunningFunction();

var endTime = Date.now();


// Prints the amount of time it took to execute functions
console.log(shortRunningFunction(2));
console.log("Time taken: " + (endTime - startTime) + " milliseconds");
}
main();

Tämä koodi määrittää ensin funktion nimeltä longRunningFunction(). Tämä toiminto suorittaa jonkinlaisen monimutkaisen aikaa vievän tehtävän. Tässä tapauksessa se suorittaa a varten silmukan iterointi yli 100 000 kertaa. Se tarkoittaa, että console.log("Hei") kulkee 100 000 kertaa.

Tietokoneen nopeudesta riippuen tämä voi kestää kauan ja jumittua shortRunningFunction() välittömästä suorituksesta, kunnes edellinen toiminto on valmis.

Kontekstia varten tässä on vertailu molempien toimintojen suorittamiseen kuluneesta ajasta:

Ja sitten sinkku shortRunningFunction():

Ero 2 351 millisekunnin operaation ja 0 millisekunnin operaation välillä on ilmeinen, kun pyrit rakentamaan suorituskykyisen sovelluksen.

Kuinka tapahtumasilmukka auttaa sovelluksen suorituskyvyssä

Tapahtumasilmukassa on eri vaiheita ja osia, jotka vaikuttavat järjestelmän toimintaan.

Puhelupino

JavaScript-kutsupino on välttämätön sille, miten JavaScript käsittelee funktio- ja tapahtumakutsuja sovelluksestasi. JavaScript-koodi käännetään ylhäältä alas. Kuitenkin, Node.js, koodia lukiessaan, Node.js määrittää toimintokutsuja alhaalta ylös. Lukeessaan se työntää määritetyt funktiot kehyksinä puhelupinoon yksitellen.

Kutsupino on vastuussa suorituskontekstin ja toimintojen oikean järjestyksen ylläpitämisestä. Se tekee tämän toimimalla LIFO-pinona (Last-In-First-Out).

Tämä tarkoittaa, että viimeinen funktiokehys, jonka ohjelmasi työntää kutsupinoon, ponnahtaa ensimmäisenä pinosta ja ajaa. Tämä varmistaa, että JavaScript säilyttää oikean funktion suoritusjärjestyksen.

JavaScript ponnahtaa jokaisen kehyksen pois pinosta, kunnes se on tyhjä, mikä tarkoittaa, että kaikki toiminnot ovat suoritettuja.

Libuv Web API

JavaScriptin asynkronisten ohjelmien ytimessä on libuv. Libuv-kirjasto on kirjoitettu C-ohjelmointikielellä, joka voi olla vuorovaikutuksessa käyttöjärjestelmän kanssa matalan tason API: t. Kirjasto tarjoaa useita API: ita, jotka sallivat JavaScript-koodin ajamisen rinnakkain muiden kanssa koodi. API: t säikeiden luomiseen, API säikeiden väliseen viestintään ja API säikeiden synkronoinnin hallintaan.

Esimerkiksi kun käytät setTimeout Node.js: ssä keskeyttääksesi suorituksen. Ajastin asetetaan libuvin kautta, joka hallitsee tapahtumasilmukkaa suorittamaan takaisinsoittotoiminnon, kun määritetty viive on kulunut.

Vastaavasti, kun suoritat verkkotoimintoja asynkronisesti, libuv käsittelee ne toiminnot estotilassa tavalla, jolla varmistetaan, että muut tehtävät voivat jatkaa käsittelyä odottamatta syöttö/lähtötoimintoa (I/O). loppu.

Takaisinsoitto- ja tapahtumajono

Takaisinsoitto- ja tapahtumajono on paikka, jossa takaisinsoittotoiminnot odottavat suorittamista. Kun asynkroninen toiminto valmistuu libuvista, sitä vastaava takaisinsoittotoiminto lisätään tähän jonoon.

Näin sarja menee:

  1. JavaScript siirtää asynkroniset tehtävät libuviin, jotta se voi käsitellä sitä, ja jatkaa seuraavan tehtävän käsittelyä välittömästi.
  2. Kun asynkroninen tehtävä on valmis, JavaScript lisää takaisinsoittotoimintonsa takaisinsoittojonoon.
  3. JavaScript jatkaa muiden tehtävien suorittamista kutsupinossa, kunnes kaikki on suoritettu nykyisessä järjestyksessä.
  4. Kun puhelupino on tyhjä, JavaScript tarkastelee takaisinsoittojonoa.
  5. Jos jonossa on takaisinsoitto, se työntää ensimmäisen puhelupinoon ja suorittaa sen.

Tällä tavalla asynkroniset tehtävät eivät estä pääsäiettä, ja takaisinsoittojono varmistaa, että niitä vastaavat takaisinkutsut suoritetaan niiden suorittamisjärjestyksessä.

Tapahtumasilmukan sykli

Tapahtumasilmukassa on myös jotain, jota kutsutaan mikrotehtäväjonoksi. Tämä tapahtumasilmukan erityinen jono sisältää mikrotehtävät, jotka on ajoitettu suoritettavaksi heti, kun nykyinen tehtävä puhelupinossa on valmis. Tämä suoritus tapahtuu ennen seuraavaa hahmonnusta tai tapahtumasilmukan iteraatiota. Mikrotehtävät ovat korkean prioriteetin tehtäviä, jotka ovat etusijalla tavallisiin tehtäviin tapahtumasilmukassa.

Mikrotehtävä luodaan yleensä Promisesin kanssa työskennellessä. Aina kun lupaus ratkaisee tai hylkää, se vastaa .sitten() tai .ottaa kiinni() takaisinsoitto liittyy mikrotehtäväjonoon. Voit käyttää tätä jonoa sellaisten tehtävien hallintaan, jotka on suoritettava välittömästi nykyisen toiminnon jälkeen, kuten sovelluksesi käyttöliittymän päivittäminen tai tilamuutosten käsittely.

Esimerkiksi verkkosovellus, joka suorittaa tietojen noudon ja päivittää käyttöliittymän haettujen tietojen perusteella. Käyttäjät voivat käynnistää tämän tiedonhaun napsauttamalla painiketta toistuvasti. Jokainen painikkeen napsautus käynnistää asynkronisen tiedonhaun.

Ilman mikrotehtäviä tämän tehtävän tapahtumasilmukka toimisi seuraavasti:

  1. Käyttäjä napsauttaa painiketta toistuvasti.
  2. Jokainen painikkeen napsautus laukaisee asynkronisen tiedonhakutoiminnon.
  3. Kun tietojen noutotoiminnot valmistuvat, JavaScript lisää niitä vastaavat takaisinkutsut tavalliseen tehtäväjonoon.
  4. Tapahtumasilmukka alkaa käsitellä tehtäviä tavallisessa tehtäväjonossa.
  5. Tietojen hakutuloksiin perustuva käyttöliittymäpäivitys suoritetaan heti, kun tavalliset tehtävät sen sallivat.

Mikrotehtävissä tapahtumasilmukka toimii kuitenkin eri tavalla:

  1. Käyttäjä napsauttaa painiketta toistuvasti ja käynnistää asynkronisen tiedonhakutoiminnon.
  2. Kun tiedonhakutoiminnot ovat valmiit, tapahtumasilmukka lisää vastaavat takaisinkutsut mikrotehtäväjonoon.
  3. Tapahtumasilmukka aloittaa mikrotehtäväjonon tehtävien käsittelyn heti nykyisen tehtävän suorittamisen jälkeen (painikkeen napsautus).
  4. Tietojen noutotuloksiin perustuva käyttöliittymäpäivitys suoritetaan ennen seuraavaa tavallista tehtävää, mikä tarjoaa entistä reagoivamman käyttökokemuksen.

Tässä esimerkki koodista:

const fetchData = () => {
returnnewPromise(resolve => {
 setTimeout(() => resolve('Data from fetch'), 2000);
 });
};
document.getElementById('fetch-button').addEventListener('click', () => {
 fetchData().then(data => {
// This UI update will run before the next rendering cycle
 updateUI(data);
 });
});

Tässä esimerkissä jokainen "Hae"-painikkeen napsautus kutsuu fetchData(). Jokainen tiedonhakutoimintojen aikataulu mikrotehtävänä. Haettujen tietojen perusteella käyttöliittymäpäivitys suoritetaan välittömästi jokaisen hakutoiminnon päätyttyä, ennen muita renderöinti- tai tapahtumasilmukan tehtäviä.

Tämä varmistaa, että käyttäjät näkevät päivitetyt tiedot ilman, että viiveet johtuvat muista tapahtumasilmukan tehtävistä.

Mikrotehtävien käyttäminen tällaisissa skenaarioissa voi estää käyttöliittymän tunkeutumisen ja tarjota nopeamman ja sujuvamman vuorovaikutuksen sovelluksessasi.

Tapahtumasilmukan vaikutukset verkkokehitykseen

Tapahtumasilmukan ja sen ominaisuuksien käytön ymmärtäminen on välttämätöntä tehokkaiden ja reagoivien sovellusten rakentamiseksi. Tapahtumasilmukka tarjoaa asynkronisia ja rinnakkaisia ​​ominaisuuksia, joten voit käsitellä sovelluksesi monimutkaisia ​​tehtäviä tehokkaasti käyttäjäkokemuksesta tinkimättä.

Node.js tarjoaa kaiken tarvitsemasi, mukaan lukien verkkotyöntekijät, jotka lisäävät samansuuntaisuutta JavaScriptin pääsäikeen ulkopuolella.