Execution — bi-10-compositor-gpu

Steps extracted from CONCEPTS.md. Read the concepts first; this file is the doing.

Record results in observation.md; tick checkpoints in verification.md.

6. Lab

Your mini-browser will not have a real compositor; the lab is measurement and reasoning.

  1. Budget accounting. Build a page with a rAF animation and measure, from a trace, how much of each frame is script vs style/layout vs paint vs raster vs GPU. Produce a stacked chart.
  2. Passive vs non-passive. Same page, one non-passive touchstart/wheel listener. Measure scroll latency with and without. Explain the mechanism, then explain the number.
  3. Compositor vs main-thread animation. Animate the same visual effect via transform and via top. Block the main thread with a 500 ms task mid-animation. Record both. Describe what the user sees in each case.
  4. Tile/checkerboard. Make a very tall page with expensive content and fling-scroll it on a throttled profile. Capture checkerboarding. Explain it in terms of tiles and raster priority.
  5. 120 Hz thought experiment. Take your frame budget chart from (1) and recompute against 8.3 ms. Which term breaks first?

Deliverable: the four measurements plus one paragraph on which of them would change most on a low-end Android device, and why.

7. Failure Lab

  1. Add a non-passive wheel listener that does nothing. Show the cost.
  2. Animate box-shadow (paint-heavy) vs transform. Compare frames.
  3. Force a giant layer (will-change: transform on a very large element). Measure memory.
  4. Write a scroll handler that writes a style each event. Demonstrate the one-frame lag, then fix it with a compositor-friendly approach and prove the lag is gone.

8. Debugging Exercise

  1. Perfetto: capture a scroll. Identify the compositor thread, the raster workers, and the GPU process. Follow one frame's flow arrows end to end.
  2. Find a frame that was dropped. Determine which stage overran, from the trace alone.
  3. DevTools: use layer borders and the rendering panel to find an unexpected composited layer. Determine what created it.
  4. Determine whether a given animation is running on the compositor. State your evidence.