Skip to content

perf(AvatarStack): Optimize CSS :has() selector and throttle MutationObserver #7323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
mattcosta7 wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

perf(AvatarStack): Optimize CSS :has() selector and throttle MutationObserver #7323

mattcosta7 wants to merge 2 commits into from

Conversation

@mattcosta7
Copy link
Contributor

@mattcosta7 mattcosta7 commented Dec 15, 2025 •
edited
Loading

Summary

Performance optimizations for AvatarStack component to improve INP (Interaction to Next Paint).

Changes

  1. CSS :has() selector optimization - Scope :has([data-square]) to direct child with > combinator
  2. MutationObserver throttling - Batch callbacks using requestAnimationFrame

Expected INP Impact

Scenario Before After Improvement
Worst case (rapid DOM mutations, many avatars) ~30-50ms per mutation batch <16ms (1 frame) 50-70% reduction
Average case (occasional updates, 3-5 avatars) ~10-20ms style recalc <5ms 50-75% reduction
Best case (static content) ~5ms style recalc <2ms ~60% reduction

Why this matters

  • :has() optimization: Unscoped :has() forces full subtree traversal. Direct child selector is O(1).
  • MutationObserver throttling: Without throttling, rapid mutations can trigger multiple state updates per frame, causing jank. rAF batching ensures max 1 update per frame.

Part of the INP performance optimization effort. See #7312 for full context.

@mattcosta7
perf(AvatarStack): Optimize CSS :has() selector and throttle Mutation…
be92e4a 
…Observer

- Scope :has([data-square]) to direct child with > combinator for O(1) lookup
- Throttle MutationObserver callback using requestAnimationFrame to batch DOM reads

Part of #7312
@changeset-bot
Copy link

changeset-bot bot commented Dec 15, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 888c37f

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 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 15, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Dec 15, 2025

👋 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.

@github-actions github-actions bot temporarily deployed to storybook-preview-7323 December 15, 2025 14:59 Inactive
@mattcosta7 mattcosta7 self-assigned this Dec 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

At least 1 approving review is required to merge this pull request.

Assignees

@mattcosta7 mattcosta7

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mattcosta7