Search
6 results for “javascript”
Search results
The JavaScript Event Loop
Why every queued microtask runs before the next macrotask, ever, and how that one ordering rule explains why a Promise callback always logs before a setTimeout(fn, 0), no matter how it looks in the source.
Given a setTimeout(fn, 0) and a Promise.resolve().then(fn) registered in that order, which one runs first, and why?
The Promise callback runs first, even though the timeout was registered with a 0ms delay and appears to ask for the soonest possible execution. `setTimeout` queues a macrotask (a "task" in spec terms), while a Promise callback queues a microtask, and the event loop's rule is that the entire microtask queue is drained completely before the next macrotask is even pulled, regardless of registration order or the timeout value. A 0ms delay doesn't mean "immediately", it means "as the next task once the microtask queue is empty and the current call stack has finished."
What does "run to completion" mean for a single task or microtask, and why does it matter for reasoning about shared state?
Once a job (a task or a microtask) starts running, it executes entirely before any other job gets a chance to run, JavaScript cannot pause a running function partway through to let another callback interleave, the way a preemptively-scheduled thread in a language like C could be interrupted mid-function. This is what makes synchronous JavaScript code within a single function safe from data races on shared state without needing locks, whatever a function does to shared variables happens atomically from the perspective of any other queued job, even though the language is single-threaded and asynchronous.
If a microtask itself queues another microtask while it's running, does that new microtask wait for the next event loop iteration, or does it still run before the next macrotask?
It still runs before the next macrotask. The rule isn't "run the microtasks that were queued when this iteration started", it's "drain the microtask queue completely," and if executing a microtask adds another one, that new one is still part of the queue being drained. This means a chain of microtasks that keep scheduling more microtasks can, in principle, starve the event loop from ever reaching the next macrotask (a real, documented way to accidentally block timers and rendering), which is different from a single flat batch of microtasks all queued up front.
What are the five stages of the browser rendering pipeline, and which ones does a change to a property like width actually have to go through?
The pipeline runs JavaScript, Style calculation, Layout, Paint, and Composite, in that order. Changing a property that affects geometry, `width`, `height`, `position`, forces the browser through every stage: layout has to be recalculated (since the element's size or position changed), then paint (since pixels changed), then composite. That full path is why layout-affecting properties are the most expensive to animate, every frame re-runs the whole pipeline, not just a cheap final step.
What is the "first rule of ARIA," and why does a native <button> beat a <div role="button"> even though both can be made accessible?"
The W3C's own first rule of ARIA use is direct: if a native HTML element or attribute already provides the semantics and behavior you need, use it instead of re-purposing a different element with ARIA. A native `<button>` comes with keyboard interaction (Enter/Space activates it, Tab reaches it), focus management, and correct semantics built into the browser for free. A `<div role="button">` requires manually replicating every one of those behaviors with JavaScript and additional ARIA attributes, tabindex, keydown handlers for both Enter and Space, and it is easy to miss an edge case a real button never had in the first place. ARIA can make a div accessible in theory; a native element already is, with less code and less risk.