Skip to content

Investigate Grid Scrolling Performance via Column Ablation Strategy #9203

@tobiu

Description

@tobiu

Recent benchmarks (#9199) identified a significant performance bottleneck in the Grid component on Desktop viewports (1920x1080).

  • Mobile (375x667): 60 FPS
  • Laptop (1366x768): 54 FPS
  • Desktop (1920x1080): 30 FPS

The sharp drop to 30 FPS on Desktop, despite only a ~12% increase in active cells compared to Laptop, suggests a non-linear scaling issue or a specific CSS/Layout trigger that is disproportionately expensive at this scale.

Since general optimizations (throttling, buffer reduction) failed to improve the Desktop framerate, we need to isolate the specific rendering cost.

Strategy: Column Ablation
We need to systematically remove specific column types from the DevIndex grid and re-run the benchmark to identify if a particular component style is the culprit.

Tasks:

  1. Modify Benchmark: Update test/playwright/e2e/GridScrollBenchmark.spec.mjs to support an excludeColumn parameter (or create variants).
  2. Test Iterations: Run the benchmark on Desktop (1920x1080) for each scenario:
    • Baseline: All columns active (Control).
    • No Images: Exclude GitHubOrgs, CountryFlag, and IconLink (Avatar/Flag/Icon images).
    • No Sparklines: Already tested (30 -> 33 FPS, minor impact), but worth re-verifying in this suite.
    • No Custom Components: Exclude Heuristics.
    • Text Only: Hide all Year/Number columns (reduce text node count).
  3. Analyze: Compare the FPS and Main Thread Trace activity.
    • If removing CountryFlag jumps FPS to 50+, investigate its shadow/border/SVG styles.
    • If removing GitHubOrgs jumps FPS, investigate border-radius or image decoding costs.
    • If "Text Only" is still slow, the issue is the raw layout cost of the CSS Grid/Flexbox structure itself.

Outcome: Identify the specific CSS/DOM feature causing the 30 FPS cap on large screens.

Metadata

Metadata

Assignees

Labels

aiperformancePerformance improvements and optimizationstesting

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions