Skip to content

Perf: Optimize GitHubOrgs with Node Pooling & Visibility #9054

@tobiu

Description

@tobiu

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.

Metadata

Metadata

Assignees

Labels

aibugSomething isn't workingperformancePerformance improvements and optimizations

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions