LearnNewsExamplesServices
Frontmatter
id9199
titleBenchmark Grid Horizontal Scroll Performance
stateClosed
labels
aitestingperformance
assigneestobiu
createdAtFeb 17, 2026, 3:33 PM
updatedAtFeb 18, 2026, 12:47 PM
githubUrlhttps://github.com/neomjs/neo/issues/9199
authortobiu
commentsCount1
parentIssue9194
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 18, 2026, 12:47 PM

Benchmark Grid Horizontal Scroll Performance

Closed v12.0.0 aitestingperformance
tobiu
tobiu commented on Feb 17, 2026, 3:33 PM

Objective

Investigate and verify the performance impact of "Virtual Fields" and "Dynamic Column Updates" on horizontal scrolling in the Grid.

Motivation

Post-implementation of "Zero Overhead" records (#9193), there is a subjective perception that horizontal scrolling in DevIndex has become sluggish. We need objective data to confirm if this is a regression caused by the virtual getter overhead, the fix in Column.mjs, or an unrelated factor (e.g., dataset size).

Tasks

  1. Create Benchmark Test: Develop a Playwright component test (test/playwright/component/benchmark/GridScroll.spec.mjs) that:
    • Loads a Grid with the DevIndex column structure.
    • Performs an automated horizontal scroll sequence.
    • Measures Frame Rate (FPS) and/or Scripting Duration.
  2. Profiling: Use Chrome DevTools Performance Trace (via Playwright) to pinpoint if the bottleneck is:
    • Scripting: RecordFactory getters, Row.createVdom.
    • Rendering: Style/Layout calculations.
  3. Analysis: Compare metrics against a baseline (or theoretical expectations).

Outcome

Definitive confirmation of performance status and identification of any bottlenecks to address.

tobiu added the ai label on Feb 17, 2026, 3:33 PM
tobiu added the testing label on Feb 17, 2026, 3:33 PM
tobiu added the performance label on Feb 17, 2026, 3:33 PM
tobiu added parent issue #9194 on Feb 17, 2026, 3:33 PM
tobiu assigned to @tobiu on Feb 17, 2026, 4:27 PM
tobiu referenced in commit 9b94c52 - "feat: Add Playwright benchmark for Grid scrolling (#9199)" on Feb 18, 2026, 12:46 PM
tobiu
tobiu Feb 18, 2026, 12:47 PM

Input from Gemini 3 Pro:

✦ I have completed the benchmark implementation and initial analysis.

Achievements

  1. Infrastructure: Created test/playwright/e2e/ with necessary helpers and a custom system reporter.
  2. Benchmark: Implemented GridScrollBenchmark.spec.mjs covering Horizontal, Vertical, and Diagonal scrolling across Mobile, Laptop, and Desktop viewports.
  3. Data Collection: Verified that the benchmark captures FPS, Long Frames, and DOM Node counts.

Key Findings

The benchmark revealed a critical Scaling Bottleneck on the Desktop (1920x1080) viewport.

Viewport Resolution DOM Nodes FPS Status
Mobile 375x667 1,731 60 🟢
Laptop 1366x768 1,867 54 🟡
Desktop 1920x1080 2,285 30 🔴

Experiments & Analysis

I performed several experiments to isolate the cause of the Desktop performance drop:

  1. Throttling: Increasing update throttling (48ms, 160ms) had negligible impact (~33 FPS).
  2. Buffer Reduction: Reducing mountedColumns buffer helped slightly but didn't solve it.
  3. Component Removal: Removing the heavy Sparkline column (OffscreenCanvas) also had negligible impact.

Conclusion: The bottleneck is the Composite/Paint cost of the large DOM tree (2,000+ nodes) on the 1080p surface. The Main Thread is saturated by the browser's rendering engine, not by Scripting or Worker communication.

Future Work

New tickets should be created to investigate:

  • CSS Containment: Applying contain: strict to Rows/Cells.
  • Layer Promotion: Optimizing will-change.
  • DOM Flattening: Reducing the nesting depth of cells.
tobiu closed this issue on Feb 18, 2026, 12:47 PM
tobiu cross-referenced by #9202 on Feb 18, 2026, 12:52 PM
tobiu cross-referenced by #9203 on Feb 18, 2026, 1:07 PM