Paano gumagana ang Event Loop sa JavaScript?

Bagaman nangangailangan ito ng isang malalim na pag-unawa sa mga wika tulad ng C ++ at C upang isulat ang buong scale na code ng paggawa, ang JavaScript ay madalas na isulat na may isang pangunahing pag-unawa sa kung ano ang magagawa sa wika.


Ang mga konsepto, tulad ng pagpasa ng mga callback sa mga pag-andar o pagsulat ng code ng asynchronous, ay madalas na hindi napakahirap ipatupad, na ginagawang mas kaunti ang pag-aalaga ng karamihan sa mga developer ng JavaScript tungkol sa kung ano ang nangyayari sa ilalim ng hood. Hindi lang sila nag-aalala tungkol sa pag-unawa sa mga kumplikado na napakalayo sa kanila ng wika.

Bilang isang developer ng JavaScript, nagiging mas mahalaga na maunawaan kung ano talaga ang nangyayari sa ilalim ng talukayan at kung paano ang karamihan sa mga kumplikadong ito ay nakuha mula sa amin. Makakatulong ito sa amin na makagawa ng mas maraming kaalaman sa mga pagpapasya, na kung saan, maaaring, mapalakas ang pagganap ng aming code ng drastically.

Ang artikulong ito ay nakatuon sa isa sa napakahalagang ngunit bihirang maunawaan ang mga konsepto o termino sa JavaScript. Ang EVENT LOOP!. 

Ang pagsulat ng code ng asynchronous na code ay hindi maiiwasan sa JavaScript, ngunit bakit ang ibig sabihin ng isang code na tumatakbo nang hindi sinasadya? i.e. Ang Pag-Loop ng Kaganapan

Bago natin maunawaan kung paano gumagana ang loop ng kaganapan, kailangan nating maunawaan kung ano mismo ang JavaScript at kung paano ito gumagana!

Ano ang JavaScript?

Bago tayo magpatuloy, nais kong gumawa ng isang hakbang pabalik sa mismong mga pangunahing kaalaman. Ano talaga ang JavaScript? Maaari naming tukuyin ang JavaScript bilang;

Ang JavaScript ay isang mataas na antas, binibigyang kahulugan, iisang may sinulid na hindi pag-block, hindi naka-sync, magkakasabay na wika.

Maghintay, ano ito? Isang kahulugan ng libro? ��

I-break ito!

Ang mga keyword dito tungkol sa artikulong ito ay iisa ang sinulid, hindi pag-block, magkakasabay, at hindi nakakasabay.

Nag-iisang thread

Ang isang thread ng pagpapatupad ay ang pinakamaliit na pagkakasunod-sunod ng na-program na pagtuturo na maaaring pinamamahalaan nang nakapag-iisa sa pamamagitan ng isang scheduler. Ang isang programming language ay single-threaded ay nangangahulugang maaari lamang itong magsagawa ng isang gawain o operasyon sa isang oras. Nangangahulugan ito na isasagawa ang isang buong proseso mula sa simula hanggang sa pagtatapos nang hindi napagambala o tumigil ang thread.

Hindi tulad ng mga multi-sinulatang wika kung saan ang maraming mga proseso ay maaaring patakbuhin sa maraming mga thread nang sabay-sabay nang hindi hinaharangan ang bawat isa.

Paano maisa-thread ang JavaScript di-pagharang sa parehong oras?

Ngunit ano ang ibig sabihin ng pagharang?

Hindi pagharang

Walang isang kahulugan ng pagharang; nangangahulugan lamang ito ng mga bagay na dahan-dahang tumatakbo sa thread. Kaya ang hindi pag-block ay nangangahulugang mga bagay na hindi mabagal sa thread.

Ngunit maghintay, sinabi kong tumatakbo ang JavaScript sa isang solong thread? At sinabi ko rin na hindi ito hinarang, na nangangahulugang tumakbo nang mabilis ang tawag sa stack? Pero paano??? Paano naman kapag nagpapatakbo kami ng mga timer? Mga Loops?

Mamahinga! Medyo nalaman namin ang medyo ��.

Kasabay

Ang pagkakasundo ay nangangahulugang ang code ay isinasagawa nang sabay-sabay ng higit sa isang thread.

Okay, ang mga bagay ay nagsisimula talaga kakatwa ngayon, paano ang JavaScript ay maging single-threaded at magkakasabay nang sabay? i.e., pagpapatupad ng code nito na may higit sa isang thread?

Asynchronous

