pass at optimizing css and js to minimize blocking, recalc, layout, inp costs by mattcosta7 · Pull Request #7312 · primer/react

mattcosta7 · 2025-12-13T21:01:00Z

related to https://github.com/github/react-platform/issues/1398

CSS `:has()` Selector & JavaScript Performance Optimizations

Summary

This PR optimizes CSS :has() selectors and JavaScript patterns across multiple components to improve Interaction to Next Paint (INP) and overall Web Vitals performance. The changes target expensive style recalculations and DOM queries that block the main thread during user interactions.

Changes Overview

CSS Optimizations (11 files)

Dialog: Body class instead of :has() selector for scroll lock
PageHeader: 17 selectors scoped to direct children (>)
ActionList: Data attributes (data-disabled, data-loading) instead of :has() for disabled/loading states
Banner, ButtonGroup, AvatarStack, Breadcrumbs, SegmentedControl: Scoped :has() selectors to direct children
BaseStyles: Removed expensive :has([data-color-mode]) selectors (already handled by global selectors)

JavaScript Hook Optimizations

`useResizeObserver` - First-Immediate Throttling

Pattern	Behavior
First callback	Immediate - fires synchronously on `observe()`
Subsequent callbacks	Throttled with rAF (~60fps)

This pattern preserves test compatibility (tests expect immediate first callback) while reducing layout thrashing during rapid resize events like window dragging.

`useAnchoredPosition` - Indirect Benefit

useAnchoredPosition calls useResizeObserver twice internally:

Once for window resize (document element)
Once for floating element resize

Both now benefit from first-immediate throttling automatically. During rapid resize events (e.g., window dragging with an open dropdown), position recalculations are coalesced to ~60fps instead of firing on every resize event.

`useOverflow` - Same Pattern

First callback immediate, subsequent callbacks throttled with requestAnimationFrame.

Component-Local Optimizations

Component	Change
AvatarStack	MutationObserver callback throttled with rAF
ActionBar	ResizeObserver callback throttled (component-local)
UnderlineNav	ResizeObserver callback throttled (component-local)

`useTreeItemCache` (New Hook)

Caches querySelectorAll results for TreeView typeahead with MutationObserver invalidation.

Before: 10-50ms per keystroke (DOM query on every key)
After: ~0.01ms per keystroke (cached, invalidates only on structure change)

Other Optimizations

Utility	Change
hasInteractiveNodes	Uses `querySelectorAll` with combined selector + attribute-first checks
Breadcrumbs	Batch layout reads (`offsetWidth`) in single pass
UnderlineNavItem	Batch `getBoundingClientRect` and `getComputedStyle` reads

The Problem

How `:has()` affects INP

When a browser evaluates a CSS selector like:

.parent:has(.descendant) { ... }

It must scan all descendants of .parent on every style recalculation to determine if any match .descendant. This is an O(n) operation where n is the number of descendants.

Complexity Analysis

Pattern	Complexity	Description
`:has(.descendant)`	O(n)	Scans all n descendants
`:has(> .child)`	O(1)	Checks only direct children
`body:has(.element)`	O(N)	Scans entire document (N = total DOM nodes)
`[data-attr]`	O(1)	Attribute lookup on element itself

Performance Expectations

Estimated Improvements

Scenario	Before (est.)	After (est.)	Improvement
Dialog open on page with 10K DOM nodes	2-5ms style recalc	0.01ms	99%+
ActionList hover (100 items)	0.5-1ms per hover	0.01ms	95%+
PageHeader style recalc	17 × O(n) scans	17 × O(1) checks	95%+
TreeView typeahead (1000 items)	10-50ms per keystroke	0.01ms	99%+
Window resize with open overlay	Every resize triggers position calc	First immediate, rest ~60fps	80%+

Web Vitals Analysis

Metric	Status	Notes
INP	✅ Optimized	CSS `:has()` scans eliminated, JS hooks throttled
LoAF	✅ Improved	Same optimizations reduce long animation frames
CLS	✅ No impact	No layout changes, visual appearance unchanged
LCP	✅ No impact	No render-blocking changes

Testing

✅ All 2047 unit tests pass (139 test files)
✅ Visual regression tests pass (62 snapshots updated for CSS module hash changes)
✅ TypeScript compilation succeeds
✅ Linting passes

Files Changed

CSS Files (11+ files)

ActionList.module.css, Group.module.css, AvatarStack.module.css, Banner.module.css
BaseStyles.module.css, Breadcrumbs.module.css, ButtonBase.module.css, ButtonGroup.module.css
Dialog.module.css, PageHeader.module.css, SegmentedControl.module.css
Timeline.module.css, TreeView.module.css, SelectPanel.module.css

JavaScript/TypeScript Files

