Cum funcționează bucla de evenimente cu JavaScript?

Deși ar putea necesita o înțelegere aprofundată a limbilor precum C ++ și C pentru a scrie cod de producție la scară completă, JavaScript poate fi adesea scris cu doar o înțelegere de bază a ceea ce se poate face cu limba.


Conceptele, cum ar fi trecerea apelurilor către funcții sau scrierea codului asincron, adesea nu sunt atât de dificil de pus în aplicare, ceea ce face ca majoritatea dezvoltatorilor JavaScript să le pese mai puțin de ceea ce se întâmplă sub capotă. Pur și simplu nu le pasă să înțeleagă complexitățile care le-au abstractizat profund de limbă.

Ca dezvoltator JavaScript, devine din ce în ce mai important să înțelegem ce se întâmplă cu adevărat sub capotă și cum funcționează cu adevărat majoritatea acestor complexe abstractizate de la noi. Ne ajută să luăm decizii mai informate, care, la rândul nostru, pot spori drastic performanța codului nostru.

Acest articol se concentrează pe unul dintre conceptele sau termenii foarte importanți, dar rareori înțeleși în JavaScript. ANUL DE EVENIMENT!. 

Scrierea codului asincron nu poate fi evitată în JavaScript, dar de ce înseamnă într-adevăr un cod care funcționează asincron? adică. Bucla evenimentului

Înainte de a înțelege cum funcționează bucla evenimentului, trebuie mai întâi să înțelegem ce este JavaScript în sine și cum funcționează!

Ce este JavaScript?

Înainte de a continua, aș dori să facem un pas înapoi la elementele de bază. Ce este cu adevărat JavaScript? Am putea defini JavaScript ca;

JavaScript este un nivel înalt, interpretat, un limbaj simultan, care nu blochează, asincron, concomitent.

Stai, ce e asta? O definiție bookish? ��

Să o dărâmăm!

Cuvintele cheie aici în ceea ce privește acest articol sunt un singur filet, neblocant, concomitent, și asincron.

Un singur fir

Un fir de execuție este cea mai mică secvență de instrucțiuni programate care poate fi gestionată independent de către un programator. Un limbaj de programare este cu un singur filet, înseamnă că poate efectua o singură sarcină sau operație la un moment dat. Aceasta înseamnă că ar executa un întreg proces de la început până la sfârșit fără ca firul să fie întrerupt sau oprit.

Spre deosebire de limbi cu mai multe filete, în care mai multe procese pot fi rulate simultan pe mai multe fire, fără a se bloca reciproc.

Cum poate fi JavaScript cu un singur thread și non-blocare in acelasi timp?

Dar ce înseamnă blocare?

Non-blocare

Nu există nicio definiție a blocării; înseamnă pur și simplu lucruri care rulează încet pe fir. Deci, neblocarea înseamnă lucruri care nu sunt încet pe fir.

Dar stai, am spus JavaScript rulează pe un singur fir? Și am mai spus că nu este blocant, ceea ce înseamnă că sarcina se execută rapid pe stiva de apeluri? Dar cum??? Ce zici când rulăm cronometre? buclele?

Relaxa! Am aflat într-un pic ��.

concomitent

Concurrency înseamnă că codul este executat concomitent de mai mult de un thread.

Bine, lucrurile devin cu adevărat ciudat acum, cum poate fi JavaScript cu un singur fir și să fie concomitent în același timp? adică, executarea codului său cu mai mult de un thread?

asincronă

Programarea asincronă înseamnă că codul rulează într-o buclă de eveniment. Când există o operație de blocare, evenimentul este început. Codul de blocare continuă să funcționeze fără a bloca firul principal de execuție. Când codul de blocare termină să funcționeze, acesta este rezultatul operațiunilor de blocare și le împinge înapoi la stivă.

Dar JavaScript are un singur fir? Ce apoi execută acest cod de blocare, lăsând să fie executate alte coduri din thread?

Înainte de a continua, să facem o recapitulare a celor de mai sus.

  • JavaScript este single-thread
  • JavaScript nu blochează, adică procesele lente nu blochează execuția acestuia
  • JavaScript este concomitent, adică își execută codul în mai multe fire simultan
  • JavaScript este asincron, adică rulează codul blocat în altă parte.

Dar cele de mai sus nu se adaugă exact, cum poate o limbă cu un singur fir să nu fie blocantă, concomitentă și asincronă?

Haideți să mergem un pic mai adânc, să mergem la motoarele de rulare JavaScript, V8, poate că are niște fire ascunse despre care nu suntem conștienți.

Motor V8

Motorul V8 este un motor de rulare de asamblare web de tip Open-Source de înaltă performanță pentru JavaScript scris în C ++ de Google. Cele mai multe browsere rulează JavaScript folosind motorul V8 și chiar și mediul popular de runtime js îl folosește.

În limba engleză simplă, V8 este un program C ++, care primește cod JavaScript, compilează și îl execută.

V8 face două lucruri majore;

  • Alocare de memorie la morman
  • Contextul de execuție stivă de apeluri

Din păcate, bănuiala noastră era greșită. V8 are o singură stivă de apeluri, gândiți-vă la stiva de apeluri ca la thread.

Un thread === un singur stack stack === o execuție la un moment dat.

Image – Hacker Noon

Având în vedere că V8 are o singură stivă de apeluri, cum funcționează JavaScript simultan și asincron, fără a bloca firul de execuție principal?

Să încercăm să aflăm scriind un cod asincron simplu și comun și analizați-l împreună.

JavaScript rulează fiecare cod linie cu rând, unul după altul (cu un singur filet). Așa cum era de așteptat, prima linie este tipărită în consolă aici, dar de ce este imprimată ultima linie înainte de codul de expirare? De ce procesul de execuție nu așteaptă codul de blocare (blocare) înainte de a merge înainte pentru a rula ultima linie?

Un alt thread pare să ne ajute să executăm acest interval de timp, deoarece suntem destul de siguri că un thread poate executa o singură sarcină la orice moment..

Să aruncăm o privire aruncată spre V8 Cod sursă pentru o vreme.

Stai ce??!!! Nu există funcții de cronometrare în V8, nu există DOM? Nu există evenimente? Nu există AJAX?…. Yeeeeessss!!!

Evenimentele, DOM-ul, cronometrele etc. nu fac parte din implementarea de bază a JavaScript-ului, JavaScript respectă strict specificațiile Ecma Scripts și diverse versiuni ale acestora sunt adesea menționate în conformitate cu specificațiile Ecma Scripts (ES X).

Flux de lucru de execuție

Evenimente, cronometre, solicitări Ajax sunt furnizate de partea clientului de către browsere și sunt adesea denumite API-ul Web. Ele sunt cele care permit JavaScript-ului cu un singur fir să nu fie blocant, concomitent și asincron! Dar cum?

Există trei secțiuni majore la fluxul de lucru de execuție al oricărui program JavaScript, stiva de apeluri, API-ul web și coada de activități.

Pila de apeluri

Un stivă este o structură de date în care ultimul element adăugat este întotdeauna primul care a fost eliminat din stivă, puteți gândi la el ca o stivă a unei plăci în care poate fi eliminată doar prima placă care a fost ultima adăugată. Un apel de stivă nu este altceva decât o structură de date stivă în care sarcinile sau codul sunt executate în consecință.

Să luăm în considerare exemplul de mai jos;

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

Când apelați funcția printSquare (), aceasta este împinsă pe stiva de apeluri, funcția printSquare () apelează funcția square (). Funcția square () este împinsă pe stivă și apelează, de asemenea, la funcția multiplicare (). Funcția de multiplicare este împinsă pe stivă. Întrucât funcția de multiplicare revine și este ultimul lucru care a fost împins la stivă, rezolvarea sa este rezolvată mai întâi și este eliminată din stivă, urmată de funcția square () și apoi funcția printSquare ().

API-ul Web

Aici se execută codul care nu este gestionat de motorul V8 pentru a nu „bloca” firul principal de execuție. Atunci când Call Stack întâlnește o funcție de API Web, procesul este predat imediat către API-ul Web, unde este executat și eliberează Call Stack pentru a efectua alte operațiuni în timpul executării sale.

Să revenim la exemplul nostru setTimeout de mai sus;

Când rulăm codul, prima linie console.log este împinsă la stivă și ne obținem ieșirea aproape imediat, odată cu ieșirea din timp, cronometrele sunt gestionate de browser și nu fac parte din implementarea de bază a V8, ci este împinsă la API-ul Web în schimb, eliberând stiva, astfel încât să poată efectua alte operațiuni.

În timp ce intervalul de timp continuă să funcționeze, stiva merge înainte la următoarea linie de acțiune și rulează ultima console.log, care explică de ce obținem acea ieșire înainte de ieșirea cronometrului. Odată ce cronometrul este finalizat, se întâmplă ceva. Consola.log in atunci cronometrul apare din nou în stiva de apeluri!

Cum?

Bucla evenimentului

Înainte de a discuta bucla evenimentului, permiteți mai întâi să parcurgeți funcția cozii de sarcini.

Înapoi la exemplul nostru de expirare, după ce API-ul Web termină executarea sarcinii, nu o împinge înapoi în mod automat la Stack Call. Se duce la Coada de activități. 

O coadă este o structură de date care funcționează pe principiul First in First out, astfel încât sarcinile sunt împinse în coadă, acestea ies în aceeași ordine. Sarcini executate de API-ul Web, care sunt trimise la Tue Tue, apoi reveniți la Call Stack pentru a obține rezultatul tipărit.

Dar asteapta. CE ESTE CÂNTUL ESTE IUBIREA EVENIMENTULUI???

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

Bucla evenimentului este un proces care așteaptă ca apelul să apară clar înainte de a împinge apeluri de apel de la coada de activități la pila de apeluri. Odată ce Stack-ul este clar, bucla de eveniment se declanșează și verifică Task Queue pentru apelurile de apel disponibile. Dacă există, îl împinge către Stack Call, așteaptă ca Stack Call să fie din nou clar și repetă același proces.

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

Diagrama de mai sus arată fluxul de lucru de bază între bucla de eveniment și coada de activități.

Concluzie

Deși aceasta este o introducere de bază, conceptul de programare asincronă în JavaScript oferă o perspectivă suficientă pentru a înțelege clar ce se întâmplă sub capotă și modul în care JavaScript poate rula concomitent și asincron cu un singur fir.

JavaScript este întotdeauna la cerere și, dacă sunteți curioși să aflați, v-aș sfătui să consultați acest lucru Curs Udemy.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map