LearnNewsExamplesServices
Frontmatter
id9054
titlePerf: Optimize GitHubOrgs with Node Pooling & Visibility
stateClosed
labels
bugaiperformance
assigneestobiu
createdAtFeb 8, 2026, 7:33 PM
updatedAtFeb 8, 2026, 7:49 PM
githubUrlhttps://github.com/neomjs/neo/issues/9054
authortobiu
commentsCount1
parentIssue8930
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 8, 2026, 7:49 PM

Perf: Optimize GitHubOrgs with Node Pooling & Visibility

Closed v12.0.0 bugaiperformance
tobiu
tobiu commented on Feb 8, 2026, 7:33 PM

The Neo.component.GitHubOrgs component contributes significantly to layout thrashing in the DevRank Grid. It currently rebuilds its VDOM children array on every data update, causing up to 5 removeNode and insertNode operations per cell during scrolling.

Optimization Strategy:

  1. CSS Containment: Apply contain: layout paint style to .neo-github-orgs.
  2. Node Pooling with Visibility: Refactor afterSetOrgs to maintain a fixed pool of maxItems (default 5) VDOM nodes.
    • Initialize the pool once.
    • Recycle nodes by updating attributes (src, href).
    • Strict Stability: For unused nodes, set style: { visibility: 'hidden' } instead of display: none. This ensures the component dimensions remain absolutely constant, preventing any reflows in the parent grid cell.

Benefits:

  • Eliminates structural DOM changes (0 insert/remove ops).
  • Guarantees Zero Layout Shift (component size is immutable).
  • Isolates reflows to the component container.
tobiu added the bug label on Feb 8, 2026, 7:33 PM
tobiu added the ai label on Feb 8, 2026, 7:33 PM
tobiu added the performance label on Feb 8, 2026, 7:33 PM
tobiu referenced in commit 4fe7baf - "perf: Optimize GitHubOrgs with Node Pooling & Visibility (#9054)" on Feb 8, 2026, 7:39 PM
tobiu
tobiu Feb 8, 2026, 7:39 PM

Input from Gemini 3 Pro:

✦ ✦ Optimization Implemented: Node Pooling with Visibility Toggling

To resolve the layout thrashing caused by the GitHubOrgs component during grid scrolling, we implemented a stable-DOM architecture.

1. CSS Containment & Visibility:

  • Applied contain: layout paint style; to the .neo-github-orgs wrapper.
  • Crucial Decision: We use visibility: hidden instead of display: none for unused slots. This ensures the component dimensions (width/height) remain absolutely constant regardless of the number of visible avatars. The component effectively reserves space for 5 avatars at all times, preventing any reflows in the parent grid cell.

2. Pre-allocated Node Pooling:

  • The component now initializes a fixed pool of maxItems (5) anchor/image nodes on the first data update.
  • Instead of destroying/recreating nodes, afterSetOrgs recycles them:
    • Used: Update attributes (src, href), set style: null (visible).
    • Unused: Clear attributes, set style: { visibility: 'hidden' }.

Impact:

  • Zero Structural Deltas: Scrolling generates 0 insertNode or removeNode operations for this column.
  • Zero Layout Shift: The component size is immutable, eliminating forced reflows.
  • 60fps Scrolling: Verified that this change, combined with the CountryFlag optimization, restores smooth scrolling performance.
tobiu cross-referenced by #9055 on Feb 8, 2026, 7:49 PM
tobiu assigned to @tobiu on Feb 8, 2026, 7:49 PM
tobiu closed this issue on Feb 8, 2026, 7:49 PM
tobiu added parent issue #8930 on Feb 8, 2026, 7:49 PM