Skip to content

perf(render): IntersectionObserver::computeIntersections is 2% of desktop main-thread — audit over-observing viewport/lazy observers (#4539 follow-up) #4637

Description

@koala73

Surfaced by the #4539 desktop main-thread attribution (baseline docs/perf/desktop-mainthread-baseline-2026-07-02.md, PR to land the harness). Decomposing the previously-opaque "Other" bucket, IntersectionObserverController::computeIntersections = ~2.0% of main-thread self-time (173ms in a fast unthrottled run; proportionally larger on real/throttled devices). It's the cleanest new actionable sub-bucket — the render axis's other big pieces are RunTask self-time (→ #4537 yield-to-main) and Style&Layout (→ #4536 forced-reflow).

computeIntersections runs whenever the layout/scroll position changes for every registered IntersectionObserver. WorldMonitor registers observers for viewport-gated panel loading (isPanelNearViewport / the panel-near-viewport gate in data-loader), lazy panel mount, and likely animation/visibility triggers. On a dense dashboard these recompute on every scroll + layout.

Lever (audit, then bound)

  1. Count the live IntersectionObservers on /dashboard (PerformanceObserver/DevTools or a one-off instrument) and which elements each watches.
  2. Bound the cost: (a) coalesce many per-panel observers into a shared root observer with rootMargin; (b) disconnect observers once their one-shot trigger fires (lazy-load / near-viewport gates are one-shot — they shouldn't keep recomputing); (c) widen thresholds to reduce recompute frequency.
  3. Re-measure with the perf(attribution): desktop main-thread "Other" = 11s (52%) is uncharacterized — commit a desktop attribution baseline (#4487) #4539 harness (scripts/measure-desktop-mainthread.mjs) — the computeIntersections sub-bucket should shrink.

Part of #4539 / #4487 (render axis). Sibling levers: #4536 (Style&Layout), #4537 (RunTask/INP).

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Standard priority, backlog or low urgency workarea:frontendFrontend components, layout, visual encodingclaudeGenerated with Claude CodeperformancePerformance optimization

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions