JavaScript Event Loop & its functions
When delving into the dynamics of JavaScript execution, it’s important to familiarize yourself with several pivotal concepts that harmonize to create a fluid user experience.
Suppose I assume you know about javascript engine. In shortly said that javascript engine is a software component that executes javascript code. The first JavaScript engines were mere interpreters, but all relevant modern engines use just-in-time compilation for improved performance.
if you don’t know about js engine then you can read this article link: javascript engine. By the way js engine included two main parts one heap and another main thread which is name also call stack.
At first you should be familiar these words like heap, main thread, web api/c++ api, event loop, callback queue, render queue, microtask queue.
Heap : Memory allocation area which is unstructured memory block or store objects and functions.
Call stack ( Main thread ) : The call stack, often associated with the main thread, is a data structure that keeps track of the currently executing function or method calls in a program. JavaScript operates in a single-threaded environment, which means it processes tasks one after the other. Call stack tasks handled by LIFO ( Last In First Out ) manner.
Web api/ c++ api : These are not part of the JavaScript engine itself, but they are provided by the browser or runtime environment where JavaScript is executed. Application Programming Interface for either a web browser like google, Internet explorer, Mozila firefox, Safari etc. or web server. These APIs allow JavaScript to interact with the environment beyond its core execution.
Callback queue: When a function is used as a callback, it gets queued for future execution. After a Web API task finishes and control returns, the function is placed in the callback queue. This queue follows a FIFO (First-In-First-Out) method, ensuring that callbacks are processed in the order they were added.
Event loop: Event loop is one kind of coordinator between callback queue and callstack ( main thread ). Event loop bring executed task from callback queue and handover to the main thread for final execution.
Render queue: Basically render queue used for excuting loop process and behind the browser to continue render. If there multiple changes to the DOM in quick it can lead to multiple reflows and repaint.
Note: Reflow is the process of calculating the layout and positioning of the elements on web page. And Repaint involves rendering the visual representation of those elements.
Microtask queue ( job queue ) : It is one kind of specific type of queue in js runtime enviournment. This queue execute asynchronously but with higher priority than callback queue. It works FIFO ( First In First Out ) method.
Many of them confusion about callback and microtask queue, so I clear it right now: Basically callback queue is event queue and microtask queue is job queue. Callback queue that holds callbacks of asynchronous tasks that have completed their execution for example setTimeOut, network requests or user interaction events. By the way it’s not the part of javascript language. It’s browser or server api related mehod.
on the other hand microtask queue means job queue with higher priority than regular callback queue. It works current scripts has finished and before the next rendering steps. For example .then(), .catch() like promise related method and also mutation observer callbacks. Mind it that microtask queue is executed before executing callback queue.
Happy js learning : )
Follow me: Linkedin and facebook group
