“The Event Loop is a mechanism that allows JavaScript to perform non-blocking operations by managing the execution of multiple tasks (synchronous and asynchronous) on a single thread.” - MDN docs.
Event loop empowers JavaScript’s single-threaded structure to handle multiple operations concurrently on different threads without needing multi-threading.
Microtasks are callback functions associated with Promises and other asynchronous operations. They include methods like .then(), .catch(), and .finally () and operations triggered by MutationObserver.
Macrotasks are callback functions associated with browser APIs such as setTimeout(), setInterval(), or network requests. They also include DOM-related events like click, keydown, and similar user interactions.
This includes the entire JavaScript file, script that is executed line by line in the order it is written. It runs before any tasks in the Microtask or Macrotask Queues.
Rendering tasks include browser UI-related operations, such as reflows, repaints, and DOM updates. These tasks ensure that changes made by JavaScript are visually reflected on the screen.
The Call Stack is a container, implemented as a FILO (First In, Last Out) stack, used by the JavaScript engine to track function calls. Functions are added to the stack when they are called and removed when they return. It is where synchronous code is executed.
The Microtask Queue stores Microtasks like resolved Promise callbacks or MutationObserver tasks. Microtasks are executed immediately after the current stack is cleared and before moving to the Macrotask Queue.
The Macrotask Queue stores Macrotasks, which include callbacks for APIs like setTimeout(), setInterval(), and DOM events. Macrotasks are processed only after all Microtasks have been cleared.