hooks/useResizeObserver.ts - First-immediate throttling
hooks/useOverflow.ts - First-immediate throttling
hooks/useAnchoredPosition.ts - Benefits from useResizeObserver changes (no code changes needed)
TreeView/useTreeItemCache.ts - New cache hook
TreeView/useTypeahead.ts - Uses cached tree items
AvatarStack/AvatarStack.tsx - MutationObserver throttling
ActionBar/ActionBar.tsx, UnderlineNav/UnderlineNav.tsx - Comments for throttling
Dialog/Dialog.tsx - Body class for scroll lock
ActionList/Item.tsx, ActionList/TrailingAction.tsx - Data attributes
internal/utils/hasInteractiveNodes.ts - Optimized algorithm
Breadcrumbs/Breadcrumbs.tsx, UnderlineNavItem.tsx - Batch layout reads

Breaking Changes

None. All changes are backward compatible:

All visual appearances unchanged
API signatures unchanged
62 snapshot updates are only CSS module hash changes (no visual diff)

Changelog

New

useTreeItemCache hook for caching TreeView DOM queries
data-disabled and data-loading attributes on ActionList items
CSS instructions for Web Vitals analysis requirements

Changed

CSS :has() selectors optimized across 11+ component CSS files
Dialog scroll lock uses direct body class instead of CSS :has()
useResizeObserver uses first-immediate, subsequent-throttled pattern
useOverflow uses first-immediate, subsequent-throttled pattern
useAnchoredPosition benefits from useResizeObserver throttling (used by ActionMenu, SelectPanel, Autocomplete, etc.)
MutationObserver callback throttled in AvatarStack
hasInteractiveNodes uses querySelectorAll with attribute-first checks

Rollout strategy

Patch release

Merge checklist

Added/updated tests
Added/updated documentation
Changes are SSR compatible
Tested in Chrome

Replace expensive CSS :has() selectors that scan the DOM with data attributes set in JavaScript. This improves Interaction to Next Paint (INP) by avoiding costly style recalculations. Changes: - Dialog: Replace body:has(.Dialog.DisableScroll) with direct class toggle on body element. The :has() selector was scanning the entire DOM on every style recalc. - ActionList: Replace expensive descendant-scanning :has() selectors: - Mixed descriptions: Replace double :has() that scanned all items twice with a JS-computed data-has-mixed-descriptions attribute - Disabled state: Replace :has([aria-disabled], [disabled]) with data-disabled attribute on the <li> - Loading state: Replace :has([data-loading]) with data-loading attribute on the <li> Selectors left unchanged (cheap/already scoped): - &:has(> .TrailingAction) - direct child, O(1) - .Dialog:has(.Footer) - single element container - Adjacent sibling selectors in other components

Scope remaining :has() selectors to direct children where possible, reducing DOM traversal depth from O(n) to O(1) or O(children). Button: - Replace :has(.Visual) with data-no-visuals attribute check - Scope icon-only counter :has() to direct child path ActionList: - Scope TrailingAction loading :has() to direct child - Replace :has([data-truncate]) with self-selector (attr is on same element) - Scope TrailingActionButton :has() to direct child - Scope InactiveButtonWrap :has() to shallow path - Add data-loading to TrailingAction wrapper span

All 17 :has() selectors in PageHeader now use the direct child combinator (>) since TitleArea and Navigation are rendered as direct children of PageHeader. This changes the lookup from O(n) descendant scan to O(1) direct child check.

Scope :has() selectors to use direct child combinators (>) or shallow paths (> * >) for O(1) lookups instead of descendant scans: - Dialog: :has(.Footer) → :has(> .Footer) - SegmentedControl: :has(:focus-visible) → :has(> :focus-visible) - TreeView: :has(.TreeViewItemSkeleton) → :has(> .TreeViewItemSkeleton) - Breadcrumbs: :has(.MenuOverlay) → :has(> .MenuDetails .MenuOverlay) - ButtonGroup: :has(div:last-child:empty) → :has(> div:last-child:empty) - Banner: :has(.BannerActions) → :has(> * > .BannerActions) - AvatarStack: :has([data-square]) → :has(> [data-square]) - SelectPanel: :has(input:placeholder-shown) → :has(> input:placeholder-shown)

changeset-bot · 2025-12-13T21:01:04Z

🦋 Changeset detected

Latest commit: 48ee449

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-12-13T21:01:36Z

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

mattcosta7 · 2025-12-13T21:09:30Z

packages/react/src/ActionList/ActionList.module.css

+   * :has([data-has-description='true']):has([data-has-description='false'])
+   * The double :has() scans all items twice on every style recalc - O(2n).
+   */
+  &[data-has-mixed-descriptions='true'] {


copilot and I couldn't find a solution outside of doing some javascript for this - but maybe O(2n) scans are ok here?

The hover state selector was checking [aria-disabled] on the <li> element, but aria-disabled may be on a child element (ItemWrapper) depending on the _PrivateItemWrapper and listSemantics flags. Using data-disabled alone is correct because it's explicitly set on the <li> based on the disabled prop.

All TitleArea and Navigation selectors are now scoped to direct children with > combinator. Part of #7312

…r O(1) lookup Part of #7312

Added documentation explaining why the :has(input:placeholder-shown) selector is acceptable. Part of #7312

…nt sibling Part of #7312

- Add useTreeItemCache hook to cache DOM queries for tree items - Update useRovingTabIndex and useTypeahead to use cached items - Add documentation for acceptable :has() selector usage Part of #7312

…useOverflow - useResizeObserver fires callback immediately on first observation, then throttles with rAF - useOverflow uses the same pattern to avoid initial flash of incorrect overflow state - Added isFirstCallback ref pattern to skip throttling on initial mount Part of #7312

…s and throttle updates - Use window resize listener instead of ResizeObserver on documentElement - Add ResizeObserver for floating element with first-immediate throttling - Use updatePositionRef to avoid callback identity changes - Deduplicate observer setup to avoid redundant work Part of #7312

Split AutocompleteContext into separate contexts for static values, setters, and dynamic state. Components now subscribe only to the context slices they need, reducing re-renders. Part of #7312

Combine display and visibility checks into a single getComputedStyle call. Part of #7312

…server throttling - UnderlineNavItem: Batch getBoundingClientRect and getComputedStyle reads - UnderlineNav: Add comment noting ResizeObserver callbacks are now throttled Part of #7312

Remove unnecessary array dependency parameter from useResizeObserver call. Part of #7312

Document that useResizeObserver is throttled by default with rAF for better INP. Part of #7312

…attribute checks - Use combined querySelectorAll selector instead of recursive traversal - Check attribute-based states (disabled, hidden, inert) before getComputedStyle - Only call getComputedStyle when CSS-based visibility check is needed Part of #7312

mattcosta7 added 4 commits December 13, 2025 20:33

mattcosta7 changed the title ~~Css inp performance minimal~~ Optimize costly css selectors Dec 13, 2025

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Dec 13, 2025

mattcosta7 commented Dec 13, 2025

View reviewed changes

mattcosta7 deployed to github-pages December 13, 2025 21:12 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7312 December 13, 2025 21:12 Inactive

mattcosta7 force-pushed the css-inp-performance-minimal branch from 3211079 to 895c4a6 Compare December 13, 2025 21:19

mattcosta7 deployed to github-pages December 13, 2025 21:29 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7312 December 13, 2025 21:29 Inactive

mattcosta7 force-pushed the css-inp-performance-minimal branch from 895c4a6 to 0a7505c Compare December 13, 2025 21:32

mattcosta7 deployed to github-pages December 13, 2025 21:42 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7312 December 13, 2025 21:43 Inactive

mattcosta7 force-pushed the css-inp-performance-minimal branch from 0a7505c to 7287a23 Compare December 13, 2025 22:02

update copilot instructions

78d425b

mattcosta7 force-pushed the css-inp-performance-minimal branch from 7287a23 to 78d425b Compare December 13, 2025 22:03

github-actions bot requested a deployment to storybook-preview-7312 December 13, 2025 22:06 Abandoned

mattcosta7 deployed to github-pages December 13, 2025 22:15 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7312 December 13, 2025 22:16 Inactive

mattcosta7 deployed to github-pages December 13, 2025 22:38 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7312 December 13, 2025 22:38 Inactive

Copilot AI mentioned this pull request Dec 13, 2025

fix(ActionList): restore aria-disabled and data-truncate selectors for VRT compatibility #7313

Closed

13 tasks

backout a bit

90f3b57

mattcosta7 deployed to github-pages December 14, 2025 00:17 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7312 December 14, 2025 00:17 Inactive

mattcosta7 mentioned this pull request Dec 15, 2025

perf(Dialog): Replace body:has() with direct class #7329

Merged

mattcosta7 added a commit that referenced this pull request Dec 15, 2025

perf(PageHeader): Scope :has() selectors to direct child for O(1) lookup

d35f3d5

All TitleArea and Navigation selectors are now scoped to direct children with > combinator. Part of #7312

mattcosta7 mentioned this pull request Dec 15, 2025

perf(PageHeader): Scope :has() selectors to direct child for O(1) lookup #7330

Closed

mattcosta7 added a commit that referenced this pull request Dec 15, 2025

perf(SegmentedControl): Scope :has(:focus-visible) to direct child fo…

e63fed7

…r O(1) lookup Part of #7312

mattcosta7 mentioned this pull request Dec 15, 2025

perf(SegmentedControl): Scope :has(:focus-visible) to direct child for O(1) lookup #7331

Closed

mattcosta7 added a commit that referenced this pull request Dec 15, 2025

perf(SelectPanel): Document acceptable :has() selector usage

096d1ab

Added documentation explaining why the :has(input:placeholder-shown) selector is acceptable. Part of #7312

mattcosta7 mentioned this pull request Dec 15, 2025

perf(SelectPanel): Document acceptable :has() selector usage #7332

Closed

mattcosta7 added a commit that referenced this pull request Dec 15, 2025

perf(Timeline): Document acceptable :has() selector usage with adjace…

6e369b3

…nt sibling Part of #7312

mattcosta7 mentioned this pull request Dec 15, 2025

perf(Timeline): Document acceptable :has() selector usage #7333

Closed

mattcosta7 mentioned this pull request Dec 15, 2025

perf(TreeView): Cache tree items in typeahead for better INP #7334

Merged

mattcosta7 mentioned this pull request Dec 15, 2025

perf(hooks): Add opt-in throttling to useResizeObserver and useOverflow #7335

Closed

mattcosta7 mentioned this pull request Dec 15, 2025

perf(hooks): Optimize useAnchoredPosition to avoid duplicate observers and throttle updates #7336

Closed

mattcosta7 mentioned this pull request Dec 15, 2025

perf(Autocomplete): Split context to reduce unnecessary re-renders #7337

Merged

mattcosta7 added a commit that referenced this pull request Dec 15, 2025

perf(Announce): Batch getComputedStyle reads to avoid layout thrashing

9bc4202

Combine display and visibility checks into a single getComputedStyle call. Part of #7312

mattcosta7 mentioned this pull request Dec 15, 2025

perf(Announce): Batch getComputedStyle reads to avoid layout thrashing #7338

Closed

mattcosta7 mentioned this pull request Dec 15, 2025

perf(UnderlineNav): Batch layout reads and improve readability #7339

Closed

mattcosta7 added a commit that referenced this pull request Dec 15, 2025

perf(UnderlinePanels): Simplify useResizeObserver usage

fd32833

Remove unnecessary array dependency parameter from useResizeObserver call. Part of #7312

mattcosta7 mentioned this pull request Dec 15, 2025

perf(UnderlinePanels): Simplify useResizeObserver usage #7340

Closed

mattcosta7 added a commit that referenced this pull request Dec 15, 2025

perf(ActionBar): Add comment noting ResizeObserver throttling for INP

6c81417

Document that useResizeObserver is throttled by default with rAF for better INP. Part of #7312

mattcosta7 mentioned this pull request Dec 15, 2025

perf(ActionBar): Document ResizeObserver throttling #7341

Closed

mattcosta7 mentioned this pull request Dec 15, 2025

perf(hasInteractiveNodes): Optimize with combined selector and early attribute checks #7342

Merged

mattcosta7 closed this Dec 23, 2025

This was referenced Dec 25, 2025

perf(BaseStyles): Add feature flag for :has([data-color-mode]) selector optimization #7367

Closed

Replace :has() selectors with data attributes in Button component for INP optimization #7402

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

pass at optimizing css and js to minimize blocking, recalc, layout, inp costs#7312

pass at optimizing css and js to minimize blocking, recalc, layout, inp costs#7312
mattcosta7 wants to merge 22 commits intomainfrom
css-inp-performance-minimal

mattcosta7 commented Dec 13, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Dec 13, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 13, 2025

Uh oh!

mattcosta7 Dec 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

mattcosta7 commented Dec 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CSS :has() Selector & JavaScript Performance Optimizations

Summary

Changes Overview

CSS Optimizations (11 files)

JavaScript Hook Optimizations

useResizeObserver - First-Immediate Throttling

useAnchoredPosition - Indirect Benefit

useOverflow - Same Pattern

Component-Local Optimizations

useTreeItemCache (New Hook)

Other Optimizations

The Problem

How :has() affects INP

Complexity Analysis

Performance Expectations

Estimated Improvements

Web Vitals Analysis

Testing

Files Changed

CSS Files (11+ files)

JavaScript/TypeScript Files

Breaking Changes

Changelog

New

Changed

Rollout strategy

Merge checklist

Uh oh!

changeset-bot bot commented Dec 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Dec 13, 2025

Uh oh!

mattcosta7 Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mattcosta7 commented Dec 13, 2025 •

edited

Loading

CSS `:has()` Selector & JavaScript Performance Optimizations

`useResizeObserver` - First-Immediate Throttling

`useAnchoredPosition` - Indirect Benefit

`useOverflow` - Same Pattern

`useTreeItemCache` (New Hook)

How `:has()` affects INP

changeset-bot bot commented Dec 13, 2025 •

edited

Loading