Macrotasks

setTimeout and setInterval are the most common macrotask creators.

setTimeout

Schedules a function to run after a specified delay.

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 1000);

console.log('End');
// Output: Start, End, Timeout (after 1 second)

Important: The delay is a minimum, not a guarantee. The callback won't run until:

1. The specified time has elapsed
2. The call stack is empty
3. All microtasks have been processed

// Even with 0ms, it doesn't run immediately
setTimeout(() => console.log('timeout'), 0);
console.log('sync');
// Output: sync, timeout

setInterval

Repeats a function at specified intervals.

let count = 0;
const interval = setInterval(() => {
  console.log(`Count: ${count}`);
  count++;
  if (count > 5) {
    clearInterval(interval); // Stop after 5
  }
}, 1000);

Timing Issues

// setInterval doesn't wait for callback to finish
setInterval(() => {
  // If this takes 200ms, next fires at 1000ms (not 1200ms)
  console.log('tick');
}, 1000);

// Better: use setTimeout recursively
function repeat() {
  console.log('tick');
  setTimeout(repeat, 1000); // Waits for callback to finish
}
repeat();

JavaScript provides several ways to schedule tasks for later execution.

setTimeout(fn, 0)

Defers execution until the call stack is empty.

// Useful for breaking up long-running tasks
function processData(data) {
  // Process first batch synchronously
  processBatch(data.slice(0, 100));
  
  // Defer remaining batches
  setTimeout(() => {
    processBatch(data.slice(100, 200));
    setTimeout(() => {
      processBatch(data.slice(200));
    }, 0);
  }, 0);
}

requestAnimationFrame

Fires before the next browser paint.

function animate() {
  // Update animation
  element.style.left = `${x}px`;
  x++;
  
  if (x < 100) {
    requestAnimationFrame(animate); // ~60fps
  }
}
requestAnimationFrame(animate);

Comparison

Method	Queue	Priority	Use Case
setTimeout	Macrotask	Low	General deferral
setInterval	Macrotask	Low	Repeated execution
requestAnimationFrame	Macrotask	Before paint	Animations
queueMicrotask	Microtask	High	Immediate post-sync

Preventing Starvation

// Bad: can starve macrotasks
function heavyTask() {
  // Process items
  processItems();
  queueMicrotask(heavyTask); // Keeps adding microtasks
}

// Good: yield to macrotasks
function heavyTask() {
  processItems();
  setTimeout(heavyTask, 0); // Allows macrotasks to run
}

The browser rendering pipeline is interleaved with task processing.

Rendering Pipeline

1. JavaScript → Execute event handlers, style calculations
2. Style → Compute final styles
3. Layout → Calculate geometry
4. Paint → Draw pixels
5. Composite → Layers combined

When Rendering Happens

The browser typically renders at ~60fps (every ~16.7ms). Rendering happens between macrotask processing.

// Browser checks if render is pending
// If yes, render before next macrotask
function eventLoop() {
  while (queueIsNotEmpty) {
    // Process one macrotask
    task = dequeueMacrotask();
    executeTask(task);
    
    // Process all microtasks
    drainMicrotaskQueue();
    
    // Check if render is pending
    if (renderIsPending) {
      render();
    }
  }
}

requestAnimationFrame Timing

// rAF fires before render
requestAnimationFrame(() => {
  console.log('rAF'); // Before paint
});

setTimeout(() => {
  console.log('timeout'); // After paint
}, 0);

// Output: rAF, timeout

Layout Thrashing

// BAD: causes multiple reflows
for (let i = 0; i < 100; i++) {
  element.style.width = `${i}px`; // Triggers layout
  console.log(element.offsetWidth); // Forces layout read
}

// GOOD: batch reads and writes
const width = element.offsetWidth; // Read once
for (let i = 0; i < 100; i++) {
  element.style.width = `${width + i}px`; // Write
}