Przegl\u0105darka kontra JavaScript<\/strong><\/h2>\n\n\n\nWsp\u00f3\u0142czesne strony internetowe s\u0105 do\u015b\u0107 z\u0142o\u017cone, przez co, aby zachowa\u0107 p\u0142ynno\u015b\u0107 ich renderowania, przegl\u0105darka musi si\u0119 napoci\u0107 \u2013 formatuje style, wysy\u0142a\/odbiera zapytania, \u0142aduje posty, pobiera i wy\u015bwietla obrazki. G\u0142\u00f3wnym elementem przegl\u0105darki jest jej silnik JavaScript:<\/p>\n\n\n\n
\n- w Chromie i Node.js znajdziemy V8,<\/li>\n\n\n\n
- FireFox posiada SpiderMonkey, <\/li>\n\n\n\n
- Edge ma Chakr\u0119,<\/li>\n\n\n\n
- Safari implementuje JavaScriptCore.<\/li>\n<\/ul>\n\n\n\n
Przegl\u0105darki dysponuj\u0105 r\u00f3wnie\u017c swoim w\u0142asnym API (z implementacjami poszczeg\u00f3lnych, witalnych funkcji jak np. setTimeout czy alert).<\/p>\n\n\n\n
Zasada dzia\u0142ania mechanizmu Event Loop<\/strong><\/h2>\n\n\n\nKa\u017cdy z wymienionych wcze\u015bniej silnik\u00f3w implementuje Event Loop w odrobin\u0119 inny spos\u00f3b. Zacznijmy od zapoznania si\u0119 z bazow\u0105 implementacj\u0105 i og\u00f3ln\u0105 zasad\u0105 dzia\u0142ania:<\/p>\n\n\n\n![\"Og\u00f3lna](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/07\/Call-stack-4.png\")
<\/a>Ryc. 1 Og\u00f3lna zasada dzia\u0142ania Event Loop<\/figcaption><\/figure>\n\n\n\nAby zrozumie\u0107 Event Loop, musimy zrozumie\u0107 koncepcj\u0119 stosu wywo\u0142a\u0144 (Call Stack) oraz kolejki zdarze\u0144 (Event Queue).<\/p>\n\n\n\n
Stos wywo\u0142a\u0144 (Call Stack)<\/strong><\/h3>\n\n\n\nStos wywo\u0142a\u0144 jest struktur\u0105 danych, kt\u00f3ra przechowuje kontekst wywo\u0142a\u0144 funkcji. Spe\u0142nia on zasad\u0119 LIFO (ang. Last In, First Out<\/em>)<\/a>. Kiedy funkcja jest wywo\u0142ywana, jej kontekst jest umieszczany na szczycie stosu. Nast\u0119pnie program przechodzi do wykonywania kodu wewn\u0105trz wywo\u0142anej funkcji. Je\u015bli w tej funkcji wyst\u0119puje inne wywo\u0142anie funkcji, jej dane kontekstowe s\u0105 umieszczane na szczycie stosu, a program przechodzi do wykonania kodu w nowo wywo\u0142anej funkcji.<\/p>\n\n\n\nKiedy funkcja ko\u0144czy swoje wykonanie, jej dane kontekstowe s\u0105 usuwane ze stosu wywo\u0142a\u0144, a program wraca do miejsca, w kt\u00f3rym nast\u0105pi\u0142o wywo\u0142anie funkcji i tak a\u017c do opr\u00f3\u017cnienia stosu.<\/p>\n\n\n\n
Kolejka zdarze\u0144 (Callback \/ Event Queue)<\/strong><\/h3>\n\n\n\nKolejka zdarze\u0144 przechowuje zdarzenia i zadania do wykonania. To tu umieszczane s\u0105 wywo\u0142ania wskazane jako funkcje zwrotne (ang. callback<\/em>) do asynchronicznych metod z Web API. Elementy z kolejki s\u0105 pobierane na stos dopiero, gdy jest on pusty, czyli wywo\u0142ana aktualnie funkcja zostanie zako\u0144czona. Powy\u017cszym strukturom ci\u0119\u017cko by si\u0119 \u017cy\u0142o, gdyby nie Web APIs.<\/p>\n\n\n\nWeb APIs<\/strong><\/h3>\n\n\n\nDzi\u0119ki tym dobrodziejstwom zapewnianym przez przegl\u0105dark\u0119 otrzymujemy pot\u0119\u017cne mo\u017cliwo\u015bci. Mowa tutaj o DOM<\/em> i jego zdarzeniach, o AJAX, XMLHttpRequest, Fetch API<\/em>, o timerach (setTimeout, setInterval<\/em>) czy requestAnimationFrame<\/em>, s\u0142u\u017c\u0105cym chocia\u017cby do przeliczenia pozycji animowanego obiektu.<\/p>\n\n\n\nPrzegl\u0105darka przejmuje piecz\u0119 nad oczekiwaniem na zako\u0144czenie tych asynchronicznych operacji i dopiero wtedy wypycha je do Call Stacka, a w mi\u0119dzyczasie mog\u0105 wykonywa\u0107 si\u0119 inne fragmenty kodu, zapewniaj\u0105c p\u0142ynno\u015b\u0107 ca\u0142o\u015bci.<\/p>\n\n\n\n
Dzia\u0142anie Event Loop<\/strong><\/h2>\n\n\n\nG\u0142\u00f3wnym zadaniem Event Loop jest monitorowanie stosu wywo\u0142a\u0144 i kolejki zdarze\u0144. Je\u015bli stos wywo\u0142a\u0144 jest pusty, a kolejka zdarze\u0144 zawiera jakie\u015b zdarzenia, Event Loop przenosi zdarzenie z kolejki na stos i wykonuje je. To oznacza, \u017ce JavaScript mo\u017ce obs\u0142ugiwa\u0107 wiele zdarze\u0144 asynchronicznie<\/strong>, bez blokowania wykonywania innych zada\u0144.<\/p>\n\n\n\nJego prac\u0119 mo\u017cna podsumowa\u0107 w 3 krokach:<\/p>\n\n\n\n
\n- Pobranie zdarzenia \u2013 Event Loop oczekuje na wyst\u0105pienie zdarzenia takiego jak klikni\u0119cie myszy, przes\u0142anie \u017c\u0105dania sieciowego czy zako\u0144czenie operacji asynchronicznej.<\/li>\n\n\n\n
- Wywo\u0142anie odpowiednich funkcji \u2013 po wyst\u0105pieniu zdarzenia Event Loop wywo\u0142uje odpowiednie funkcje zwrotne (callback<\/em>) lub operacje asynchroniczne powi\u0105zane z tym zdarzeniem. Na przyk\u0142ad, je\u015bli u\u017cytkownik kliknie przycisk na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra obs\u0142uguje ten event.<\/li>\n\n\n\n
- Powr\u00f3t do oczekiwania \u2013 po wykonaniu funkcji zwrotnej, Event Loop powraca do oczekiwania na kolejne zdarzenie. Proces ten kontynuuje si\u0119 w niesko\u0144czono\u015b\u0107, zapewniaj\u0105c ci\u0105g\u0142\u0105 obs\u0142ug\u0119 zdarze\u0144 i asynchroniczno\u015b\u0107.<\/li>\n<\/ol>\n\n\n\n
Event Loop w JavaScript opiera si\u0119 na jednym w\u0105tku wykonawczym, co oznacza, \u017ce wszystkie operacje s\u0105 wykonywane jednow\u0105tkowo. Z tego powodu wa\u017cne jest, aby unika\u0107 blokowania operacji<\/strong>, kt\u00f3re mog\u0105 spowodowa\u0107 zatrzymanie Event Loop i tym samym wp\u0142ywa\u0107 na responsywno\u015b\u0107 aplikacji.<\/p>\n\n\n\nKiedy zdarzenie jest przetwarzane przez Event Loop, mo\u017ce mie\u0107 r\u00f3\u017cne skutki, przyk\u0142adowo:<\/p>\n\n\n\n
\n- je\u015bli zdarzenie jest klikni\u0119ciem przycisku na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 obs\u0142uguj\u0105c\u0105 to zdarzenie, tak, aby reagowa\u0107 na klikni\u0119cie u\u017cytkownika,<\/li>\n\n\n\n
- je\u015bli zdarzenie jest \u017c\u0105daniem sieciowym, Event Loop mo\u017ce przetworzy\u0107 odpowied\u017a serwera i wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra b\u0119dzie obs\u0142ugiwa\u0107 t\u0119 odpowied\u017a.<\/li>\n<\/ul>\n\n\n\n
Praktyczna strona dzia\u0142ania Event Loop<\/strong><\/h3>\n\n\n\nPrzyk\u0142ad dzia\u0142ania w praktyce mo\u017cecie zobaczy\u0107 poni\u017cej:<\/p>\n\n\n\n![\"fragment](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/07\/console.png\")
<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n![\"output\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/07\/console2.png\")
<\/a><\/figure>\n\n\n\nNa pierwszy rzut oka wszystkie logi wylistuj\u0105 si\u0119 w kolejno\u015bci od pierwszego do trzeciego, wszak ustawili\u015bmy timeout na 0. Jednak\u017ce, zgodnie z tym, co wcze\u015bniej napisa\u0142em, timer zosta\u0142 oddelegowany do Web APIs, kt\u00f3re po up\u0142ywie \u20180\u2019, czyli de facto od razu, umie\u015bci\u0142o go na Callback Queue (kolejce zdarze\u0144). Aczkolwiek, aby ponownie z niej trafi\u0107 na Call Stack, ten Stack musi zosta\u0107 wyczyszczony z bie\u017c\u0105cych zada\u0144.<\/p>\n\n\n\n
Jak zatem widzimy, bardzo wa\u017cne jest zrozumienie dzia\u0142ania Event Loop<\/strong> i korzystanie z niego we w\u0142a\u015bciwy spos\u00f3b, aby unikn\u0105\u0107 problem\u00f3w z wydajno\u015bci\u0105. Przy projektowaniu aplikacji JavaScript nale\u017cy rozwa\u017cy\u0107 wykorzystanie funkcji asynchronicznych, obietnic (promises<\/em>) i async\/await<\/em>, kt\u00f3re pozwalaj\u0105 na bardziej czytelne i wydajne zarz\u0105dzanie asynchronicznym kodem.<\/p>\n\n\n\nImplementacja mechanizmu Event Loop w silniku V8<\/strong><\/h2>\n\n\n\nJak ju\u017c wspomnia\u0142em, ka\u017cdy silnik przegl\u0105darki implementuje Event Loop w nieco innych spos\u00f3b, co mo\u017ce prowadzi\u0107 do pewnych r\u00f3\u017cnic w dzia\u0142aniu. Zapoznajmy si\u0119 z jego implementacj\u0105 w silniku V8 (Chrome, Node.js):<\/p>\n\n\n\n![\"Implementacja](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/07\/ezgif.com-video-to-gif-1.gif\")
<\/a>Ryc. 2 Implementacja Event Loop w silniku V8<\/figcaption><\/figure>\n\n\n\nMo\u017cemy zauwa\u017cy\u0107, \u017ce schemat implementacyjny jest bardzo podobny do og\u00f3lnego schematu implementacji Event Loop, z tym, \u017ce w Callback Queue rozpada si\u0119 na trzy podkolejki definiuj\u0105ce swoje w\u0142asne odpowiedzialno\u015bci. Kolejno s\u0105 to:<\/p>\n\n\n\n
\n- Microtask Queue<\/strong> \u2013 realizuje operacje odpowiedzialne za Promises, <\/em>zatem m\u00f3wimy tutaj o wszelkich metodach resolve<\/em> \/ reject<\/em>. Z tej kolejki korzysta tak\u017ce setImmediate<\/em> w Node.js (gdy chcemy wykona\u0107 fragment kodu asynchronicznie, ale tak szybko, jak to jest mo\u017cliwe) oraz MutationObserver <\/em>(stosowany w celu obserwacji zmian struktury HTML danych element\u00f3w).<\/li>\n\n\n\n
- Render Queue<\/strong> \u2013 odpowiada za zebranie wszystkich zada\u0144, kt\u00f3re musz\u0105 si\u0119 wykona\u0107 przed nast\u0119pnym renderowania si\u0119 strony. Do tej kolejki trafi chocia\u017cby wspomniana wcze\u015bniej funkcja requestAnimationFrame<\/em>.<\/li>\n\n\n\n
- Task Queue<\/strong> \u2013 ostatnia kolejka, jednocze\u015bnie zachowuj\u0105ca si\u0119 odrobin\u0119 odmiennie od poprzednich dw\u00f3ch. Odpowiedzialna jest za zebranie wszystkich callback\u00f3w do WebAPI (np. setTimeout<\/em>). Odmienno\u015b\u0107 zachowania tej kolejki polega na tym, i\u017c proceduje tylko jeden element, po kt\u00f3rym nast\u0119puje wywo\u0142anie Event Loop i przenosi nas na Call Stack. Zatem, nawet je\u017celi jakie\u015b zadania pozosta\u0142y w Task Queue, mo\u017ce ona wykona\u0107 tylko jedn\u0105 operacj\u0119 \u2018per loop\u2019. Poprzednie dwie kolejki wykonuj\u0105 swoje zadania w p\u0119tli, a\u017c do opr\u00f3\u017cnienia swojej kolejki.<\/li>\n<\/ul>\n\n\n\n
\n \n ![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-Digital-Desktop_.jpg\")
\n <\/picture>\n \n \n Digital<\/h2>\n <\/div>\n
\n Zwi\u0119ksz zysk i poszerzaj grono zadowolonych klient\u00f3w dzi\u0119ki naszym us\u0142ugom in\u017cynierii oprogramowania, e-commerce, mobile i digital customer experience.\n <\/p>\n \n Oferta Digital<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nCiesz\u0119 si\u0119, \u017ce doczytali\u015bcie artyku\u0142 do ko\u0144ca! Jak widzicie, Event Loop jest niebywale istotnym elementem ka\u017cdego przegl\u0105darkowego silnika. <\/p>\n\n\n\n
Jest on zaprojektowany w taki spos\u00f3b, aby maksymalnie wykorzystywa\u0107 zasoby dost\u0119pne w \u015brodowisku. Dzi\u0119ki temu, aplikacje mog\u0105 dzia\u0142a\u0107 wydajnie i skutecznie zarz\u0105dza\u0107 zasobami. Znajomo\u015b\u0107 jego specyfiki pozwala wszystkim programistom tworz\u0105cym w \u015brodowisku JavaScript pisa\u0107 bardziej wydajne, responsywne i skalowalne aplikacje asynchroniczne.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuje Ci\u0119 tematyka stosu i RAM-u, polecamy artyku\u0142 naszego eksperta<\/a>.<\/p>\n\n\n
Przegl\u0105darki dysponuj\u0105 r\u00f3wnie\u017c swoim w\u0142asnym API (z implementacjami poszczeg\u00f3lnych, witalnych funkcji jak np. setTimeout czy alert).<\/p>\n\n\n\n
Zasada dzia\u0142ania mechanizmu Event Loop<\/strong><\/h2>\n\n\n\nKa\u017cdy z wymienionych wcze\u015bniej silnik\u00f3w implementuje Event Loop w odrobin\u0119 inny spos\u00f3b. Zacznijmy od zapoznania si\u0119 z bazow\u0105 implementacj\u0105 i og\u00f3ln\u0105 zasad\u0105 dzia\u0142ania:<\/p>\n\n\n\n<\/a>Ryc. 1 Og\u00f3lna zasada dzia\u0142ania Event Loop<\/figcaption><\/figure>\n\n\n\nAby zrozumie\u0107 Event Loop, musimy zrozumie\u0107 koncepcj\u0119 stosu wywo\u0142a\u0144 (Call Stack) oraz kolejki zdarze\u0144 (Event Queue).<\/p>\n\n\n\n
Stos wywo\u0142a\u0144 (Call Stack)<\/strong><\/h3>\n\n\n\nStos wywo\u0142a\u0144 jest struktur\u0105 danych, kt\u00f3ra przechowuje kontekst wywo\u0142a\u0144 funkcji. Spe\u0142nia on zasad\u0119 LIFO (ang. Last In, First Out<\/em>)<\/a>. Kiedy funkcja jest wywo\u0142ywana, jej kontekst jest umieszczany na szczycie stosu. Nast\u0119pnie program przechodzi do wykonywania kodu wewn\u0105trz wywo\u0142anej funkcji. Je\u015bli w tej funkcji wyst\u0119puje inne wywo\u0142anie funkcji, jej dane kontekstowe s\u0105 umieszczane na szczycie stosu, a program przechodzi do wykonania kodu w nowo wywo\u0142anej funkcji.<\/p>\n\n\n\nKiedy funkcja ko\u0144czy swoje wykonanie, jej dane kontekstowe s\u0105 usuwane ze stosu wywo\u0142a\u0144, a program wraca do miejsca, w kt\u00f3rym nast\u0105pi\u0142o wywo\u0142anie funkcji i tak a\u017c do opr\u00f3\u017cnienia stosu.<\/p>\n\n\n\n
Kolejka zdarze\u0144 (Callback \/ Event Queue)<\/strong><\/h3>\n\n\n\nKolejka zdarze\u0144 przechowuje zdarzenia i zadania do wykonania. To tu umieszczane s\u0105 wywo\u0142ania wskazane jako funkcje zwrotne (ang. callback<\/em>) do asynchronicznych metod z Web API. Elementy z kolejki s\u0105 pobierane na stos dopiero, gdy jest on pusty, czyli wywo\u0142ana aktualnie funkcja zostanie zako\u0144czona. Powy\u017cszym strukturom ci\u0119\u017cko by si\u0119 \u017cy\u0142o, gdyby nie Web APIs.<\/p>\n\n\n\nWeb APIs<\/strong><\/h3>\n\n\n\nDzi\u0119ki tym dobrodziejstwom zapewnianym przez przegl\u0105dark\u0119 otrzymujemy pot\u0119\u017cne mo\u017cliwo\u015bci. Mowa tutaj o DOM<\/em> i jego zdarzeniach, o AJAX, XMLHttpRequest, Fetch API<\/em>, o timerach (setTimeout, setInterval<\/em>) czy requestAnimationFrame<\/em>, s\u0142u\u017c\u0105cym chocia\u017cby do przeliczenia pozycji animowanego obiektu.<\/p>\n\n\n\nPrzegl\u0105darka przejmuje piecz\u0119 nad oczekiwaniem na zako\u0144czenie tych asynchronicznych operacji i dopiero wtedy wypycha je do Call Stacka, a w mi\u0119dzyczasie mog\u0105 wykonywa\u0107 si\u0119 inne fragmenty kodu, zapewniaj\u0105c p\u0142ynno\u015b\u0107 ca\u0142o\u015bci.<\/p>\n\n\n\n
Dzia\u0142anie Event Loop<\/strong><\/h2>\n\n\n\nG\u0142\u00f3wnym zadaniem Event Loop jest monitorowanie stosu wywo\u0142a\u0144 i kolejki zdarze\u0144. Je\u015bli stos wywo\u0142a\u0144 jest pusty, a kolejka zdarze\u0144 zawiera jakie\u015b zdarzenia, Event Loop przenosi zdarzenie z kolejki na stos i wykonuje je. To oznacza, \u017ce JavaScript mo\u017ce obs\u0142ugiwa\u0107 wiele zdarze\u0144 asynchronicznie<\/strong>, bez blokowania wykonywania innych zada\u0144.<\/p>\n\n\n\nJego prac\u0119 mo\u017cna podsumowa\u0107 w 3 krokach:<\/p>\n\n\n\n
\n- Pobranie zdarzenia \u2013 Event Loop oczekuje na wyst\u0105pienie zdarzenia takiego jak klikni\u0119cie myszy, przes\u0142anie \u017c\u0105dania sieciowego czy zako\u0144czenie operacji asynchronicznej.<\/li>\n\n\n\n
- Wywo\u0142anie odpowiednich funkcji \u2013 po wyst\u0105pieniu zdarzenia Event Loop wywo\u0142uje odpowiednie funkcje zwrotne (callback<\/em>) lub operacje asynchroniczne powi\u0105zane z tym zdarzeniem. Na przyk\u0142ad, je\u015bli u\u017cytkownik kliknie przycisk na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra obs\u0142uguje ten event.<\/li>\n\n\n\n
- Powr\u00f3t do oczekiwania \u2013 po wykonaniu funkcji zwrotnej, Event Loop powraca do oczekiwania na kolejne zdarzenie. Proces ten kontynuuje si\u0119 w niesko\u0144czono\u015b\u0107, zapewniaj\u0105c ci\u0105g\u0142\u0105 obs\u0142ug\u0119 zdarze\u0144 i asynchroniczno\u015b\u0107.<\/li>\n<\/ol>\n\n\n\n
Event Loop w JavaScript opiera si\u0119 na jednym w\u0105tku wykonawczym, co oznacza, \u017ce wszystkie operacje s\u0105 wykonywane jednow\u0105tkowo. Z tego powodu wa\u017cne jest, aby unika\u0107 blokowania operacji<\/strong>, kt\u00f3re mog\u0105 spowodowa\u0107 zatrzymanie Event Loop i tym samym wp\u0142ywa\u0107 na responsywno\u015b\u0107 aplikacji.<\/p>\n\n\n\nKiedy zdarzenie jest przetwarzane przez Event Loop, mo\u017ce mie\u0107 r\u00f3\u017cne skutki, przyk\u0142adowo:<\/p>\n\n\n\n
\n- je\u015bli zdarzenie jest klikni\u0119ciem przycisku na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 obs\u0142uguj\u0105c\u0105 to zdarzenie, tak, aby reagowa\u0107 na klikni\u0119cie u\u017cytkownika,<\/li>\n\n\n\n
- je\u015bli zdarzenie jest \u017c\u0105daniem sieciowym, Event Loop mo\u017ce przetworzy\u0107 odpowied\u017a serwera i wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra b\u0119dzie obs\u0142ugiwa\u0107 t\u0119 odpowied\u017a.<\/li>\n<\/ul>\n\n\n\n
Praktyczna strona dzia\u0142ania Event Loop<\/strong><\/h3>\n\n\n\nPrzyk\u0142ad dzia\u0142ania w praktyce mo\u017cecie zobaczy\u0107 poni\u017cej:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNa pierwszy rzut oka wszystkie logi wylistuj\u0105 si\u0119 w kolejno\u015bci od pierwszego do trzeciego, wszak ustawili\u015bmy timeout na 0. Jednak\u017ce, zgodnie z tym, co wcze\u015bniej napisa\u0142em, timer zosta\u0142 oddelegowany do Web APIs, kt\u00f3re po up\u0142ywie \u20180\u2019, czyli de facto od razu, umie\u015bci\u0142o go na Callback Queue (kolejce zdarze\u0144). Aczkolwiek, aby ponownie z niej trafi\u0107 na Call Stack, ten Stack musi zosta\u0107 wyczyszczony z bie\u017c\u0105cych zada\u0144.<\/p>\n\n\n\n
Jak zatem widzimy, bardzo wa\u017cne jest zrozumienie dzia\u0142ania Event Loop<\/strong> i korzystanie z niego we w\u0142a\u015bciwy spos\u00f3b, aby unikn\u0105\u0107 problem\u00f3w z wydajno\u015bci\u0105. Przy projektowaniu aplikacji JavaScript nale\u017cy rozwa\u017cy\u0107 wykorzystanie funkcji asynchronicznych, obietnic (promises<\/em>) i async\/await<\/em>, kt\u00f3re pozwalaj\u0105 na bardziej czytelne i wydajne zarz\u0105dzanie asynchronicznym kodem.<\/p>\n\n\n\nImplementacja mechanizmu Event Loop w silniku V8<\/strong><\/h2>\n\n\n\nJak ju\u017c wspomnia\u0142em, ka\u017cdy silnik przegl\u0105darki implementuje Event Loop w nieco innych spos\u00f3b, co mo\u017ce prowadzi\u0107 do pewnych r\u00f3\u017cnic w dzia\u0142aniu. Zapoznajmy si\u0119 z jego implementacj\u0105 w silniku V8 (Chrome, Node.js):<\/p>\n\n\n\n<\/a>Ryc. 2 Implementacja Event Loop w silniku V8<\/figcaption><\/figure>\n\n\n\nMo\u017cemy zauwa\u017cy\u0107, \u017ce schemat implementacyjny jest bardzo podobny do og\u00f3lnego schematu implementacji Event Loop, z tym, \u017ce w Callback Queue rozpada si\u0119 na trzy podkolejki definiuj\u0105ce swoje w\u0142asne odpowiedzialno\u015bci. Kolejno s\u0105 to:<\/p>\n\n\n\n
\n- Microtask Queue<\/strong> \u2013 realizuje operacje odpowiedzialne za Promises, <\/em>zatem m\u00f3wimy tutaj o wszelkich metodach resolve<\/em> \/ reject<\/em>. Z tej kolejki korzysta tak\u017ce setImmediate<\/em> w Node.js (gdy chcemy wykona\u0107 fragment kodu asynchronicznie, ale tak szybko, jak to jest mo\u017cliwe) oraz MutationObserver <\/em>(stosowany w celu obserwacji zmian struktury HTML danych element\u00f3w).<\/li>\n\n\n\n
- Render Queue<\/strong> \u2013 odpowiada za zebranie wszystkich zada\u0144, kt\u00f3re musz\u0105 si\u0119 wykona\u0107 przed nast\u0119pnym renderowania si\u0119 strony. Do tej kolejki trafi chocia\u017cby wspomniana wcze\u015bniej funkcja requestAnimationFrame<\/em>.<\/li>\n\n\n\n
- Task Queue<\/strong> \u2013 ostatnia kolejka, jednocze\u015bnie zachowuj\u0105ca si\u0119 odrobin\u0119 odmiennie od poprzednich dw\u00f3ch. Odpowiedzialna jest za zebranie wszystkich callback\u00f3w do WebAPI (np. setTimeout<\/em>). Odmienno\u015b\u0107 zachowania tej kolejki polega na tym, i\u017c proceduje tylko jeden element, po kt\u00f3rym nast\u0119puje wywo\u0142anie Event Loop i przenosi nas na Call Stack. Zatem, nawet je\u017celi jakie\u015b zadania pozosta\u0142y w Task Queue, mo\u017ce ona wykona\u0107 tylko jedn\u0105 operacj\u0119 \u2018per loop\u2019. Poprzednie dwie kolejki wykonuj\u0105 swoje zadania w p\u0119tli, a\u017c do opr\u00f3\u017cnienia swojej kolejki.<\/li>\n<\/ul>\n\n\n\n
\n \n \n <\/picture>\n \n \n Digital<\/h2>\n <\/div>\n
\n Zwi\u0119ksz zysk i poszerzaj grono zadowolonych klient\u00f3w dzi\u0119ki naszym us\u0142ugom in\u017cynierii oprogramowania, e-commerce, mobile i digital customer experience.\n <\/p>\n \n Oferta Digital<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nCiesz\u0119 si\u0119, \u017ce doczytali\u015bcie artyku\u0142 do ko\u0144ca! Jak widzicie, Event Loop jest niebywale istotnym elementem ka\u017cdego przegl\u0105darkowego silnika. <\/p>\n\n\n\n
Jest on zaprojektowany w taki spos\u00f3b, aby maksymalnie wykorzystywa\u0107 zasoby dost\u0119pne w \u015brodowisku. Dzi\u0119ki temu, aplikacje mog\u0105 dzia\u0142a\u0107 wydajnie i skutecznie zarz\u0105dza\u0107 zasobami. Znajomo\u015b\u0107 jego specyfiki pozwala wszystkim programistom tworz\u0105cym w \u015brodowisku JavaScript pisa\u0107 bardziej wydajne, responsywne i skalowalne aplikacje asynchroniczne.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuje Ci\u0119 tematyka stosu i RAM-u, polecamy artyku\u0142 naszego eksperta<\/a>.<\/p>\n\n\n
<\/a>Aby zrozumie\u0107 Event Loop, musimy zrozumie\u0107 koncepcj\u0119 stosu wywo\u0142a\u0144 (Call Stack) oraz kolejki zdarze\u0144 (Event Queue).<\/p>\n\n\n\n
Stos wywo\u0142a\u0144 (Call Stack)<\/strong><\/h3>\n\n\n\nStos wywo\u0142a\u0144 jest struktur\u0105 danych, kt\u00f3ra przechowuje kontekst wywo\u0142a\u0144 funkcji. Spe\u0142nia on zasad\u0119 LIFO (ang. Last In, First Out<\/em>)<\/a>. Kiedy funkcja jest wywo\u0142ywana, jej kontekst jest umieszczany na szczycie stosu. Nast\u0119pnie program przechodzi do wykonywania kodu wewn\u0105trz wywo\u0142anej funkcji. Je\u015bli w tej funkcji wyst\u0119puje inne wywo\u0142anie funkcji, jej dane kontekstowe s\u0105 umieszczane na szczycie stosu, a program przechodzi do wykonania kodu w nowo wywo\u0142anej funkcji.<\/p>\n\n\n\nKiedy funkcja ko\u0144czy swoje wykonanie, jej dane kontekstowe s\u0105 usuwane ze stosu wywo\u0142a\u0144, a program wraca do miejsca, w kt\u00f3rym nast\u0105pi\u0142o wywo\u0142anie funkcji i tak a\u017c do opr\u00f3\u017cnienia stosu.<\/p>\n\n\n\n
Kolejka zdarze\u0144 (Callback \/ Event Queue)<\/strong><\/h3>\n\n\n\nKolejka zdarze\u0144 przechowuje zdarzenia i zadania do wykonania. To tu umieszczane s\u0105 wywo\u0142ania wskazane jako funkcje zwrotne (ang. callback<\/em>) do asynchronicznych metod z Web API. Elementy z kolejki s\u0105 pobierane na stos dopiero, gdy jest on pusty, czyli wywo\u0142ana aktualnie funkcja zostanie zako\u0144czona. Powy\u017cszym strukturom ci\u0119\u017cko by si\u0119 \u017cy\u0142o, gdyby nie Web APIs.<\/p>\n\n\n\nWeb APIs<\/strong><\/h3>\n\n\n\nDzi\u0119ki tym dobrodziejstwom zapewnianym przez przegl\u0105dark\u0119 otrzymujemy pot\u0119\u017cne mo\u017cliwo\u015bci. Mowa tutaj o DOM<\/em> i jego zdarzeniach, o AJAX, XMLHttpRequest, Fetch API<\/em>, o timerach (setTimeout, setInterval<\/em>) czy requestAnimationFrame<\/em>, s\u0142u\u017c\u0105cym chocia\u017cby do przeliczenia pozycji animowanego obiektu.<\/p>\n\n\n\nPrzegl\u0105darka przejmuje piecz\u0119 nad oczekiwaniem na zako\u0144czenie tych asynchronicznych operacji i dopiero wtedy wypycha je do Call Stacka, a w mi\u0119dzyczasie mog\u0105 wykonywa\u0107 si\u0119 inne fragmenty kodu, zapewniaj\u0105c p\u0142ynno\u015b\u0107 ca\u0142o\u015bci.<\/p>\n\n\n\n
Dzia\u0142anie Event Loop<\/strong><\/h2>\n\n\n\nG\u0142\u00f3wnym zadaniem Event Loop jest monitorowanie stosu wywo\u0142a\u0144 i kolejki zdarze\u0144. Je\u015bli stos wywo\u0142a\u0144 jest pusty, a kolejka zdarze\u0144 zawiera jakie\u015b zdarzenia, Event Loop przenosi zdarzenie z kolejki na stos i wykonuje je. To oznacza, \u017ce JavaScript mo\u017ce obs\u0142ugiwa\u0107 wiele zdarze\u0144 asynchronicznie<\/strong>, bez blokowania wykonywania innych zada\u0144.<\/p>\n\n\n\nJego prac\u0119 mo\u017cna podsumowa\u0107 w 3 krokach:<\/p>\n\n\n\n
\n- Pobranie zdarzenia \u2013 Event Loop oczekuje na wyst\u0105pienie zdarzenia takiego jak klikni\u0119cie myszy, przes\u0142anie \u017c\u0105dania sieciowego czy zako\u0144czenie operacji asynchronicznej.<\/li>\n\n\n\n
- Wywo\u0142anie odpowiednich funkcji \u2013 po wyst\u0105pieniu zdarzenia Event Loop wywo\u0142uje odpowiednie funkcje zwrotne (callback<\/em>) lub operacje asynchroniczne powi\u0105zane z tym zdarzeniem. Na przyk\u0142ad, je\u015bli u\u017cytkownik kliknie przycisk na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra obs\u0142uguje ten event.<\/li>\n\n\n\n
- Powr\u00f3t do oczekiwania \u2013 po wykonaniu funkcji zwrotnej, Event Loop powraca do oczekiwania na kolejne zdarzenie. Proces ten kontynuuje si\u0119 w niesko\u0144czono\u015b\u0107, zapewniaj\u0105c ci\u0105g\u0142\u0105 obs\u0142ug\u0119 zdarze\u0144 i asynchroniczno\u015b\u0107.<\/li>\n<\/ol>\n\n\n\n
Event Loop w JavaScript opiera si\u0119 na jednym w\u0105tku wykonawczym, co oznacza, \u017ce wszystkie operacje s\u0105 wykonywane jednow\u0105tkowo. Z tego powodu wa\u017cne jest, aby unika\u0107 blokowania operacji<\/strong>, kt\u00f3re mog\u0105 spowodowa\u0107 zatrzymanie Event Loop i tym samym wp\u0142ywa\u0107 na responsywno\u015b\u0107 aplikacji.<\/p>\n\n\n\nKiedy zdarzenie jest przetwarzane przez Event Loop, mo\u017ce mie\u0107 r\u00f3\u017cne skutki, przyk\u0142adowo:<\/p>\n\n\n\n
\n- je\u015bli zdarzenie jest klikni\u0119ciem przycisku na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 obs\u0142uguj\u0105c\u0105 to zdarzenie, tak, aby reagowa\u0107 na klikni\u0119cie u\u017cytkownika,<\/li>\n\n\n\n
- je\u015bli zdarzenie jest \u017c\u0105daniem sieciowym, Event Loop mo\u017ce przetworzy\u0107 odpowied\u017a serwera i wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra b\u0119dzie obs\u0142ugiwa\u0107 t\u0119 odpowied\u017a.<\/li>\n<\/ul>\n\n\n\n
Praktyczna strona dzia\u0142ania Event Loop<\/strong><\/h3>\n\n\n\nPrzyk\u0142ad dzia\u0142ania w praktyce mo\u017cecie zobaczy\u0107 poni\u017cej:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNa pierwszy rzut oka wszystkie logi wylistuj\u0105 si\u0119 w kolejno\u015bci od pierwszego do trzeciego, wszak ustawili\u015bmy timeout na 0. Jednak\u017ce, zgodnie z tym, co wcze\u015bniej napisa\u0142em, timer zosta\u0142 oddelegowany do Web APIs, kt\u00f3re po up\u0142ywie \u20180\u2019, czyli de facto od razu, umie\u015bci\u0142o go na Callback Queue (kolejce zdarze\u0144). Aczkolwiek, aby ponownie z niej trafi\u0107 na Call Stack, ten Stack musi zosta\u0107 wyczyszczony z bie\u017c\u0105cych zada\u0144.<\/p>\n\n\n\n
Jak zatem widzimy, bardzo wa\u017cne jest zrozumienie dzia\u0142ania Event Loop<\/strong> i korzystanie z niego we w\u0142a\u015bciwy spos\u00f3b, aby unikn\u0105\u0107 problem\u00f3w z wydajno\u015bci\u0105. Przy projektowaniu aplikacji JavaScript nale\u017cy rozwa\u017cy\u0107 wykorzystanie funkcji asynchronicznych, obietnic (promises<\/em>) i async\/await<\/em>, kt\u00f3re pozwalaj\u0105 na bardziej czytelne i wydajne zarz\u0105dzanie asynchronicznym kodem.<\/p>\n\n\n\nImplementacja mechanizmu Event Loop w silniku V8<\/strong><\/h2>\n\n\n\nJak ju\u017c wspomnia\u0142em, ka\u017cdy silnik przegl\u0105darki implementuje Event Loop w nieco innych spos\u00f3b, co mo\u017ce prowadzi\u0107 do pewnych r\u00f3\u017cnic w dzia\u0142aniu. Zapoznajmy si\u0119 z jego implementacj\u0105 w silniku V8 (Chrome, Node.js):<\/p>\n\n\n\n<\/a>Ryc. 2 Implementacja Event Loop w silniku V8<\/figcaption><\/figure>\n\n\n\nMo\u017cemy zauwa\u017cy\u0107, \u017ce schemat implementacyjny jest bardzo podobny do og\u00f3lnego schematu implementacji Event Loop, z tym, \u017ce w Callback Queue rozpada si\u0119 na trzy podkolejki definiuj\u0105ce swoje w\u0142asne odpowiedzialno\u015bci. Kolejno s\u0105 to:<\/p>\n\n\n\n
\n- Microtask Queue<\/strong> \u2013 realizuje operacje odpowiedzialne za Promises, <\/em>zatem m\u00f3wimy tutaj o wszelkich metodach resolve<\/em> \/ reject<\/em>. Z tej kolejki korzysta tak\u017ce setImmediate<\/em> w Node.js (gdy chcemy wykona\u0107 fragment kodu asynchronicznie, ale tak szybko, jak to jest mo\u017cliwe) oraz MutationObserver <\/em>(stosowany w celu obserwacji zmian struktury HTML danych element\u00f3w).<\/li>\n\n\n\n
- Render Queue<\/strong> \u2013 odpowiada za zebranie wszystkich zada\u0144, kt\u00f3re musz\u0105 si\u0119 wykona\u0107 przed nast\u0119pnym renderowania si\u0119 strony. Do tej kolejki trafi chocia\u017cby wspomniana wcze\u015bniej funkcja requestAnimationFrame<\/em>.<\/li>\n\n\n\n
- Task Queue<\/strong> \u2013 ostatnia kolejka, jednocze\u015bnie zachowuj\u0105ca si\u0119 odrobin\u0119 odmiennie od poprzednich dw\u00f3ch. Odpowiedzialna jest za zebranie wszystkich callback\u00f3w do WebAPI (np. setTimeout<\/em>). Odmienno\u015b\u0107 zachowania tej kolejki polega na tym, i\u017c proceduje tylko jeden element, po kt\u00f3rym nast\u0119puje wywo\u0142anie Event Loop i przenosi nas na Call Stack. Zatem, nawet je\u017celi jakie\u015b zadania pozosta\u0142y w Task Queue, mo\u017ce ona wykona\u0107 tylko jedn\u0105 operacj\u0119 \u2018per loop\u2019. Poprzednie dwie kolejki wykonuj\u0105 swoje zadania w p\u0119tli, a\u017c do opr\u00f3\u017cnienia swojej kolejki.<\/li>\n<\/ul>\n\n\n\n
\n \n \n <\/picture>\n \n \n Digital<\/h2>\n <\/div>\n
\n Zwi\u0119ksz zysk i poszerzaj grono zadowolonych klient\u00f3w dzi\u0119ki naszym us\u0142ugom in\u017cynierii oprogramowania, e-commerce, mobile i digital customer experience.\n <\/p>\n \n Oferta Digital<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nCiesz\u0119 si\u0119, \u017ce doczytali\u015bcie artyku\u0142 do ko\u0144ca! Jak widzicie, Event Loop jest niebywale istotnym elementem ka\u017cdego przegl\u0105darkowego silnika. <\/p>\n\n\n\n
Jest on zaprojektowany w taki spos\u00f3b, aby maksymalnie wykorzystywa\u0107 zasoby dost\u0119pne w \u015brodowisku. Dzi\u0119ki temu, aplikacje mog\u0105 dzia\u0142a\u0107 wydajnie i skutecznie zarz\u0105dza\u0107 zasobami. Znajomo\u015b\u0107 jego specyfiki pozwala wszystkim programistom tworz\u0105cym w \u015brodowisku JavaScript pisa\u0107 bardziej wydajne, responsywne i skalowalne aplikacje asynchroniczne.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuje Ci\u0119 tematyka stosu i RAM-u, polecamy artyku\u0142 naszego eksperta<\/a>.<\/p>\n\n\n
Kiedy funkcja ko\u0144czy swoje wykonanie, jej dane kontekstowe s\u0105 usuwane ze stosu wywo\u0142a\u0144, a program wraca do miejsca, w kt\u00f3rym nast\u0105pi\u0142o wywo\u0142anie funkcji i tak a\u017c do opr\u00f3\u017cnienia stosu.<\/p>\n\n\n\n
Kolejka zdarze\u0144 (Callback \/ Event Queue)<\/strong><\/h3>\n\n\n\nKolejka zdarze\u0144 przechowuje zdarzenia i zadania do wykonania. To tu umieszczane s\u0105 wywo\u0142ania wskazane jako funkcje zwrotne (ang. callback<\/em>) do asynchronicznych metod z Web API. Elementy z kolejki s\u0105 pobierane na stos dopiero, gdy jest on pusty, czyli wywo\u0142ana aktualnie funkcja zostanie zako\u0144czona. Powy\u017cszym strukturom ci\u0119\u017cko by si\u0119 \u017cy\u0142o, gdyby nie Web APIs.<\/p>\n\n\n\nWeb APIs<\/strong><\/h3>\n\n\n\nDzi\u0119ki tym dobrodziejstwom zapewnianym przez przegl\u0105dark\u0119 otrzymujemy pot\u0119\u017cne mo\u017cliwo\u015bci. Mowa tutaj o DOM<\/em> i jego zdarzeniach, o AJAX, XMLHttpRequest, Fetch API<\/em>, o timerach (setTimeout, setInterval<\/em>) czy requestAnimationFrame<\/em>, s\u0142u\u017c\u0105cym chocia\u017cby do przeliczenia pozycji animowanego obiektu.<\/p>\n\n\n\nPrzegl\u0105darka przejmuje piecz\u0119 nad oczekiwaniem na zako\u0144czenie tych asynchronicznych operacji i dopiero wtedy wypycha je do Call Stacka, a w mi\u0119dzyczasie mog\u0105 wykonywa\u0107 si\u0119 inne fragmenty kodu, zapewniaj\u0105c p\u0142ynno\u015b\u0107 ca\u0142o\u015bci.<\/p>\n\n\n\n
Dzia\u0142anie Event Loop<\/strong><\/h2>\n\n\n\nG\u0142\u00f3wnym zadaniem Event Loop jest monitorowanie stosu wywo\u0142a\u0144 i kolejki zdarze\u0144. Je\u015bli stos wywo\u0142a\u0144 jest pusty, a kolejka zdarze\u0144 zawiera jakie\u015b zdarzenia, Event Loop przenosi zdarzenie z kolejki na stos i wykonuje je. To oznacza, \u017ce JavaScript mo\u017ce obs\u0142ugiwa\u0107 wiele zdarze\u0144 asynchronicznie<\/strong>, bez blokowania wykonywania innych zada\u0144.<\/p>\n\n\n\nJego prac\u0119 mo\u017cna podsumowa\u0107 w 3 krokach:<\/p>\n\n\n\n
\n- Pobranie zdarzenia \u2013 Event Loop oczekuje na wyst\u0105pienie zdarzenia takiego jak klikni\u0119cie myszy, przes\u0142anie \u017c\u0105dania sieciowego czy zako\u0144czenie operacji asynchronicznej.<\/li>\n\n\n\n
- Wywo\u0142anie odpowiednich funkcji \u2013 po wyst\u0105pieniu zdarzenia Event Loop wywo\u0142uje odpowiednie funkcje zwrotne (callback<\/em>) lub operacje asynchroniczne powi\u0105zane z tym zdarzeniem. Na przyk\u0142ad, je\u015bli u\u017cytkownik kliknie przycisk na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra obs\u0142uguje ten event.<\/li>\n\n\n\n
- Powr\u00f3t do oczekiwania \u2013 po wykonaniu funkcji zwrotnej, Event Loop powraca do oczekiwania na kolejne zdarzenie. Proces ten kontynuuje si\u0119 w niesko\u0144czono\u015b\u0107, zapewniaj\u0105c ci\u0105g\u0142\u0105 obs\u0142ug\u0119 zdarze\u0144 i asynchroniczno\u015b\u0107.<\/li>\n<\/ol>\n\n\n\n
Event Loop w JavaScript opiera si\u0119 na jednym w\u0105tku wykonawczym, co oznacza, \u017ce wszystkie operacje s\u0105 wykonywane jednow\u0105tkowo. Z tego powodu wa\u017cne jest, aby unika\u0107 blokowania operacji<\/strong>, kt\u00f3re mog\u0105 spowodowa\u0107 zatrzymanie Event Loop i tym samym wp\u0142ywa\u0107 na responsywno\u015b\u0107 aplikacji.<\/p>\n\n\n\nKiedy zdarzenie jest przetwarzane przez Event Loop, mo\u017ce mie\u0107 r\u00f3\u017cne skutki, przyk\u0142adowo:<\/p>\n\n\n\n
\n- je\u015bli zdarzenie jest klikni\u0119ciem przycisku na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 obs\u0142uguj\u0105c\u0105 to zdarzenie, tak, aby reagowa\u0107 na klikni\u0119cie u\u017cytkownika,<\/li>\n\n\n\n
- je\u015bli zdarzenie jest \u017c\u0105daniem sieciowym, Event Loop mo\u017ce przetworzy\u0107 odpowied\u017a serwera i wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra b\u0119dzie obs\u0142ugiwa\u0107 t\u0119 odpowied\u017a.<\/li>\n<\/ul>\n\n\n\n
Praktyczna strona dzia\u0142ania Event Loop<\/strong><\/h3>\n\n\n\nPrzyk\u0142ad dzia\u0142ania w praktyce mo\u017cecie zobaczy\u0107 poni\u017cej:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNa pierwszy rzut oka wszystkie logi wylistuj\u0105 si\u0119 w kolejno\u015bci od pierwszego do trzeciego, wszak ustawili\u015bmy timeout na 0. Jednak\u017ce, zgodnie z tym, co wcze\u015bniej napisa\u0142em, timer zosta\u0142 oddelegowany do Web APIs, kt\u00f3re po up\u0142ywie \u20180\u2019, czyli de facto od razu, umie\u015bci\u0142o go na Callback Queue (kolejce zdarze\u0144). Aczkolwiek, aby ponownie z niej trafi\u0107 na Call Stack, ten Stack musi zosta\u0107 wyczyszczony z bie\u017c\u0105cych zada\u0144.<\/p>\n\n\n\n
Jak zatem widzimy, bardzo wa\u017cne jest zrozumienie dzia\u0142ania Event Loop<\/strong> i korzystanie z niego we w\u0142a\u015bciwy spos\u00f3b, aby unikn\u0105\u0107 problem\u00f3w z wydajno\u015bci\u0105. Przy projektowaniu aplikacji JavaScript nale\u017cy rozwa\u017cy\u0107 wykorzystanie funkcji asynchronicznych, obietnic (promises<\/em>) i async\/await<\/em>, kt\u00f3re pozwalaj\u0105 na bardziej czytelne i wydajne zarz\u0105dzanie asynchronicznym kodem.<\/p>\n\n\n\nImplementacja mechanizmu Event Loop w silniku V8<\/strong><\/h2>\n\n\n\nJak ju\u017c wspomnia\u0142em, ka\u017cdy silnik przegl\u0105darki implementuje Event Loop w nieco innych spos\u00f3b, co mo\u017ce prowadzi\u0107 do pewnych r\u00f3\u017cnic w dzia\u0142aniu. Zapoznajmy si\u0119 z jego implementacj\u0105 w silniku V8 (Chrome, Node.js):<\/p>\n\n\n\n<\/a>Ryc. 2 Implementacja Event Loop w silniku V8<\/figcaption><\/figure>\n\n\n\nMo\u017cemy zauwa\u017cy\u0107, \u017ce schemat implementacyjny jest bardzo podobny do og\u00f3lnego schematu implementacji Event Loop, z tym, \u017ce w Callback Queue rozpada si\u0119 na trzy podkolejki definiuj\u0105ce swoje w\u0142asne odpowiedzialno\u015bci. Kolejno s\u0105 to:<\/p>\n\n\n\n
\n- Microtask Queue<\/strong> \u2013 realizuje operacje odpowiedzialne za Promises, <\/em>zatem m\u00f3wimy tutaj o wszelkich metodach resolve<\/em> \/ reject<\/em>. Z tej kolejki korzysta tak\u017ce setImmediate<\/em> w Node.js (gdy chcemy wykona\u0107 fragment kodu asynchronicznie, ale tak szybko, jak to jest mo\u017cliwe) oraz MutationObserver <\/em>(stosowany w celu obserwacji zmian struktury HTML danych element\u00f3w).<\/li>\n\n\n\n
- Render Queue<\/strong> \u2013 odpowiada za zebranie wszystkich zada\u0144, kt\u00f3re musz\u0105 si\u0119 wykona\u0107 przed nast\u0119pnym renderowania si\u0119 strony. Do tej kolejki trafi chocia\u017cby wspomniana wcze\u015bniej funkcja requestAnimationFrame<\/em>.<\/li>\n\n\n\n
- Task Queue<\/strong> \u2013 ostatnia kolejka, jednocze\u015bnie zachowuj\u0105ca si\u0119 odrobin\u0119 odmiennie od poprzednich dw\u00f3ch. Odpowiedzialna jest za zebranie wszystkich callback\u00f3w do WebAPI (np. setTimeout<\/em>). Odmienno\u015b\u0107 zachowania tej kolejki polega na tym, i\u017c proceduje tylko jeden element, po kt\u00f3rym nast\u0119puje wywo\u0142anie Event Loop i przenosi nas na Call Stack. Zatem, nawet je\u017celi jakie\u015b zadania pozosta\u0142y w Task Queue, mo\u017ce ona wykona\u0107 tylko jedn\u0105 operacj\u0119 \u2018per loop\u2019. Poprzednie dwie kolejki wykonuj\u0105 swoje zadania w p\u0119tli, a\u017c do opr\u00f3\u017cnienia swojej kolejki.<\/li>\n<\/ul>\n\n\n\n
\n \n \n <\/picture>\n \n \n Digital<\/h2>\n <\/div>\n
\n Zwi\u0119ksz zysk i poszerzaj grono zadowolonych klient\u00f3w dzi\u0119ki naszym us\u0142ugom in\u017cynierii oprogramowania, e-commerce, mobile i digital customer experience.\n <\/p>\n \n Oferta Digital<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nCiesz\u0119 si\u0119, \u017ce doczytali\u015bcie artyku\u0142 do ko\u0144ca! Jak widzicie, Event Loop jest niebywale istotnym elementem ka\u017cdego przegl\u0105darkowego silnika. <\/p>\n\n\n\n
Jest on zaprojektowany w taki spos\u00f3b, aby maksymalnie wykorzystywa\u0107 zasoby dost\u0119pne w \u015brodowisku. Dzi\u0119ki temu, aplikacje mog\u0105 dzia\u0142a\u0107 wydajnie i skutecznie zarz\u0105dza\u0107 zasobami. Znajomo\u015b\u0107 jego specyfiki pozwala wszystkim programistom tworz\u0105cym w \u015brodowisku JavaScript pisa\u0107 bardziej wydajne, responsywne i skalowalne aplikacje asynchroniczne.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuje Ci\u0119 tematyka stosu i RAM-u, polecamy artyku\u0142 naszego eksperta<\/a>.<\/p>\n\n\n
Web APIs<\/strong><\/h3>\n\n\n\nDzi\u0119ki tym dobrodziejstwom zapewnianym przez przegl\u0105dark\u0119 otrzymujemy pot\u0119\u017cne mo\u017cliwo\u015bci. Mowa tutaj o DOM<\/em> i jego zdarzeniach, o AJAX, XMLHttpRequest, Fetch API<\/em>, o timerach (setTimeout, setInterval<\/em>) czy requestAnimationFrame<\/em>, s\u0142u\u017c\u0105cym chocia\u017cby do przeliczenia pozycji animowanego obiektu.<\/p>\n\n\n\nPrzegl\u0105darka przejmuje piecz\u0119 nad oczekiwaniem na zako\u0144czenie tych asynchronicznych operacji i dopiero wtedy wypycha je do Call Stacka, a w mi\u0119dzyczasie mog\u0105 wykonywa\u0107 si\u0119 inne fragmenty kodu, zapewniaj\u0105c p\u0142ynno\u015b\u0107 ca\u0142o\u015bci.<\/p>\n\n\n\n
Dzia\u0142anie Event Loop<\/strong><\/h2>\n\n\n\nG\u0142\u00f3wnym zadaniem Event Loop jest monitorowanie stosu wywo\u0142a\u0144 i kolejki zdarze\u0144. Je\u015bli stos wywo\u0142a\u0144 jest pusty, a kolejka zdarze\u0144 zawiera jakie\u015b zdarzenia, Event Loop przenosi zdarzenie z kolejki na stos i wykonuje je. To oznacza, \u017ce JavaScript mo\u017ce obs\u0142ugiwa\u0107 wiele zdarze\u0144 asynchronicznie<\/strong>, bez blokowania wykonywania innych zada\u0144.<\/p>\n\n\n\nJego prac\u0119 mo\u017cna podsumowa\u0107 w 3 krokach:<\/p>\n\n\n\n
\n- Pobranie zdarzenia \u2013 Event Loop oczekuje na wyst\u0105pienie zdarzenia takiego jak klikni\u0119cie myszy, przes\u0142anie \u017c\u0105dania sieciowego czy zako\u0144czenie operacji asynchronicznej.<\/li>\n\n\n\n
- Wywo\u0142anie odpowiednich funkcji \u2013 po wyst\u0105pieniu zdarzenia Event Loop wywo\u0142uje odpowiednie funkcje zwrotne (callback<\/em>) lub operacje asynchroniczne powi\u0105zane z tym zdarzeniem. Na przyk\u0142ad, je\u015bli u\u017cytkownik kliknie przycisk na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra obs\u0142uguje ten event.<\/li>\n\n\n\n
- Powr\u00f3t do oczekiwania \u2013 po wykonaniu funkcji zwrotnej, Event Loop powraca do oczekiwania na kolejne zdarzenie. Proces ten kontynuuje si\u0119 w niesko\u0144czono\u015b\u0107, zapewniaj\u0105c ci\u0105g\u0142\u0105 obs\u0142ug\u0119 zdarze\u0144 i asynchroniczno\u015b\u0107.<\/li>\n<\/ol>\n\n\n\n
Event Loop w JavaScript opiera si\u0119 na jednym w\u0105tku wykonawczym, co oznacza, \u017ce wszystkie operacje s\u0105 wykonywane jednow\u0105tkowo. Z tego powodu wa\u017cne jest, aby unika\u0107 blokowania operacji<\/strong>, kt\u00f3re mog\u0105 spowodowa\u0107 zatrzymanie Event Loop i tym samym wp\u0142ywa\u0107 na responsywno\u015b\u0107 aplikacji.<\/p>\n\n\n\nKiedy zdarzenie jest przetwarzane przez Event Loop, mo\u017ce mie\u0107 r\u00f3\u017cne skutki, przyk\u0142adowo:<\/p>\n\n\n\n
\n- je\u015bli zdarzenie jest klikni\u0119ciem przycisku na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 obs\u0142uguj\u0105c\u0105 to zdarzenie, tak, aby reagowa\u0107 na klikni\u0119cie u\u017cytkownika,<\/li>\n\n\n\n
- je\u015bli zdarzenie jest \u017c\u0105daniem sieciowym, Event Loop mo\u017ce przetworzy\u0107 odpowied\u017a serwera i wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra b\u0119dzie obs\u0142ugiwa\u0107 t\u0119 odpowied\u017a.<\/li>\n<\/ul>\n\n\n\n
Praktyczna strona dzia\u0142ania Event Loop<\/strong><\/h3>\n\n\n\nPrzyk\u0142ad dzia\u0142ania w praktyce mo\u017cecie zobaczy\u0107 poni\u017cej:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNa pierwszy rzut oka wszystkie logi wylistuj\u0105 si\u0119 w kolejno\u015bci od pierwszego do trzeciego, wszak ustawili\u015bmy timeout na 0. Jednak\u017ce, zgodnie z tym, co wcze\u015bniej napisa\u0142em, timer zosta\u0142 oddelegowany do Web APIs, kt\u00f3re po up\u0142ywie \u20180\u2019, czyli de facto od razu, umie\u015bci\u0142o go na Callback Queue (kolejce zdarze\u0144). Aczkolwiek, aby ponownie z niej trafi\u0107 na Call Stack, ten Stack musi zosta\u0107 wyczyszczony z bie\u017c\u0105cych zada\u0144.<\/p>\n\n\n\n
Jak zatem widzimy, bardzo wa\u017cne jest zrozumienie dzia\u0142ania Event Loop<\/strong> i korzystanie z niego we w\u0142a\u015bciwy spos\u00f3b, aby unikn\u0105\u0107 problem\u00f3w z wydajno\u015bci\u0105. Przy projektowaniu aplikacji JavaScript nale\u017cy rozwa\u017cy\u0107 wykorzystanie funkcji asynchronicznych, obietnic (promises<\/em>) i async\/await<\/em>, kt\u00f3re pozwalaj\u0105 na bardziej czytelne i wydajne zarz\u0105dzanie asynchronicznym kodem.<\/p>\n\n\n\nImplementacja mechanizmu Event Loop w silniku V8<\/strong><\/h2>\n\n\n\nJak ju\u017c wspomnia\u0142em, ka\u017cdy silnik przegl\u0105darki implementuje Event Loop w nieco innych spos\u00f3b, co mo\u017ce prowadzi\u0107 do pewnych r\u00f3\u017cnic w dzia\u0142aniu. Zapoznajmy si\u0119 z jego implementacj\u0105 w silniku V8 (Chrome, Node.js):<\/p>\n\n\n\n<\/a>Ryc. 2 Implementacja Event Loop w silniku V8<\/figcaption><\/figure>\n\n\n\nMo\u017cemy zauwa\u017cy\u0107, \u017ce schemat implementacyjny jest bardzo podobny do og\u00f3lnego schematu implementacji Event Loop, z tym, \u017ce w Callback Queue rozpada si\u0119 na trzy podkolejki definiuj\u0105ce swoje w\u0142asne odpowiedzialno\u015bci. Kolejno s\u0105 to:<\/p>\n\n\n\n
\n- Microtask Queue<\/strong> \u2013 realizuje operacje odpowiedzialne za Promises, <\/em>zatem m\u00f3wimy tutaj o wszelkich metodach resolve<\/em> \/ reject<\/em>. Z tej kolejki korzysta tak\u017ce setImmediate<\/em> w Node.js (gdy chcemy wykona\u0107 fragment kodu asynchronicznie, ale tak szybko, jak to jest mo\u017cliwe) oraz MutationObserver <\/em>(stosowany w celu obserwacji zmian struktury HTML danych element\u00f3w).<\/li>\n\n\n\n
- Render Queue<\/strong> \u2013 odpowiada za zebranie wszystkich zada\u0144, kt\u00f3re musz\u0105 si\u0119 wykona\u0107 przed nast\u0119pnym renderowania si\u0119 strony. Do tej kolejki trafi chocia\u017cby wspomniana wcze\u015bniej funkcja requestAnimationFrame<\/em>.<\/li>\n\n\n\n
- Task Queue<\/strong> \u2013 ostatnia kolejka, jednocze\u015bnie zachowuj\u0105ca si\u0119 odrobin\u0119 odmiennie od poprzednich dw\u00f3ch. Odpowiedzialna jest za zebranie wszystkich callback\u00f3w do WebAPI (np. setTimeout<\/em>). Odmienno\u015b\u0107 zachowania tej kolejki polega na tym, i\u017c proceduje tylko jeden element, po kt\u00f3rym nast\u0119puje wywo\u0142anie Event Loop i przenosi nas na Call Stack. Zatem, nawet je\u017celi jakie\u015b zadania pozosta\u0142y w Task Queue, mo\u017ce ona wykona\u0107 tylko jedn\u0105 operacj\u0119 \u2018per loop\u2019. Poprzednie dwie kolejki wykonuj\u0105 swoje zadania w p\u0119tli, a\u017c do opr\u00f3\u017cnienia swojej kolejki.<\/li>\n<\/ul>\n\n\n\n
\n \n \n <\/picture>\n \n \n Digital<\/h2>\n <\/div>\n
\n Zwi\u0119ksz zysk i poszerzaj grono zadowolonych klient\u00f3w dzi\u0119ki naszym us\u0142ugom in\u017cynierii oprogramowania, e-commerce, mobile i digital customer experience.\n <\/p>\n \n Oferta Digital<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nCiesz\u0119 si\u0119, \u017ce doczytali\u015bcie artyku\u0142 do ko\u0144ca! Jak widzicie, Event Loop jest niebywale istotnym elementem ka\u017cdego przegl\u0105darkowego silnika. <\/p>\n\n\n\n
Jest on zaprojektowany w taki spos\u00f3b, aby maksymalnie wykorzystywa\u0107 zasoby dost\u0119pne w \u015brodowisku. Dzi\u0119ki temu, aplikacje mog\u0105 dzia\u0142a\u0107 wydajnie i skutecznie zarz\u0105dza\u0107 zasobami. Znajomo\u015b\u0107 jego specyfiki pozwala wszystkim programistom tworz\u0105cym w \u015brodowisku JavaScript pisa\u0107 bardziej wydajne, responsywne i skalowalne aplikacje asynchroniczne.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuje Ci\u0119 tematyka stosu i RAM-u, polecamy artyku\u0142 naszego eksperta<\/a>.<\/p>\n\n\n
Przegl\u0105darka przejmuje piecz\u0119 nad oczekiwaniem na zako\u0144czenie tych asynchronicznych operacji i dopiero wtedy wypycha je do Call Stacka, a w mi\u0119dzyczasie mog\u0105 wykonywa\u0107 si\u0119 inne fragmenty kodu, zapewniaj\u0105c p\u0142ynno\u015b\u0107 ca\u0142o\u015bci.<\/p>\n\n\n\n
Dzia\u0142anie Event Loop<\/strong><\/h2>\n\n\n\nG\u0142\u00f3wnym zadaniem Event Loop jest monitorowanie stosu wywo\u0142a\u0144 i kolejki zdarze\u0144. Je\u015bli stos wywo\u0142a\u0144 jest pusty, a kolejka zdarze\u0144 zawiera jakie\u015b zdarzenia, Event Loop przenosi zdarzenie z kolejki na stos i wykonuje je. To oznacza, \u017ce JavaScript mo\u017ce obs\u0142ugiwa\u0107 wiele zdarze\u0144 asynchronicznie<\/strong>, bez blokowania wykonywania innych zada\u0144.<\/p>\n\n\n\nJego prac\u0119 mo\u017cna podsumowa\u0107 w 3 krokach:<\/p>\n\n\n\n
\n- Pobranie zdarzenia \u2013 Event Loop oczekuje na wyst\u0105pienie zdarzenia takiego jak klikni\u0119cie myszy, przes\u0142anie \u017c\u0105dania sieciowego czy zako\u0144czenie operacji asynchronicznej.<\/li>\n\n\n\n
- Wywo\u0142anie odpowiednich funkcji \u2013 po wyst\u0105pieniu zdarzenia Event Loop wywo\u0142uje odpowiednie funkcje zwrotne (callback<\/em>) lub operacje asynchroniczne powi\u0105zane z tym zdarzeniem. Na przyk\u0142ad, je\u015bli u\u017cytkownik kliknie przycisk na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra obs\u0142uguje ten event.<\/li>\n\n\n\n
- Powr\u00f3t do oczekiwania \u2013 po wykonaniu funkcji zwrotnej, Event Loop powraca do oczekiwania na kolejne zdarzenie. Proces ten kontynuuje si\u0119 w niesko\u0144czono\u015b\u0107, zapewniaj\u0105c ci\u0105g\u0142\u0105 obs\u0142ug\u0119 zdarze\u0144 i asynchroniczno\u015b\u0107.<\/li>\n<\/ol>\n\n\n\n
Event Loop w JavaScript opiera si\u0119 na jednym w\u0105tku wykonawczym, co oznacza, \u017ce wszystkie operacje s\u0105 wykonywane jednow\u0105tkowo. Z tego powodu wa\u017cne jest, aby unika\u0107 blokowania operacji<\/strong>, kt\u00f3re mog\u0105 spowodowa\u0107 zatrzymanie Event Loop i tym samym wp\u0142ywa\u0107 na responsywno\u015b\u0107 aplikacji.<\/p>\n\n\n\nKiedy zdarzenie jest przetwarzane przez Event Loop, mo\u017ce mie\u0107 r\u00f3\u017cne skutki, przyk\u0142adowo:<\/p>\n\n\n\n
\n- je\u015bli zdarzenie jest klikni\u0119ciem przycisku na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 obs\u0142uguj\u0105c\u0105 to zdarzenie, tak, aby reagowa\u0107 na klikni\u0119cie u\u017cytkownika,<\/li>\n\n\n\n
- je\u015bli zdarzenie jest \u017c\u0105daniem sieciowym, Event Loop mo\u017ce przetworzy\u0107 odpowied\u017a serwera i wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra b\u0119dzie obs\u0142ugiwa\u0107 t\u0119 odpowied\u017a.<\/li>\n<\/ul>\n\n\n\n
Praktyczna strona dzia\u0142ania Event Loop<\/strong><\/h3>\n\n\n\nPrzyk\u0142ad dzia\u0142ania w praktyce mo\u017cecie zobaczy\u0107 poni\u017cej:<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nNa pierwszy rzut oka wszystkie logi wylistuj\u0105 si\u0119 w kolejno\u015bci od pierwszego do trzeciego, wszak ustawili\u015bmy timeout na 0. Jednak\u017ce, zgodnie z tym, co wcze\u015bniej napisa\u0142em, timer zosta\u0142 oddelegowany do Web APIs, kt\u00f3re po up\u0142ywie \u20180\u2019, czyli de facto od razu, umie\u015bci\u0142o go na Callback Queue (kolejce zdarze\u0144). Aczkolwiek, aby ponownie z niej trafi\u0107 na Call Stack, ten Stack musi zosta\u0107 wyczyszczony z bie\u017c\u0105cych zada\u0144.<\/p>\n\n\n\n
Jak zatem widzimy, bardzo wa\u017cne jest zrozumienie dzia\u0142ania Event Loop<\/strong> i korzystanie z niego we w\u0142a\u015bciwy spos\u00f3b, aby unikn\u0105\u0107 problem\u00f3w z wydajno\u015bci\u0105. Przy projektowaniu aplikacji JavaScript nale\u017cy rozwa\u017cy\u0107 wykorzystanie funkcji asynchronicznych, obietnic (promises<\/em>) i async\/await<\/em>, kt\u00f3re pozwalaj\u0105 na bardziej czytelne i wydajne zarz\u0105dzanie asynchronicznym kodem.<\/p>\n\n\n\nImplementacja mechanizmu Event Loop w silniku V8<\/strong><\/h2>\n\n\n\nJak ju\u017c wspomnia\u0142em, ka\u017cdy silnik przegl\u0105darki implementuje Event Loop w nieco innych spos\u00f3b, co mo\u017ce prowadzi\u0107 do pewnych r\u00f3\u017cnic w dzia\u0142aniu. Zapoznajmy si\u0119 z jego implementacj\u0105 w silniku V8 (Chrome, Node.js):<\/p>\n\n\n\n<\/a>Ryc. 2 Implementacja Event Loop w silniku V8<\/figcaption><\/figure>\n\n\n\nMo\u017cemy zauwa\u017cy\u0107, \u017ce schemat implementacyjny jest bardzo podobny do og\u00f3lnego schematu implementacji Event Loop, z tym, \u017ce w Callback Queue rozpada si\u0119 na trzy podkolejki definiuj\u0105ce swoje w\u0142asne odpowiedzialno\u015bci. Kolejno s\u0105 to:<\/p>\n\n\n\n
\n- Microtask Queue<\/strong> \u2013 realizuje operacje odpowiedzialne za Promises, <\/em>zatem m\u00f3wimy tutaj o wszelkich metodach resolve<\/em> \/ reject<\/em>. Z tej kolejki korzysta tak\u017ce setImmediate<\/em> w Node.js (gdy chcemy wykona\u0107 fragment kodu asynchronicznie, ale tak szybko, jak to jest mo\u017cliwe) oraz MutationObserver <\/em>(stosowany w celu obserwacji zmian struktury HTML danych element\u00f3w).<\/li>\n\n\n\n
- Render Queue<\/strong> \u2013 odpowiada za zebranie wszystkich zada\u0144, kt\u00f3re musz\u0105 si\u0119 wykona\u0107 przed nast\u0119pnym renderowania si\u0119 strony. Do tej kolejki trafi chocia\u017cby wspomniana wcze\u015bniej funkcja requestAnimationFrame<\/em>.<\/li>\n\n\n\n
- Task Queue<\/strong> \u2013 ostatnia kolejka, jednocze\u015bnie zachowuj\u0105ca si\u0119 odrobin\u0119 odmiennie od poprzednich dw\u00f3ch. Odpowiedzialna jest za zebranie wszystkich callback\u00f3w do WebAPI (np. setTimeout<\/em>). Odmienno\u015b\u0107 zachowania tej kolejki polega na tym, i\u017c proceduje tylko jeden element, po kt\u00f3rym nast\u0119puje wywo\u0142anie Event Loop i przenosi nas na Call Stack. Zatem, nawet je\u017celi jakie\u015b zadania pozosta\u0142y w Task Queue, mo\u017ce ona wykona\u0107 tylko jedn\u0105 operacj\u0119 \u2018per loop\u2019. Poprzednie dwie kolejki wykonuj\u0105 swoje zadania w p\u0119tli, a\u017c do opr\u00f3\u017cnienia swojej kolejki.<\/li>\n<\/ul>\n\n\n\n
\n \n \n <\/picture>\n \n \n Digital<\/h2>\n <\/div>\n
\n Zwi\u0119ksz zysk i poszerzaj grono zadowolonych klient\u00f3w dzi\u0119ki naszym us\u0142ugom in\u017cynierii oprogramowania, e-commerce, mobile i digital customer experience.\n <\/p>\n \n Oferta Digital<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\nCiesz\u0119 si\u0119, \u017ce doczytali\u015bcie artyku\u0142 do ko\u0144ca! Jak widzicie, Event Loop jest niebywale istotnym elementem ka\u017cdego przegl\u0105darkowego silnika. <\/p>\n\n\n\n
Jest on zaprojektowany w taki spos\u00f3b, aby maksymalnie wykorzystywa\u0107 zasoby dost\u0119pne w \u015brodowisku. Dzi\u0119ki temu, aplikacje mog\u0105 dzia\u0142a\u0107 wydajnie i skutecznie zarz\u0105dza\u0107 zasobami. Znajomo\u015b\u0107 jego specyfiki pozwala wszystkim programistom tworz\u0105cym w \u015brodowisku JavaScript pisa\u0107 bardziej wydajne, responsywne i skalowalne aplikacje asynchroniczne.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuje Ci\u0119 tematyka stosu i RAM-u, polecamy artyku\u0142 naszego eksperta<\/a>.<\/p>\n\n\n
Jego prac\u0119 mo\u017cna podsumowa\u0107 w 3 krokach:<\/p>\n\n\n\n
- \n
- Pobranie zdarzenia \u2013 Event Loop oczekuje na wyst\u0105pienie zdarzenia takiego jak klikni\u0119cie myszy, przes\u0142anie \u017c\u0105dania sieciowego czy zako\u0144czenie operacji asynchronicznej.<\/li>\n\n\n\n
- Wywo\u0142anie odpowiednich funkcji \u2013 po wyst\u0105pieniu zdarzenia Event Loop wywo\u0142uje odpowiednie funkcje zwrotne (callback<\/em>) lub operacje asynchroniczne powi\u0105zane z tym zdarzeniem. Na przyk\u0142ad, je\u015bli u\u017cytkownik kliknie przycisk na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra obs\u0142uguje ten event.<\/li>\n\n\n\n
- Powr\u00f3t do oczekiwania \u2013 po wykonaniu funkcji zwrotnej, Event Loop powraca do oczekiwania na kolejne zdarzenie. Proces ten kontynuuje si\u0119 w niesko\u0144czono\u015b\u0107, zapewniaj\u0105c ci\u0105g\u0142\u0105 obs\u0142ug\u0119 zdarze\u0144 i asynchroniczno\u015b\u0107.<\/li>\n<\/ol>\n\n\n\n
Event Loop w JavaScript opiera si\u0119 na jednym w\u0105tku wykonawczym, co oznacza, \u017ce wszystkie operacje s\u0105 wykonywane jednow\u0105tkowo. Z tego powodu wa\u017cne jest, aby unika\u0107 blokowania operacji<\/strong>, kt\u00f3re mog\u0105 spowodowa\u0107 zatrzymanie Event Loop i tym samym wp\u0142ywa\u0107 na responsywno\u015b\u0107 aplikacji.<\/p>\n\n\n\n
Kiedy zdarzenie jest przetwarzane przez Event Loop, mo\u017ce mie\u0107 r\u00f3\u017cne skutki, przyk\u0142adowo:<\/p>\n\n\n\n
- \n
- je\u015bli zdarzenie jest klikni\u0119ciem przycisku na stronie internetowej, Event Loop mo\u017ce wywo\u0142a\u0107 funkcj\u0119 obs\u0142uguj\u0105c\u0105 to zdarzenie, tak, aby reagowa\u0107 na klikni\u0119cie u\u017cytkownika,<\/li>\n\n\n\n
- je\u015bli zdarzenie jest \u017c\u0105daniem sieciowym, Event Loop mo\u017ce przetworzy\u0107 odpowied\u017a serwera i wywo\u0142a\u0107 funkcj\u0119 zwrotn\u0105, kt\u00f3ra b\u0119dzie obs\u0142ugiwa\u0107 t\u0119 odpowied\u017a.<\/li>\n<\/ul>\n\n\n\n
Praktyczna strona dzia\u0142ania Event Loop<\/strong><\/h3>\n\n\n\n
Przyk\u0142ad dzia\u0142ania w praktyce mo\u017cecie zobaczy\u0107 poni\u017cej:<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n
<\/a><\/figure>\n\n\n\nNa pierwszy rzut oka wszystkie logi wylistuj\u0105 si\u0119 w kolejno\u015bci od pierwszego do trzeciego, wszak ustawili\u015bmy timeout na 0. Jednak\u017ce, zgodnie z tym, co wcze\u015bniej napisa\u0142em, timer zosta\u0142 oddelegowany do Web APIs, kt\u00f3re po up\u0142ywie \u20180\u2019, czyli de facto od razu, umie\u015bci\u0142o go na Callback Queue (kolejce zdarze\u0144). Aczkolwiek, aby ponownie z niej trafi\u0107 na Call Stack, ten Stack musi zosta\u0107 wyczyszczony z bie\u017c\u0105cych zada\u0144.<\/p>\n\n\n\n
Jak zatem widzimy, bardzo wa\u017cne jest zrozumienie dzia\u0142ania Event Loop<\/strong> i korzystanie z niego we w\u0142a\u015bciwy spos\u00f3b, aby unikn\u0105\u0107 problem\u00f3w z wydajno\u015bci\u0105. Przy projektowaniu aplikacji JavaScript nale\u017cy rozwa\u017cy\u0107 wykorzystanie funkcji asynchronicznych, obietnic (promises<\/em>) i async\/await<\/em>, kt\u00f3re pozwalaj\u0105 na bardziej czytelne i wydajne zarz\u0105dzanie asynchronicznym kodem.<\/p>\n\n\n\n
Implementacja mechanizmu Event Loop w silniku V8<\/strong><\/h2>\n\n\n\n
Jak ju\u017c wspomnia\u0142em, ka\u017cdy silnik przegl\u0105darki implementuje Event Loop w nieco innych spos\u00f3b, co mo\u017ce prowadzi\u0107 do pewnych r\u00f3\u017cnic w dzia\u0142aniu. Zapoznajmy si\u0119 z jego implementacj\u0105 w silniku V8 (Chrome, Node.js):<\/p>\n\n\n\n
<\/a>Ryc. 2 Implementacja Event Loop w silniku V8<\/figcaption><\/figure>\n\n\n\n Mo\u017cemy zauwa\u017cy\u0107, \u017ce schemat implementacyjny jest bardzo podobny do og\u00f3lnego schematu implementacji Event Loop, z tym, \u017ce w Callback Queue rozpada si\u0119 na trzy podkolejki definiuj\u0105ce swoje w\u0142asne odpowiedzialno\u015bci. Kolejno s\u0105 to:<\/p>\n\n\n\n
- \n
- Microtask Queue<\/strong> \u2013 realizuje operacje odpowiedzialne za Promises, <\/em>zatem m\u00f3wimy tutaj o wszelkich metodach resolve<\/em> \/ reject<\/em>. Z tej kolejki korzysta tak\u017ce setImmediate<\/em> w Node.js (gdy chcemy wykona\u0107 fragment kodu asynchronicznie, ale tak szybko, jak to jest mo\u017cliwe) oraz MutationObserver <\/em>(stosowany w celu obserwacji zmian struktury HTML danych element\u00f3w).<\/li>\n\n\n\n
- Render Queue<\/strong> \u2013 odpowiada za zebranie wszystkich zada\u0144, kt\u00f3re musz\u0105 si\u0119 wykona\u0107 przed nast\u0119pnym renderowania si\u0119 strony. Do tej kolejki trafi chocia\u017cby wspomniana wcze\u015bniej funkcja requestAnimationFrame<\/em>.<\/li>\n\n\n\n
- Task Queue<\/strong> \u2013 ostatnia kolejka, jednocze\u015bnie zachowuj\u0105ca si\u0119 odrobin\u0119 odmiennie od poprzednich dw\u00f3ch. Odpowiedzialna jest za zebranie wszystkich callback\u00f3w do WebAPI (np. setTimeout<\/em>). Odmienno\u015b\u0107 zachowania tej kolejki polega na tym, i\u017c proceduje tylko jeden element, po kt\u00f3rym nast\u0119puje wywo\u0142anie Event Loop i przenosi nas na Call Stack. Zatem, nawet je\u017celi jakie\u015b zadania pozosta\u0142y w Task Queue, mo\u017ce ona wykona\u0107 tylko jedn\u0105 operacj\u0119 \u2018per loop\u2019. Poprzednie dwie kolejki wykonuj\u0105 swoje zadania w p\u0119tli, a\u017c do opr\u00f3\u017cnienia swojej kolejki.<\/li>\n<\/ul>\n\n\n
\n\n \n \n <\/picture>\n \n\nDigital<\/h2>\n <\/div>\n
\n Zwi\u0119ksz zysk i poszerzaj grono zadowolonych klient\u00f3w dzi\u0119ki naszym us\u0142ugom in\u017cynierii oprogramowania, e-commerce, mobile i digital customer experience.\n <\/p>\n \n Oferta Digital<\/span>\n <\/a>\n <\/div>\n<\/div>\n\n\n\n
Podsumowanie<\/strong><\/h2>\n\n\n\n
Ciesz\u0119 si\u0119, \u017ce doczytali\u015bcie artyku\u0142 do ko\u0144ca! Jak widzicie, Event Loop jest niebywale istotnym elementem ka\u017cdego przegl\u0105darkowego silnika. <\/p>\n\n\n\n
Jest on zaprojektowany w taki spos\u00f3b, aby maksymalnie wykorzystywa\u0107 zasoby dost\u0119pne w \u015brodowisku. Dzi\u0119ki temu, aplikacje mog\u0105 dzia\u0142a\u0107 wydajnie i skutecznie zarz\u0105dza\u0107 zasobami. Znajomo\u015b\u0107 jego specyfiki pozwala wszystkim programistom tworz\u0105cym w \u015brodowisku JavaScript pisa\u0107 bardziej wydajne, responsywne i skalowalne aplikacje asynchroniczne.<\/p>\n\n\n\n
***<\/p>\n\n\n\n
Je\u015bli interesuje Ci\u0119 tematyka stosu i RAM-u, polecamy artyku\u0142 naszego eksperta<\/a>.<\/p>\n\n\n
- Render Queue<\/strong> \u2013 odpowiada za zebranie wszystkich zada\u0144, kt\u00f3re musz\u0105 si\u0119 wykona\u0107 przed nast\u0119pnym renderowania si\u0119 strony. Do tej kolejki trafi chocia\u017cby wspomniana wcze\u015bniej funkcja requestAnimationFrame<\/em>.<\/li>\n\n\n\n
- Microtask Queue<\/strong> \u2013 realizuje operacje odpowiedzialne za Promises, <\/em>zatem m\u00f3wimy tutaj o wszelkich metodach resolve<\/em> \/ reject<\/em>. Z tej kolejki korzysta tak\u017ce setImmediate<\/em> w Node.js (gdy chcemy wykona\u0107 fragment kodu asynchronicznie, ale tak szybko, jak to jest mo\u017cliwe) oraz MutationObserver <\/em>(stosowany w celu obserwacji zmian struktury HTML danych element\u00f3w).<\/li>\n\n\n\n
- Powr\u00f3t do oczekiwania \u2013 po wykonaniu funkcji zwrotnej, Event Loop powraca do oczekiwania na kolejne zdarzenie. Proces ten kontynuuje si\u0119 w niesko\u0144czono\u015b\u0107, zapewniaj\u0105c ci\u0105g\u0142\u0105 obs\u0142ug\u0119 zdarze\u0144 i asynchroniczno\u015b\u0107.<\/li>\n<\/ol>\n\n\n\n