Event Loop in Browser (feat. Macro Task and Micro Task)

Original article link (dev.to)

Heap

Stores objects and variables which were declared from function

Call Stack

Call stack stacks functions as LIFO.

LIFO is last in first out.

Web API

Additional features which are provided by V8 engine.

The functions which uses web apis will be stored on this container, if web api is done, they will be popped (call stack functions)

Queues

It calculates async functions’ response.

Theses responses do not block engine.

Macro Task Queue

• They run async functions which have less priority than Job Queue
• Also, they run DOM events, Ajax calls, setTimeout and etc.

Micro Task Queue

• They run async functions which have more priority than message queue
• They run async functions which uses promises

Event loop checks call stack. If call stack is empty, event loop will stack the functions in queue to call stack and run them. The functions which were already provided have more priority and they will be run before message queue functions.