Frame-time budgets

Play this lesson

One budget, many screens

Shard Garden runs on 60 Hz TVs and laptops and on 120 Hz phones. A co-op garden holds four players, dozens of pests and shards drifting past.

Quick reminder: the frame budget is the time to make one frame. At 60 frames per second it is about 16.7 ms, and at 120 it is about 8.3 ms. This lesson is about how professionals plan and measure that budget.

Milliseconds, not FPS

FPS averages hide problems. Picture one second with 57 smooth frames of 16.7 ms and one 50 ms hitch: about 58 FPS on the counter, yet every player saw the hitch.

So studios track frame time in milliseconds and look at the slowest frames, not the average. Milliseconds also add up honestly: going from 60 to 30 FPS costs 16.7 ms more per frame, but going from 120 to 60 costs only 8.3 ms.

Read the numbers

two builds, 1 minute each
Build A: average 60 FPS  slowest frame 18 ms Build B: average 60 FPS  3 frames of 70 ms

Which build feels smoother to play?

  1. Build A
  2. Build B
  3. They feel the same, both average 60 FPS
Show the answer

Build A

Build B has three visible freezes of 70 ms, more than four frames each. Build A's worst frame is barely over budget. Same average, very different feel.

Split the budget

Remy gives every system a share of 16.7 ms. A system over its share is a bug, even if the frame still fits.

requestAnimationFrame

The browser calls our requestAnimationFrame callback before each new frame, and that generally matches the screen's refresh rate: 60 Hz is most common, but 75, 120 and 144 Hz are widely used. It pauses in background tabs.

MDN's warning: use the time it passes us to work out how far things move. Otherwise the game runs faster on high refresh rate screens.

Bug hunt

loop.js
function frame(now) {  for (const p of pests) {    p.x += 2; // pixels  }  draw();  requestAnimationFrame(    frame);}

On Remy's 120 Hz phone, pests crawl twice as fast as on Kai's laptop. Which line is the bug?

  1. Line 1
  2. Line 3
  3. Line 6
Show the answer

Line 3

Line 3 moves 2 pixels per frame, so 120 frames a second means twice the speed. It should move speed times the seconds since the last frame, worked out from now.

A fixed timestep

Moving by elapsed time fixes speed, but physics breaks when the step size changes. Glenn Fiedler's 2004 article "Fix Your Timestep!" lists springs exploding and fast objects passing through walls.

His answer: an accumulator. Each frame, add the time that passed. While it holds at least one fixed step, say 1/60 of a second, run one physics step and subtract it. Then draw, blending between the last two steps with what is left over. The renderer makes time, and the physics uses it in equal pieces.

Quick check

The "spiral of death" is when the physics falls behind, runs extra steps to catch up, and so falls even further behind.

Show the answer

True

Each extra step takes time, which creates even more time to catch up. The fix is headroom, and a limit on steps per frame so the game slows down instead of freezing.

When a system breaks its budget

A budget tells us that a frame is too slow. To know why, we record what the CPU and GPU were doing.

Bolt says: Next: profiling, the tools that show exactly where every millisecond went.

Fact-checked 11 October 2026