js-runtime-performance

name	js-runtime-performance
description	Guides JavaScript runtime performance testing for frontend components. Use when profiling event handlers, DOM update loops, memory leaks, timers, animation frames, pointer/keyboard interactions, or regressions in vanilla JS component code.

JS Runtime Performance

Measure JavaScript cost through real user-facing paths. For FigUI3, that usually means interactions on fig-* elements in Playwright, not isolated functions.

What To Check

• Event handlers stay short during pointer drag, key repeat, input, and resize.
• Attribute/property updates avoid redundant DOM writes.
• Repeated mount/unmount cycles clean listeners, timers, observers, and animation frames.
• Expensive parsing or serialization does not run on every frame.
• Overlay and picker positioning does not do repeated forced layout work.
• Component registration and upgrade do not block page boot unexpectedly.

Test Pattern

1. Reproduce the user path with real DOM and real events.
2. Warm up once, then measure repeated runs.
3. Collect timings with performance.now() around the smallest meaningful operation.
4. For leak risks, mount/unmount repeatedly and count retained DOM/listeners through observable public effects.
5. Assert behavior first, then assert timing or bounded operation counts.

Instrumentation Ideas

• Wrap public methods or callbacks temporarily inside page.evaluate to count calls.
• Count emitted input and change events during interactions.
• Use requestAnimationFrame loops to detect frame starvation.
• Use console timing only for manual investigation; tests should return structured values to Playwright.

Fix Preferences

• Batch DOM writes before layout reads.
• Cache parsed static data, but invalidate when public attributes/properties change.
• Prefer one listener on a stable root over many per-child listeners when behavior allows.
• Cancel timers, observers, and frame callbacks in disconnectedCallback.

Avoid

• Optimizing private code paths that do not affect measured UI behavior.
• Adding debounce/throttle that changes input vs change semantics.
• Hiding slow work behind setTimeout without proving user-perceived latency improves.