bi-10 step 02 — Scroll, passive listeners, and checkerboarding

Goal

Demonstrate — with numbers — that a single listener can move scrolling from the compositor to a busy main thread.

Tasks

  1. Measure scroll latency on a page with no wheel/touch listeners.
  2. Add a non-passive wheel or touchstart listener that does nothing. Re-measure. Explain both the mechanism and the magnitude.
  3. Add { passive: true }. Re-measure. Confirm the fast path returns.
  4. Block the main thread with a 500 ms task mid-scroll in both configurations. Describe exactly what the user sees in each.
  5. Checkerboarding. Build a very tall page with expensive content and fling-scroll on a throttled profile. Capture it. Explain via tiles and raster priority — and argue why it is correct behaviour.
  6. Replace a JS scroll handler effect with IntersectionObserver or a scroll-driven animation. Measure the difference.

Done when

  • Three latency measurements: none / non-passive / passive
  • Checkerboarding captured and explained
  • One scroll handler replaced with a compositor-friendly equivalent, measured