Skip to content

Speed up compatibility matrix lookups - #601

Open
jonbaldie wants to merge 1 commit into
vercel-labs:mainfrom
jonbaldie:perf/compatibility-lookup-tooltips
Open

jonbaldie wants to merge 1 commit into
vercel-labs:mainfrom
jonbaldie:perf/compatibility-lookup-tooltips

Conversation

@jonbaldie

Copy link
Copy Markdown

Summary

The /compatibility matrix mounted a hidden tooltip for every badge (~32k elements with all 3,662 rows expanded) and re-rendered every badge on each search keystroke.

 <NodeCompatibilityMatrix>
-  <StatusBadge>                  # rerenders on every keystroke
-    <span role="tooltip">        # always mounted, CSS-hidden
+  <StatusBadge> = memo(...)      # skipped when props are unchanged
+    {hovered || focused ? <span role="tooltip"> : null}
-  <StabilityBadge>
-    <span role="tooltip">
+  <StabilityBadge> = memo(...)
+    {hovered || focused ? <span role="tooltip"> : null}

Every row, label, filter, and tooltip text is unchanged. Tooltips still appear on hover and keyboard focus.

tests/browser/
├── compatibility.test.ts     # 4 Playwright contracts, run by docs `pnpm check`
├── compatibility.bench.ts    # timing benchmark (opt-in, never a CI assertion)
└── compatibility-oracle.ts   # independent expected rows from the published census
internal/performance/compatibility-lookup.md   # method, samples, experiments, reproduce steps

CI gains a required test (docs compatibility browser contracts) job that runs the docs gate with Chromium.

Evidence

Lab-only: production Next.js build, Apple M3, Chrome for Testing 154, 9 attempts per phase. Measured from first input until two animation frames after the final matching readFile result.

CPU p50 before → after Max before → after
Normal 1,087.7 → 514.2 ms (−52.7%) 1,491.0 → 556.9 ms
4× throttle 3,799.8 → 1,972.4 ms (−48.1%) 4,644.6 → 2,101.2 ms
  • Before: an inactive expanded matrix has hidden tooltip nodes, and r → re calls the status renderer 6,128 times. The new contracts failed on 2069684.
    After: 0 tooltip nodes, at most 17 × rows + 500 elements (58,649 vs 90,922 before), and ≤ 16 retained-badge renders per kind. All 4 contracts pass.
all APIs remain reachable without eagerly mounting hidden tooltips        ✓
search and independent tier filters preserve every match and its parents  ✓
retained API badges do not rerender on every search keystroke             ✓
status and stability details remain available to mouse and keyboard users ✓

Settled tooltip screenshots: desktop is pixel-identical, and mobile differs in 92 of 912,600 color channels.

Before After
Desktop before desktop after desktop
Mobile 390×844 before mobile after mobile

A CSS content-visibility experiment was rejected because it collapsed table height from ~210k to ~68k px, changing scroll geometry.

Validation. On this branch (rebased onto 0845c7f), both frozen installs and NEXT_DIST_DIR=.next-check pnpm check pass. pnpm test:sandbox was unavailable (expired Vercel credentials). The local fallback ran on 2069684 and is not green:

  • plain: 7,267 passed, 1 failed. zig COFF dry-run inputs retain complete cross-target cache hits failed with ENOENT scanning cache/bin after 34.7 s under load. It passes in 5.9 s when run alone.
  • san: 8 failed. Every one is the sanitizer printing No external symbolizers found … Is PATH set? into byte-compared stderr. It reproduces alone via 2946-child-fork-ipc, which forks with env: { IPC_FIXTURE: "yes" } (no PATH). Upstream's macOS 15 san shards passed on the same base commit, so this appears specific to the Darwin 25.6 host.

This PR changes no compiler, runtime, or harness code.

Merge Danger

Door: two-way

Revert the commit to restore the old matrix and remove the CI job.

Blast Radius: docs-and-CI

  • Tooltip content now mounts on mouseenter/focus. Settled visuals match, but the hover/focus fade-in has not been checked on real devices.
  • Adds @playwright/test as a root dev dependency.
  • Adds a required CI job (~Chromium install + docs build) to the test aggregate. A flaky browser would block merges.

🤖 Generated with Claude Code

Mount status and stability tooltips only while their badge is hovered or
focused, and memoize unchanged badges so search keystrokes skip them.
Typing "readFile" to its final result is 53% faster at normal CPU speed
and 48% faster under 4x CPU throttling in lab measurements.

Add Playwright browser contracts for row reachability, search and tier
filters, badge render counts, and mouse/keyboard tooltip details. Run
them in the docs gate and a required CI job.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 1, 2026

Copy link
Copy Markdown
Contributor

@jonbaldie is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

@socket-security

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Addednpm/​@​playwright/​test@​1.63.010010010099100

View full report

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant