Alhoewel dit ‘n diepgaande begrip van tale soos C ++ en C mag vereis om volskaalse produksiekode te skryf, kan JavaScript dikwels geskryf word met ‘n basiese begrip van wat met die taal gedoen kan word..


Konsepte, soos die terugskakel na funksies of die skryf van asynchroniese kode, is dikwels nie so moeilik om te implementeer nie, wat die meeste JavaScript-ontwikkelaars minder omgee vir wat onder die enjinkap gaan. Hulle gee net nie om om die ingewikkeldhede te verstaan ​​wat deur die taal diep onttrek is nie.

As ‘n JavaScript-ontwikkelaar word dit toenemend belangrik om te verstaan ​​wat regtig onder die kap voorkom en hoe die meeste van hierdie kompleksiteite wat by ons onttrek word, regtig werk. Dit help ons om meer ingeligte besluite te neem, wat op hul beurt ons kode-prestasie drasties kan verhoog.

Hierdie artikel fokus op een van die baie belangrike maar selde begrippe of terme in JavaScript. Die GEBEURTENISLOP!. 

Asynchroniese kode kan nie in JavaScript geskryf word nie, maar waarom beteken ‘n kode wat asinchronies werk, regtig? d.w.z. The Event Loop

Voordat ons kan verstaan ​​hoe die gebeurtenislus werk, moet ons eers verstaan ​​wat JavaScript self is en hoe dit werk!

Wat is JavaScript?

Voordat ons verder gaan, wil ek hê dat ons ‘n stap terug na die basiese beginsels moet neem. Wat is regtig JavaScript? Ons kan JavaScript definieer as;

JavaScript is ‘n hoë vlak, geïnterpreteerde, enkel-draadige nie-blokkerende, asinchroniese, gelyktydige taal.

Wag, wat is dit? ‘N Boekagtige definisie? ��

Laat ons dit afbreek!

Die sleutelwoorde hier vir hierdie artikel is: enkel-threaded, nie-blokkerend, gelyktydig, en asynchrone.

Enkel draad

‘N Draad van uitvoering is die kleinste reeks geprogrammeerde instruksies wat onafhanklik deur ‘n skeduleerder bestuur kan word. ‘N Programmeringstaal is enkelgespat, dit beteken dat dit slegs een taak of bewerking op een slag kan verrig. Dit beteken dat dit ‘n hele proses van begin tot einde sal uitvoer sonder dat die draad onderbreek of gestop word.

In teenstelling met meervoudige draadtale waar meerdere prosesse gelyktydig op verskillende drade uitgevoer kan word sonder om mekaar te blokkeer.

Hoe kan JavaScript enkel-threaded en nie-blokkeer op dieselfde tyd?

Maar wat beteken blokkering??

Nie-blokkeer

Daar is nie een definisie van blokkering nie; dit beteken eenvoudig dinge wat stadig op die draad loop. Nie-blokkering beteken dus dinge wat nie traag is nie.

Maar wag, het ek gesê JavaScript loop op ‘n enkele draad? En ek het ook gesê dat dit nie blokkeer nie, wat beteken dat die taak vinnig op die oproep stapel loop? Maar hoe??? Wat van wanneer ons timers bestuur? sirkelroetes?

Ontspan! Ons sal dit binnekort uitvind ��.

konkurrente

Gelyktydigheid beteken dat die kode gelyktydig met meer as een draad uitgevoer word.

Dit gaan goed vreemd nou, hoe kan JavaScript enkel-threaded en gelyktydig wees? dit wil sê, die uitvoering van die kode met meer as een draad?

asynchrone

Asinchroniese programmering beteken dat die kode in ‘n gebeurtenislus loop. As daar ‘n blokkering plaasvind, word die geleentheid begin. Die blokkeringskode bly aanhou sonder om die hoofuitvoeringsdraad te blokkeer. As die blokkeringskode klaar is, is dit die resultaat van die blokkeringsbewerking en word dit teruggestoot na die stapel.

Maar JavaScript het ‘n enkele draad? Wat voer dan hierdie blokkeringskode uit terwyl u ander kodes in die draad laat uitvoer?

Voordat ons verder gaan, kom ons bespreek die bogenoemde.

  • JavaScript is enkel-draad
  • JavaScript blokkeer nie, dit wil sê dat stadige prosesse die uitvoering daarvan nie blokkeer nie
  • JavaScript is gelyktydig, dit wil sê, dit voer die kode gelyktydig in meer as een draad uit
  • JavaScript is asinchronies, dit wil sê, dit bevat ‘n blokkode op ‘n ander plek.

Maar die bogenoemde is nie presies bymekaar nie; hoe kan ‘n enkele draadtaal nie-blokkerend, gelyktydig en asinkronies wees?

Laat ons ‘n bietjie dieper gaan, gaan ons af na die JavaScript-enjintyd-enjins, V8, miskien het dit ‘n paar verborge drade waarvan ons nie weet nie.

V8-enjin

Die V8-enjin is ‘n hoë-werkverrigting-oop-enjin vir oopbronne vir webmontering vir JavaScript, geskryf in C ++ deur Google. Die meeste blaaiers gebruik JavaScript met die V8-enjin, en selfs die gewilde node js-runtime-omgewing gebruik dit ook.

In eenvoudige Engels is die V8 ‘n C ++ -program, wat JavaScript-kode ontvang, opstel en uitvoer.

Die V8 doen twee belangrike dinge;

  • Toewysing van hope geheue
  • Uitvoeringskonteks vir oproepstapel

Ongelukkig was ons vermoede verkeerd. Die V8 het net een oproepstapel, dink aan die oproepstapel as die draad.

Een draad === een oproepstapel === een uitvoering op een slag.

Beeld – Hacker middag

Aangesien V8 net een oproepstapel het, hoe werk JavaScript dan gelyktydig en asinkronies sonder om die hoofuitvoeringsdraad te blokkeer?

Probeer dit uitvind deur ‘n eenvoudige, maar alledaagse, asinchroniese kode te skryf en dit saam te ontleed.

JavaScript voer elke kode reël vir ry, een na mekaar (enkel-draad). Soos verwag, word die eerste reël hier in die konsole gedruk, maar waarom word die laaste reël voor die timeout-kode gedruk? Waarom wag die uitvoeringsproses nie op die timeout-kode (blokkering) voordat die laaste reël uitgevoer word nie??

Dit wil voorkom asof ‘n ander draad ons gehelp het om die time-out uit te voer, want ons is redelik seker dat ‘n draad slegs een enkele taak op enige tydstip kan uitvoer..

Kom ons kyk vinnig na die V8 Bronkode vir ‘n rukkie.

Wag wat??!!! Daar is geen timerfunksies in V8 nie, geen DOM nie? Geen gebeure nie? Geen AJAX?…. Yeeeeessss!!!

Gebeurtenisse, DOM, timers, ens. Maak nie deel uit van die kernimplementering van JavaScript nie. JavaScript voldoen streng aan die spesifikasies van Ecma Scripts, en daar word gereeld na verskillende weergawes daarvan verwys volgens die Ecma Scripts-spesifikasies (ES X).

Uitvoeringswerkvloei

Gebeurtenisse, tydopnemers, Ajax-versoeke word almal aan die kliënt se kant deur die blaaiers verskaf en word ook na verwys as Web API. Dit is die een waarmee die enkel-draad-JavaScript JavaScript nie-blokkerend, gelyktydig en asinkronies kan wees! Maar hoe?

Daar is drie hoofafdelings vir die uitvoeringswerkstroom van enige JavaScript-program, die oproepstapel, die web-API en die taakwaglys.

Die oproepstapel

‘N Stapel is ‘n datastruktuur waarin die laaste element wat bygevoeg is altyd die eerste is wat uit die stapel verwyder word. U kan dit as ‘n stapel van ‘n plaat beskou waarin slegs die eerste plaat wat laas bygevoeg is, eerste verwyder kan word. ‘N Oproepstapel is eenvoudig niks anders as ‘n stapeldatasstruktuur waar take of kodes dienooreenkomstig uitgevoer word nie.

Kom ons kyk na die onderstaande voorbeeld;

Bron – https://youtu.be/8aGhZQkoFbQ

As u die funksie printSquare () noem, word dit op die oproepstapel gedruk, en die funksie printSquare () noem die vierkantige () -funksie. Die vierkantige () -funksie word op die stapel gedruk en noem ook die vermenigvuldiging () -funksie. Die vermenigvuldigingsfunksie word op die stapel gedruk. Aangesien die vermenigvuldigingsfunksie terugkeer en die laaste ding is wat na die stapel gedruk is, word dit eers opgelos en word dit van die stapel verwyder, gevolg deur die vierkantige () -funksie en dan die drukSquare () -funksie.

Die Web API

Dit is hier waar kode wat nie deur die V8-enjin hanteer word nie, uitgevoer word om nie die hoofuitvoeringsdraad te blokkeer nie. Wanneer die Call Stack ‘n web API-funksie teëkom, word die proses onmiddellik aan die Web API oorhandig, waar dit uitgevoer word en word die Call Stack bevry om ander bewerkings tydens die uitvoering daarvan uit te voer.

Kom ons gaan terug na ons setTimeout-voorbeeld hierbo;

As ons die kode gebruik, word die eerste console.log-lyn na die stapel gestoot en ons produksie word byna onmiddellik verkry; as ons by die time-out uitkom, word timers deur die blaaier gehanteer en vorm dit nie deel van V8 se kernimplementering nie; na die Web API plaas, en die stapel bevry sodat dit ander handelinge kan verrig.

Terwyl die time-out nog loop, gaan die stapel voort na die volgende aksie-lyn en word die laaste console.log uitgevoer, wat verklaar waarom ons die uitspraak voor die timer-uitset kry. Sodra die timer voltooi is, gebeur daar iets. Die console.log-in-timer verskyn dan weer magies in die oproepstapel!

hoe?

The Event Loop

Laat ons eers deur die funksie van die taakwette gaan voordat ons die gebeurtenislus bespreek.

Terug na ons voorbeeld van time-out, sodra die Web API klaar is met die uitvoering van die taak, druk dit nie net outomaties terug na die oproepstapel nie. Dit gaan na die Taakwaglys. 

‘N Tou is ‘n datastruktuur wat volgens die First in First out-beginsel werk, en as take in die ry ingedruk word, kom hulle in dieselfde volgorde uit. Take wat deur die Web API’s uitgevoer is, wat na die taakwaglys gestoot word, gaan dan terug na die oproepstapel om hul resultaat uit te druk.

Maar wag. WAT DIE HECK IS DIE GEBEURTENISLOP???

Bron – https://youtu.be/8aGhZQkoFbQ

Die gebeurtenislus is ‘n proses wat wag totdat die oproepstapel duidelik is voordat dit terugbel vanaf die taakwagter na die oproepstapel gedruk word. Sodra die stapel skoon is, aktiveer en kyk die gebeurtenislus na die taakwaglys vir beskikbare terugbel. As daar enige is, druk dit dit na die oproepstapel, wag totdat die oproepstapel weer duidelik is en herhaal dieselfde proses.

Bron – https://www.quora.com/How-does-an-event-loop-work/answer/Timothy-Maxwell

Die bostaande diagram demonstreer die basiese werkvloei tussen die Event Loop en die Task Queue.

Afsluiting

Alhoewel dit ‘n baie basiese inleiding is, gee die konsep van asinchroniese programmering in JavaScript genoeg insig om duidelik te verstaan ​​wat aangaan onder die enjinkap en hoe JavaScript gelyktydig en asynchronies kan werk met net ‘n enkele draad..

JavaScript is altyd op aanvraag, en as u nuuskierig is om te leer, sal ek u aanraai om dit na te gaan Udemy-kursus.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me