Home▸Computer Science▸Frame Budget Optimization

Frame Budget & Jank Visualizer

At 60fps every frame has a 16.7ms budget. Watch simulated render cost, GC pauses and layout thrashing eat into that budget frame by frame, and see the resulting dropped frames turn into visible stutter in a scrolling UI strip.

Computer Science2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

Every frame on a 60fps display has 16.7ms to get everything done before the next vsync — render cost, garbage collection, layout, paint. This simulator generates a realistic per-frame workload (steady render cost plus occasional GC pauses, layout thrashing and slow main-thread tasks) and plots frame time against that budget over a scrolling timeline. A frame whose workload exceeds the budget is janky: the on-screen "perceived motion" strip below the chart advances by an amount proportional to that frame's real duration rather than a fixed step, so an overrun shows up as an actual visible jump instead of just a red bar in a chart. Switch target frame rate, dial up GC pressure, or fire a layout-thrash / slow-task spike to see exactly how frame-budget math turns into the stutter users notice.

⚙ Under the hood

Each frame has a fixed time budget. Exceeding this budget results in dropped frames, causing jankiness and poor performance.

performanceoptimizationgamingmobile

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install