Call Stack, Event Loop, and Task Queue

В этой статье мы попытаемся понять как работает JavaScript под капотом и, в частности, что же такое CallStack.

CallStack это структура данных, в которую попадают все вызовы функций которые мы вызываем. После выполнения они выбрасываются из стека.

Здесь мы можем видеть CallStack в действии. Сначала запускается программа, затем вызов функции bazinga записывается в стек, после этого bar вызывается внутри функции bazinga, она также записывается в стек. Аналогично функция foo вызывается внутри bar, и она также попадает в стек. Теперь, когда выполнение функции foo завершено, она выкидывается из стека первой, а затем bar и наконец bazinga. В самом конце main, то есть наша программа тоже выходит из стека. Так выполняется синхронный код в JavaScript.

Task Queue — это очередь из сообщений различных API предоставленных окружением будь то node.js или браузер. Эти сообщения нужны для того, чтобы навешать на них функции обратного вызова после того, как CallStack будет обработан.

Event Loop это цикл который следит за тем, чтобы все функции из CallStack были выполнены. А если это случилось, то может добавлять функции обратных вызовов из Task Queue.

В гифке сверху мы визуализировали то, как выполняются операции в JavaScript. Три бокса, и у каждого своя роль в асинхронных операциях. Левый — CallStack, который мы уже обсудили. Правый — Web API (например, setTimeOut, setInterval и события браузера). Нижний бокс— Task Queue. И синий кружочек — EventLoop.

В главном треде main запускает нашу программу, затем foo попадает в стек и тут же исчезает после выполнения. Теперь выполняется setTimeout, добавляя в очередь функцию обратного вызова, и тоже исчезает. Сразу после этого, bar попадает в стек без каких-либо блокировок и вылетает, как только его выполнение завершится. Теперь, движок дождется момента когда время указанное в setTimeout пройдет и обратный вызов функции будет помещен в очередь. А после того, как CallStack стал пустым EventLoop переложит туда задачу из Task Queue. Затем снова запускается основной поток, и обратный вызов выполняется и уходит из стека.