Com funciona el bucle d’esdeveniments amb JavaScript?

Si bé pot requerir un coneixement profund dels idiomes com C ++ i C per escriure codi de producció a escala completa, sovint es pot escriure JavaScript només amb una comprensió bàsica del que es pot fer amb el llenguatge..


Els conceptes, com ara passar trucades a funcions o escriure codi asincrònic, sovint no són tan difícils d’implementar, cosa que fa que la majoria de desenvolupadors de JavaScript es preocupin menys del que passa sota el caputxó. Ells no els importa comprendre les complexitats que l’idioma ha abstraït profundament.

Com a desenvolupador de JavaScript, és cada cop més important comprendre què passa realment sota la caputxa i com funcionen realment la majoria d’aquestes complexitats abstractes de nosaltres. Ens ajuda a prendre decisions més informades, que poden, al seu torn, augmentar dràsticament el rendiment del nostre codi.

Aquest article se centra en un dels conceptes o termes molt importants però rarament entesos de JavaScript. El LOOP EVENT!. 

No es pot evitar escriure codi asincrònic a JavaScript, però, per què significa realment un codi que s’executa de manera asíncrona? és a dir. El bucle d’esdeveniments

Abans de comprendre com funciona el bucle d’esdeveniments, primer hem de comprendre què és JavaScript i com funciona!

Què és JavaScript?

Abans de continuar, m’agradaria que féssim un pas enrere fins a les qüestions bàsiques. Què és realment JavaScript? Podríem definir JavaScript com a;

El JavaScript és un llenguatge simultani, no bloquejat, asincrònic, simultània i alt nivell interpretat.

Espera, què és això? Una definició de llibre? ��

Ho desglossem!

Les paraules clau aquí per a aquest article són d’un sol fil, sense bloqueig, concurrent, i asíncron.

Fil únic

Un fil d’execució és la més petita seqüència d’instrucció programada que es pot gestionar de forma independent per un planificador. Un llenguatge de programació és d’un sol fil, significa que només pot realitzar una tasca o operació alhora. Això vol dir que executaria un procés sencer de principi a fi sense que el fil s’interrompés ni s’aturés.

A diferència dels llenguatges multi-threaded, on es poden executar diversos processos simultàniament en diversos fils sense bloquejar-se.

Com es pot fer JavaScript amb un filet i no bloqueig al mateix temps?

Però què significa bloqueig?

No bloqueig

No hi ha una definició única de bloqueig; simplement significa coses que funcionen lentament al fil. Així que no bloquejar significa coses que no passen del fil.

Però espera, he dit JavaScript funciona en un sol fil? I també ho he dit que no és bloqueig, cosa que significa que la tasca s’executa ràpidament a la pila de trucades? Però com??? Què passa quan executem temporitzadors? Loops?

Relaxa’t! Ho hem descobert una mica ��.

Concurrents

Concurrència vol dir que s’executa simultàniament el codi per més d’un fil.

D’acord, les coses estan arribant realment estrany ara, com pot ser JavaScript amb un fil de fil i ser simultània? és a dir, executant el seu codi amb més d’un fil?

Asíncron

La programació asíncrona significa que el codi s’executa en un bucle d’esdeveniments. Quan hi ha una operació de bloqueig, l’esdeveniment s’inicia. El codi de bloqueig continua en funcionament sense bloquejar el fil d’execució principal. Quan el codi de bloqueig acaba d’executar-se, la cua és el resultat de les operacions de bloqueig i les retorna a la pila.

Però JavaScript té un sol fil? A continuació, què s’executa aquest codi de bloqueig mentre es deixa executar altres codis del fil?

Abans de continuar, fem una recopilació de les qüestions anteriors.

  • JavaScript és d’un filet
  • JavaScript no bloqueja, és a dir, els processos lents no bloquegen la seva execució
  • JavaScript és simultani, és a dir, executa el seu codi en més d’un fil alhora
  • JavaScript és asíncron, és a dir, funciona amb bloqueig de codis en qualsevol altre lloc.

Però l’anterior no es suma exactament, com pot ser que un llenguatge d’un fil no sigui bloqueig, concurrent i asincrònic?

Aprofitem una mica més, anem cap als motors d’execució de JavaScript, V8, potser té alguns fils ocults dels quals no coneixem.

Motor V8

El motor V8 és un motor d’execució web de codi obert d’alt rendiment de JavaScript per a JavaScript escrit en C ++ per Google. La majoria dels navegadors utilitzen JavaScript utilitzant el motor V8, i fins i tot l’entorn de temps d’execució de nodes populars també l’utilitza.

En anglès senzill, el V8 és un programa C ++, que rep codi JavaScript, la compila i l’executa.

El V8 fa dues coses importants;

  • Assignació de memòria en heap
  • Context d’execució de pila de trucades

Malauradament, la nostra sospita era equivocada. El V8 només té una pila de trucades, penseu en la pila de trucades com el fil conductor.

Un fil === una pila de trucades === una execució alhora.

Imatge: Hacker Noon

Com que V8 té una sola pila de trucades, com pot executar JavaScript de manera simultània i asíncrona sense bloquejar el fil d’execució principal?

