JavaScript Event Loop Series: Building the Event Loop Mental Model from Experiments

I wrote this series because JavaScript has many "asynchronous" mechanisms ( await , setTimeout , Promise , requestAnimationFrame ) that look similar but behave very differently. At first, I assumed they were interchangeable but that assumption quickly broke when I started debugging: Why setTimeout(..., 0) doesn’t "run immediately" Why await pauses a function but doesn’t freeze the page Why DOM updates sometimes don’t show up when you expect Why some "async" code still blocks rendering These behaviours only make sense with the right mental model. This series builds that model by experimenting with small code snippets. The core idea is simple: JavaScript runs to completion inside a task, and nothing interrupts it. From there, we layer in: macrotasks (what a task actually is), microtasks (why Promises run first), async / await (pausing a function without pausing JavaScript), rendering (why the screen doesn’t update mid-turn), requestAnimationFrame (the missing pre-render scheduling layer)