-
-
Notifications
You must be signed in to change notification settings - Fork 202
Investigate Grid Scrolling Performance via Column Ablation Strategy #9203
Description
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:
- Modify Benchmark: Update
test/playwright/e2e/GridScrollBenchmark.spec.mjsto support anexcludeColumnparameter (or create variants). - Test Iterations: Run the benchmark on Desktop (1920x1080) for each scenario:
- Baseline: All columns active (Control).
- No Images: Exclude
GitHubOrgs,CountryFlag, andIconLink(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).
- Analyze: Compare the FPS and Main Thread Trace activity.
- If removing
CountryFlagjumps FPS to 50+, investigate its shadow/border/SVG styles. - If removing
GitHubOrgsjumps FPS, investigateborder-radiusor image decoding costs. - If "Text Only" is still slow, the issue is the raw layout cost of the CSS Grid/Flexbox structure itself.
- If removing
Outcome: Identify the specific CSS/DOM feature causing the 30 FPS cap on large screens.