Rendering and the Event Loop in JavaScript

Rendering and the Event Loop in JavaScript

The browser renders (paints) between macrotasks. Microtasks run before rendering. Understanding this helps you build smooth UIs.

The Event Loop With Rendering

1. Run synchronous code (and the current macrotask).
2. Drain all microtasks.
3. Render (if needed usually ~60fps, every 16.6ms).
4. Take the next macrotask.
5. Repeat from step 2.

What This Means

• Microtasks run before rendering: if a microtask changes the DOM, the browser paints the change in the same frame.
• Macrotasks run after rendering: a macrotask's DOM changes are painted in the next frame.
• Long microtasks delay rendering: if microtasks take 100ms, the paint is delayed by 100ms (frame drop).

Example: Microtask Before Paint

element.style.color = "red";
Promise.resolve().then(() => {
  element.style.color = "blue";
});
// the user sees "blue" (microtask runs before paint)
``
The microtask changes the color to blue before the browser paints. The user never sees red.

### Example: Macrotask After Paint

```js
element.style.color = "red";
setTimeout(() => {
  element.style.color = "blue";
}, 0);
// the user sees "red" then "blue" (macrotask runs after paint)
``
The macrotask runs after the browser paints red. The user sees red, then blue in the next frame.

### `requestAnimationFrame`

```js
function animate() {
  element.style.left = parseInt(element.style.left) + 1 + "px";
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
``
`requestAnimationFrame` schedules a callback **before the next paint**. It is the correct way to do visual animations. It syncs with the browser's refresh rate (usually 60fps).

### Long Tasks and Frame Drops

If a synchronous task (or a batch of microtasks) takes more than 16.6ms, the browser drops a frame. The animation looks janky.

**Fix**: Break long tasks into chunks with `setTimeout` or use `requestIdleCallback` for low-priority work.

### `requestIdleCallback`

```js
requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && hasWork()) {
    doWork();
  }
});
``
Runs work when the browser is idle (between frames). The `deadline` tells you how much time is left. Useful for non-critical work that should not cause frame drops.

### The Takeaway

The browser renders between macrotasks. Microtasks run before rendering (DOM changes in microtasks are painted in the same frame). Long microtasks or macrotasks cause frame drops. Use `requestAnimationFrame` for animations and `requestIdleCallback` for low-priority work. Keep tasks under 16.6ms for smooth 60fps.