Field manual · 07
Performance and cleanup
Understand bounded pools, frame-coalesced pointer work, cleanup, visibility handling, and bundle boundaries.
Search terms: performance, requestAnimationFrame, bounded pool, cleanup, offscreen, bundle
Scout UI treats performance as a public behavior rather than an invisible implementation detail. Existing component milestones record exact test results; this guide describes the contracts without inventing universal frame-rate claims.
Keep frequency outside React
Trail and Cursor store the latest pointer sample, schedule at most one animation frame, and write transforms imperatively. Peel and Stack keep drag progress in refs and CSS variables. React state records only low-frequency semantic changes.
Bound every collection
Trail uses a fixed recycled node pool and a six-spawn-per-frame ceiling. Cursor uses one visual plus at most four echoes. Stack renders visible cards plus at most one outgoing card.
Stop work that cannot help
Trail observes intersection and document visibility. All engines cancel frames, listeners, observers, pointer capture, and transient animation work on cleanup. Reduced-motion and unsupported capability branches do not attach movement loops.
Measure composition cost
Prefer explicit component leaves, lazy search and highlighting, one loud effect per viewport, and no simultaneous full-page pointer systems. Profile the actual consumer rather than repeating isolated benchmark numbers without context.
Read the recorded budgets
M17 records route-specific raw and gzip JavaScript budgets for the homepage, calm guides, component references, playgrounds, and content indexes. The local checker measures production output and applies modest headroom to the measured baseline; it does not make a universal network or frame-rate promise. Pagefind 1.5.2 remains a local static index loaded only after a search query reaches two characters. The Shiki worker remains separate from initial route JavaScript and starts only for a code surface that requests highlighting.
The sustained interaction baseline is also environment-qualified. Trail and Cursor are exercised for at least 30 seconds on the reference Chromium project, while Peel and Stack run repeated committed and cancelled gestures. Hard invariants—bounded DOM, zero pointer-progress React commits, and complete resource cleanup—are enforced independently from tolerant timing observations.