Пытанне:

Як працуе Event Loop?

Адказ

У гэтым артыкуле гаворка пойдзе пра цыкл падзей (Event Loop) у браўзеры, бо ў node.js цыкл падзей мае шэраг асаблівасцяў і зараз іх разглядаць не будзем.

Javascript - аднапатокавая мова праграмавання. То бок адначасова можа выконвацца толькі адна задача. Увесь паток выканання кода заснаваны на цыкле падзей.

Разглядзім асноўныя кампаненты Event Loop:

1. Call Stack
2. Browser API
3. Queue Microtasks
4. Queue Macrotasks
5. Render

Як усё гэта працуе?

Бясконцы цыкл увесь час круціцца, выконвае задачы (tasks) ў парадку чаргі (FIFO), пачыная са самых старых, чакае новых і зноў іх выконвае. Калі якая-небудзь задача будзе выконвацца занадта доўга, браўзер прапаноўвае яе "забіць". Такое можа адбыцца ў выніку складаных вылічэнняў або памылкі, у выніку якой запусціўся бясконцы цыкл.

Call Stack - працуе па прынцыпу LIFO. Бярэцца першая функцыя з чаргі. Калі функцыя сінхронная, яна выконваецца адразу і выдаляецца з Call Stack. Калі функцыя асінхронная (timers, апрацоўшчыкі падзей), яна перамяшчаецца з Call Stack у Browser API. Калі функцыя выклікае функцыю, новая функыя дадаецца ў Call Stack паверх першай.

Browser API - спіс Browser API вялікі. Пры разглядзе працы Event Loop у першую чаргу нас цікавяць timers (setTimeout, setInterval), AJAX (fetch і XHR), падпіскі на падзеі. Як толькі падыходзе час для таймераў, вяртаюцца даныя з сервера, выклікваюцца карыстальніцкія падзеі і гэтак далей, cb падзей дадаюцца ў чаргу queues.

Queue Microtasks - пачынае выконвацца адразу пасля сканчэння выконвання сінхроннага кода скрыпта. Выконваюцца адразу ўсе micortasks, якія знаходзяцца ў чарге. Сюды адносяцца Promises (then, catch, finally, async / await), Mutation Observer, queueMicrotask (спецыяльная функцыя для дадання звычайнай функцыі ў чаргу мікратасак).

Queue Macrotasks - будуць выконвацца па адной за цыкл у парадку чаргі. Сюды адносяцца timers (setTimeout, setInterval), апрацоўшчыкі падзей.

Render - калі ён патрэбны, адбываецца пасля ўсіх мікратасак перад наступнай макратаскай.