Recent benchmarks (#9199) revealed a performance scaling bottleneck on Desktop resolutions (1920x1080), where the frame rate drops to ~30 FPS compared to 60 FPS on Mobile. This appears to be a Composite/Paint bound issue due to the high number of DOM nodes (~2,300) and active cells (~560) being rendered.
This task is to deeply investigate CSS-level optimizations to alleviate this bottleneck.
Objectives:
- Analyze Current Containment: Evaluate if
contain: strict on Neo.grid.Row and Neo.grid.column.Sparkline is optimal. Does removing it or changing it to content improve performance by reducing overhead, or worsen it?
- Evaluate
will-change: Verify if will-change: transform on every row creates too many GPU layers on large screens. Test removing it or applying it dynamically.
- Explore
content-visibility: Test if content-visibility: auto can provide benefits for the virtualized list rows.
- Paint Complexity: Investigate if specific cell styles (borders, shadows, background gradients) are causing expensive paint operations.
References:
resources/scss/src/grid/Body.scssresources/scss/src/grid/column/Sparkline.scss- Benchmark:
test/playwright/e2e/GridScrollBenchmark.spec.mjs
Recent benchmarks (#9199) revealed a performance scaling bottleneck on Desktop resolutions (1920x1080), where the frame rate drops to ~30 FPS compared to 60 FPS on Mobile. This appears to be a Composite/Paint bound issue due to the high number of DOM nodes (~2,300) and active cells (~560) being rendered.
This task is to deeply investigate CSS-level optimizations to alleviate this bottleneck.
Objectives:
contain: strictonNeo.grid.RowandNeo.grid.column.Sparklineis optimal. Does removing it or changing it tocontentimprove performance by reducing overhead, or worsen it?will-change: Verify ifwill-change: transformon every row creates too many GPU layers on large screens. Test removing it or applying it dynamically.content-visibility: Test ifcontent-visibility: autocan provide benefits for the virtualized list rows.References:
resources/scss/src/grid/Body.scssresources/scss/src/grid/column/Sparkline.scsstest/playwright/e2e/GridScrollBenchmark.spec.mjs