bi-10 step 01 — Itemise a frame

Goal

Replace "the frame was slow" with a stacked breakdown of where 16.7 ms went.

Tasks

  1. Build a page with a rAF animation and moderate DOM. Record a Perfetto trace with the blink, cc, viz, gpu, and toplevel categories.
  2. Itemise one frame: script, style, layout, pre-paint, paint, commit, raster, draw, present. Produce a stacked chart.
  3. Identify the compositor thread, the raster workers, and the GPU process by name in the trace.
  4. Follow one frame across processes using flow arrows: renderer main → compositor → GPU → presented. This is what makes the process diagram real.
  5. Recompute your budget against 8.3 ms (120 Hz). Which term breaks first?

Done when

  • Stacked per-stage chart for one frame
  • One frame followed end to end across three processes
  • The 120 Hz breaking term identified