LearnNewsExamplesServices
Frontmatter
id7187
titleGrid Row Vertical Scrolling Optimization with translate3d
stateClosed
labels
enhancement
assigneestobiu
createdAtAug 12, 2025, 3:49 AM
updatedAtAug 12, 2025, 3:50 AM
githubUrlhttps://github.com/neomjs/neo/issues/7187
authortobiu
commentsCount0
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtAug 12, 2025, 3:50 AM

Grid Row Vertical Scrolling Optimization with translate3d

Closed v10.5.0 enhancement
tobiu
tobiu commented on Aug 12, 2025, 3:49 AM

Is your feature request related to a problem? Please describe.

While the Neo.mjs grid uses virtual scrolling, the vertical positioning of rows was previously achieved using transform: translateY(Ypx). For grids with a large number of rows (e.g., 100,000 or 1,000,000 rows), rapid vertical scrolling could sometimes feel less fluid or "unbearable," even with lazy record instantiation and optimized VDom diffing for the mounted range. This suggested that the browser's rendering pipeline might not be fully optimizing the 2D transform updates.

Describe the solution you'd like

To enhance the fluidity and performance of vertical row scrolling, the transform property for grid rows has been updated from translateY(Ypx) to translate3d(0px, Ypx, 0px).

This change leverages the browser's ability to promote elements with 3D transforms to their own composite layers on the GPU. By offloading the row positioning updates to the GPU, the CPU is freed up for other tasks (like JavaScript execution and VDom diffing), leading to a smoother and more responsive scrolling experience.

Describe alternatives you've considered

(No specific alternatives considered as this is a targeted optimization for an existing mechanism.)

Additional context

This optimization is particularly beneficial for grids displaying a large number of rows, where the cumulative effect of frequent row position updates can impact perceived performance. Initial observations indicate a noticeable improvement in vertical scrolling fluidity.

This feature was implemented in src/grid/Body.mjs#createRow.

tobiu assigned to @tobiu on Aug 12, 2025, 3:49 AM
tobiu added the enhancement label on Aug 12, 2025, 3:49 AM
tobiu referenced in commit a1b5bf6 - "Grid Row Vertical Scrolling Optimization with translate3d #7187" on Aug 12, 2025, 3:50 AM
tobiu closed this issue on Aug 12, 2025, 3:50 AM