Ang Asynchronous programming ay nangangahulugan na ang code ay tumatakbo sa isang loop ng kaganapan. Kapag may operasyon sa pag-block, nagsisimula ang kaganapan. Ang blocking code ay patuloy na tumatakbo nang hindi hinaharangan ang pangunahing thread ng pagpapatupad. Kapag natapos ang blocking code, tumatakbo ang resulta ng mga operasyon sa pagharang at itinutulak ito pabalik sa salansan.

Ngunit ang JavaScript ay may isang solong thread? Ano ang ginagawa nito sa pagharang ng code habang hinahayaan ang iba pang mga code sa thread?

Bago tayo magpatuloy, magkaroon ng isang pagbabalik sa itaas.

  • Ang JavaScript ay single-threaded
  • Hindi naka-block ang JavaScript, ang mga mabagal na proseso ay hindi hadlangan ang pagpapatupad nito
  • Ang JavaScript ay kasabay, i.e. ginagawa nito ang code sa higit sa isang thread nang sabay
  • Ang JavaScript ay asynchronous, i.e., nagpapatakbo ito ng pag-block ng code sa ibang lugar.

Ngunit ang nasa itaas ay hindi eksaktong magdagdag, kung paano ang isang solong may sinulatang wika ay hindi naka-block, magkakasabay, at hindi nakakasabay?

Pumunta tayo nang medyo malalim, bumaba tayo sa mga engine ng runtime ng JavaScript, V8, marahil mayroon itong ilang mga nakatagong mga thread na hindi natin nalalaman tungkol sa.

V8 Engine

Ang V8 engine ay isang mataas na pagganap, Open-source web Assembly runtime engine para sa JavaScript na nakasulat sa C ++ ng Google. Karamihan sa mga browser ay nagpapatakbo ng JavaScript gamit ang V8 engine, at kahit na ang tanyag na node js runtime environment ay gumagamit din nito.

Sa simpleng wikang Ingles, ang V8 ay isang C ++ na programa, na tumatanggap ng code ng JavaScript, compile, at ginagawa ito.

Ang V8 ay gumagawa ng dalawang pangunahing bagay;

  • Pagbabahagi ng memorya ng memorya
  • Tumawag sa konteksto ng pagpapatupad ng konteksto

Nakalulungkot, mali ang hinala namin. Ang V8 ay may isang tawag lang sa tawag, isipin ang call stack bilang thread.

Isang thread === isang tawag stack === isang pagpapatupad sa isang pagkakataon.

Larawan – Noon ng Hacker

Yamang ang V8 ay may isang tawag lang sa tawag, kung paano pagkatapos ay tumatakbo ang JavaScript nang sabay-sabay at walang tuldok nang hindi pinipigilan ang pangunahing thread ng pagpapatupad?

Subukan nating alamin sa pamamagitan ng pagsulat ng isang simpleng ngunit karaniwang hindi nasasamantalang code at sama-sama itong pag-aralan.

Ang JavaScript ay nagpapatakbo ng bawat linya ng code ayon sa linya, isa-isa (bawat isa na may sinulud). Tulad ng inaasahan, ang unang linya ay makakakuha ng nakalimbag sa console dito, ngunit bakit ang huling linya ay nakalimbag bago ang code ng oras? Bakit hindi naghihintay ang proseso ng pagpapatupad para sa timeout code (pagharang) bago magpatuloy upang patakbuhin ang huling linya?

Ang ilang iba pang mga thread ay tila nakatulong sa amin na maipatupad ang oras na iyon dahil sigurado kami na ang isang thread ay maaari lamang magpatupad ng isang solong gawain sa anumang oras sa oras.

Hayaan ang isang sneak silip sa V8 Source Code sa isang saglit.

Ano nga ulit??!!! Walang mga function ng timer sa V8, walang DOM? Walang mga kaganapan? Walang AJAX?…. Yeeeeessss!!!

Ang mga kaganapan, DOM, timers, atbp ay hindi bahagi ng pagpapatupad ng pangunahing JavaScript, ang Mahigpit na Sumasang-ayon sa JavaScript sa mga pagtutukoy ng Ecma Scripts at iba’t ibang mga bersyon nito ayon sa mga pagtutukoy sa Ecma Scripts (ES X).

Paglabas ng Workflow

Ang mga kaganapan, timer, mga kahilingan ng Ajax ay lahat ay ibinigay sa client-side ng mga browser at madalas na tinutukoy bilang Web API. Ang mga ito ay pinapayagan ang nag-iisang may sinulid na JavaScript na maging hindi naka-block, magkakasabay, at walang tulin! Pero paano?

Mayroong tatlong pangunahing mga seksyon sa pagpapatupad ng daloy ng trabaho ng anumang programa sa JavaScript, ang tawag na stack, ang web API, at ang pila ng Task.

Ang Call Stack

Ang isang salansan ay isang istraktura ng data kung saan idinagdag ang huling elemento ay palaging ang unang aalisin mula sa salansan, maaari mong isipin ito bilang isang salansan ng isang plato kung saan ang unang plate na kung saan ang huling idinagdag ay maaaring alisin muna. Ang isang Call Stack ay walang anuman kundi isang istruktura ng data ng stack kung saan ang mga gawain o code ay isinasagawa nang naaayon.

Isaalang-alang natin ang halimbawa sa ibaba;

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

Kapag tinawag mo ang function printSquare (), itulak ito sa tawag na stack, ang function ng printSquare () ay tumatawag sa square () function. Ang function na parisukat () ay itinulak papunta sa salansan at tinawag din ang pag-andar (). Ang pagpaparami ng pagpapaandar ay itinulak sa salansan. Dahil ang pag-andar ng pag-andar ay nagbabalik at ito ang huling bagay na itinulak sa salansan, napagpasyahan muna nito at tinanggal mula sa salansan, na sinusundan ng parisukat () function at pagkatapos ay i-function ang printSquare ().

Ang Web API

Narito kung saan ang code na hindi hawakan ng V8 engine ay naisakatuparan upang hindi “i-block” ang pangunahing thread ng pagpapatupad. Kapag nakatagpo ang Call Stack ng isang web API function, ang proseso ay agad na ipinasa sa Web API, kung saan ito ay isinasagawa at pinalaya ang Call Stack upang maisagawa ang iba pang mga operasyon sa panahon ng pagpapatupad nito..

Balik tayo sa aming halimbawa ng setTimeout sa itaas;

Kapag pinatakbo namin ang code, ang unang linya ng console.log ay makakakuha ng itulak sa salansan at makuha namin ang aming output halos kaagad, sa pagkuha sa oras, ang mga timer ay hawakan ng browser at hindi isang bahagi ng pagpapatupad ng pangunahing V8, ito ay itulak sa Web API sa halip, pinalaya ang salansan upang makapagpaganap ito ng iba pang mga operasyon.

Habang ang oras ay tumatakbo pa rin, ang salansan ay magpatuloy sa susunod na linya ng pagkilos at nagpapatakbo ng huling console.log, na nagpapaliwanag kung bakit nakuha natin ang output na iyon bago ang output ng timer. Kapag nakumpleto ang timer, may nangyari. Ang console.log sa pagkatapos timer magically lilitaw sa tawag stack muli!

Paano?

Ang Pag-Loop ng Kaganapan

Bago natin talakayin ang kaganapan ng loop, hayaan muna na dumaan sa pag-andar ng gawain na pila.

Bumalik sa aming oras ng pag-timeout, kapag natapos na ng Web API ang pagpapatupad ng gawain, hindi lamang ito itutulak ito pabalik sa Call Stack na awtomatiko. Pumunta ito sa Task Queue. 

Ang isang pila ay isang istraktura ng data na gumagana sa Una sa Unang out na prinsipyo, kaya habang ang mga gawain ay naitulak sa pila, lumabas sila sa parehong pagkakasunud-sunod. Ang mga gawain na isinagawa ng Web API, na itinutulak sa Task Queue, pagkatapos ay bumalik sa Call Stack upang ma-print ang kanilang resulta.

Ngunit sandali. KUNG ANO ANG HECK AY ANG KAHITANG LOOP???

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

Ang loop ng kaganapan ay isang proseso na naghihintay para sa Call Stack na maging malinaw bago itulak ang mga callback mula sa Task Queue hanggang sa Call Stack. Kapag ang Stack ay malinaw, ang event loop ay nag-trigger at sinusuri ang Task Queue para sa mga magagamit na callback. Kung mayroon man, itinutulak ito sa Call Stack, naghihintay na maging malinaw ang Call Stack, at ulitin ang parehong proseso.

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

Ipinapakita sa itaas na diagram ang pangunahing daloy ng trabaho sa pagitan ng Event Loop at Task Queue.

Konklusyon

Habang ito ay isang napaka-pangunahing pagpapakilala, ang konsepto ng asynchronous programming sa JavaScript ay nagbibigay ng sapat na pananaw upang malinaw na maunawaan kung ano ang nangyayari sa ilalim ng hood at kung paano ang JavaScript ay maaaring tumakbo nang sabay-sabay at walang pagsabay sa isang solong thread.

Laging hinihingi ang JavaScript, at kung ikaw ay mausisa na malaman, papayuhan ko kang suriin ito Kurso ng 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