Intentem esbrinar-ho escrivint un codi asíncron senzill però comú i analitzant-lo junts.

JavaScript executa cada codi de línia per línia, l’un darrere l’altre (d’un filet). Com era d’esperar, la primera línia s’imprimeix a la consola aquí, però per què s’imprimeix l’última línia abans del codi d’esperació? Per què el procés d’execució no espera el codi de temps (bloqueig) abans d’avançar per executar l’última línia?

Sembla que algun altre fil ens ha ajudat a executar aquest temps d’espera ja que estem bastant segurs que un fil només pot executar una sola tasca en qualsevol moment..

Donem un cop d’ull a la secció Codi font V8 per una estona.

Espera Què??!!! No hi ha funcions de temporitzador a V8, ni DOM? No hi ha esdeveniments? No hi ha AJAX? … Yeeeeessss!!!

Els esdeveniments, DOM, temporitzadors, etc. no formen part de la implementació bàsica de JavaScript, JavaScript s’ajusta estrictament a les especificacions d’Ecript Scripts i sovint s’hi fan referència a diverses versions d’acord amb les seves especificacions Ecma Scripts (ES X).

Flux de treball d’execució

Els esdeveniments, els temporitzadors i les sol·licituds d’Ajax són proporcionats per part del client pels navegadors i se sol denominar API web. Són els que permeten que el JavaScript d’un sol fil no sigui bloqueig, concurrent i asíncron! Però com?

Hi ha tres seccions principals al flux de treball d’execució de qualsevol programa JavaScript, la pila de trucades, l’API web i la cua de tasques..

La pila de trucades

Una pila és una estructura de dades en què l’últim element afegit és sempre el primer que es treu de la pila, podríeu pensar-ho com una pila d’una placa en la qual només es pot eliminar primer el primer plat que va ser l’últim afegit. Una pila de trucades no és simplement res més que una estructura de dades de pila on s’executen tasques o codi en conseqüència.

Analitzem l’exemple següent;

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

Quan truqueu a la funció printSquare (), s’empenya a la pila de trucades, la funció printSquare () truca a la funció square (). La funció square () s’empeny a la pila i també fa una funció de multiplicar (). La funció de multiplicar s’empeny a la pila. Com que la funció de multiplicar retorna i és l’última cosa que es va empènyer a la pila, la seva solució es resol primer i s’elimina de la pila, seguida de la funció square () i després de la funció printSquare ()..

L’API web

Aquí és on s’executa el codi que no maneja el motor V8 per no “bloquejar” el fil d’execució principal. Quan el Call Stack es troba amb una funció d’API web, el procés s’envia immediatament a l’API Web, on s’està executant i alliberant la Call Stack per realitzar altres operacions durant la seva execució..

Tornem al nostre exemple setTimeout anterior;

Quan executem el codi, la primera línia console.log és enviada a la pila i aconseguim la nostra sortida gairebé immediatament, en arribar al temps d’espera, els temporitzadors es gestionen pel navegador i no formen part de la implementació principal de V8, sinó que es pressiona. a l’API Web, en lloc d’alliberar la pila per tal de poder realitzar altres operacions.

Mentre que el temps d’espera encara s’està executant, la pila avança a la següent línia d’actuació i s’executa l’última console.log, que explica per què obtenim aquesta sortida abans de la sortida del temporitzador. Un cop finalitzat el temporitzador, passa alguna cosa. La console.log in llavors apareix de nou màgicament a la pila de trucades de nou!

Com?

El bucle d’esdeveniments

Abans de comentar el bucle d’esdeveniments, primer passem per la funció de la cua de tasques.

Tornem al nostre exemple de temps mort, un cop que l’API web acabi d’executar la tasca, no només la tornarà a enviar automàticament a la pila de trucades automàticament. Va a la Cua de tasques. 

Una cua és una estructura de dades que funciona en el principi First in First out, de manera que a mesura que les tasques s’introdueixen a la cua, surten en el mateix ordre. Tasques que han estat executades per l’API web, que s’estan enviant a la cua de tasques, i després torneu a la pila de trucades per obtenir el seu resultat imprès.

Però espera. QUÈ ÉS EL PASSAMENT DE L’ESPERANÇAT???

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

El bucle d’esdeveniments és un procés que espera que es clari la pila de trucades abans d’impulsar les devolucions des de la cua de tasques cap a la pila de trucades. Un cop clara la pila, el bucle d’esdeveniments es desencadena i comprova la cua de tasques per veure les devolucions disponibles. Si n’hi ha, l’empeny cap a la pila de trucades, espera que es torni a deixar clar la pila de trucades i repeteix el mateix procés.

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

El diagrama anterior mostra el flux de treball bàsic entre el bucle d’esdeveniments i la cua de tasques.

Conclusió

Tot i que es tracta d’una introducció molt bàsica, el concepte de programació asíncrona de JavaScript proporciona una visió suficient per entendre clarament el que està passant sota la caputxa i com JavaScript pot funcionar de manera simultània i asíncrona amb un sol fil..

JavaScript és sempre a la demanda i, si teniu curiositat per aprendre, us aconsellaria que ho reviseu 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