JavaScript Event Loop Explained: Microtasks, Macrotasks, async/await and Rendering

This guide explains how the JavaScript event loop lets a single-threaded language handle asynchronous work without blocking. It describes the call stack, the macrotask (task) queue, and the microtask queue, and how the loop processes them in order. Using short code examples, it shows that synchronous code runs first, then all microtasks such as Promise callbacks, then a single macrotask such as setTimeout. It also covers how async/await builds on Promises, why long-running or endlessly chained microtasks can freeze rendering, and why requestAnimationFrame suits animation. The article includes guidance on profiling long tasks in Firefox DevTools.