Skip to content

Optimize Grid hot paths to reduce GC pressure #9319

@tobiu

Description

@tobiu

This ticket optimizes the hot paths within the buffered grid to reduce GC pressure and improve scrolling/rendering performance.

The Grid's virtual scrolling mechanism relies heavily on iterating over rows, columns, and cell components. Using .forEach() with inline arrow functions in these tight loops allocates arrays (like Object.values()) and closures repeatedly.

Changes:

  1. src/grid/Body.mjs: Replaced .forEach() loops with highly efficient for loops, particularly in hot paths like onStoreRecordChange, getColumnCells, and config setters that iterate over me.items.
  2. src/grid/Row.mjs: Replaced Object.values(me.components).forEach() with for...in loops to avoid intermediate array allocations and closures during component state updates and destruction. Refactored .forEach on oldCn to a standard for loop during cell VDOM recycling.
  3. src/grid/Container.mjs: Replaced .forEach in createColumns, bulkUpdateRecords, and removeSortingCss with for loops.

These optimizations are crucial for maintaining 60fps scrolling performance, especially when rapidly recycling rows with many cell components.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions