[DataGrid] Performance: small optimizations #12346

romgrk · 2024-03-06T10:57:46Z

Various small optimizations.

Result: small 2-3% improvement
Benchmark: scroll the grid by a constant offset, record the total CPU time

branch: next
    N           Min           Max        Median           Avg        Stddev
x  10           163           198           178         181.1     11.483805


branch: perf-small-opts
    N           Min           Max        Median           Avg        Stddev
x   9           145           204           175     176.55556     18.500751

mui-bot · 2024-03-06T11:01:54Z

Deploy preview: https://deploy-preview-12346--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 90af7a5

romgrk · 2024-03-06T12:52:18Z

packages/x-data-grid/src/components/GridRow.tsx

-        {...slotProps?.cell}
        pinnedOffset={pinnedOffset}
        pinnedPosition={pinnedPosition}
        sectionIndex={indexInSection}
        sectionLength={sectionLength}
-        gridHasScrollX={dimensions.hasScrollX}
+        dimensions={dimensions}
+        {...slotProps?.cell}


Destructuring in the middle creates 3 objects (_extends({ a: 1}, slotProps.cell, { b: 2 })).

romgrk · 2024-03-06T12:53:07Z

packages/x-data-grid/src/components/cell/GridCell.tsx

+
+    const cellStyle: React.CSSProperties =
+      height !== dimensions.rowHeight
+        ? {
+            '--width': `${width}px`,
+            '--height': typeof height === 'number' ? `${height}px` : height,
+            ...styleProp,
+          }
+        : {
+            '--width': `${width}px`,
+            ...styleProp,
+          };


Avoid setting --height unless required. .setAttribute is one of our highest costs.

Do we even need --height here? It seems to be always set to rowHeight:

mui-x/packages/x-data-grid/src/components/GridRow.tsx

Line 423 in 4e5c087

height={rowHeight}

romgrk · 2024-03-06T12:54:07Z

packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts

-interface GridPipeGroupCache {
-  processors: Map<string, GridPipeProcessor<any> | null>;
+type Cache = {
+  [G in GridPipeProcessorGroup]?: GroupCache;
+};
+
+type GroupCache = {
+  processors: Map<string, GridPipeProcessor<any>>;
+  processorsAsArray: GridPipeProcessor<any>[];


Small refactor along with the optimization, the signal-to-noise ratio is high with the long names & prefixes everywhere. This is internal, no need to add the grid prefix.

romgrk · 2024-03-06T12:55:53Z

packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts

-    const preProcessors = Array.from(processorsCache.current[group]!.processors.values());
-    return preProcessors.reduce((acc, preProcessor) => {
-      if (!preProcessor) {
-        return acc;
-      }
-
-      return preProcessor(acc, context);
-    }, value);
+    const processors = cache.current[group]!.processorsAsArray;
+    let result = value;
+    for (let i = 0; i < processors.length; i += 1) {
+      result = processors[i](result, context);
+    }
+    return result;


This block is expensive. Map -> Iterator object -> Array.from() -> array.reduce is costly when this is run 2x for each cell.

romgrk · 2024-03-06T12:58:09Z

packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts

-      const value = apiRef.current.getCellValue(id, field);
      const row = apiRef.current.getRow(id);
      const rowNode = apiRef.current.getRowNode(id);

      if (!row || !rowNode) {
        throw new MissingRowIdError(`No row with id #${id} found`);
      }

+      const rawValue = row[colDef.field];
+      const value = colDef.valueGetter
+        ? colDef.valueGetter(rawValue as never, row, colDef, apiRef)
+        : rawValue;


.getCellValue fetches row and rowNode again but we already have them here, and the pattern rowsById[rowId] is expensive when there is a large number of entries.

romgrk · 2024-03-06T12:59:25Z

packages/x-data-grid/src/utils/createSelector.ts

-    const { cache } = cacheContainer;
+    const cacheArgsInit = cache.get(cacheKey);
+    const cacheArgs = cacheArgsInit ?? new Map();
+    const cacheFn = cacheArgs?.get(args);

-    if (cache.get(cacheKey) && cache.get(cacheKey)?.get(args)) {
+    if (cacheArgs && cacheFn) {
      // We pass the cache key because the called selector might have as
      // dependency another selector created with this `createSelector`.
-      return cache.get(cacheKey)?.get(args)(state, cacheKey);
+      return cacheFn(state, cacheKey);
    }


We're doing map.get 4 times but there are only 2 levels of depth. This is called very often.

packages/x-data-grid/src/utils/createSelector.ts

packages/x-data-grid-pro/src/components/GridPinnedRows.tsx

cherniavskii · 2024-03-07T12:16:31Z

packages/x-data-grid/src/components/cell/GridCell.tsx

+
+    const cellStyle: React.CSSProperties =
+      height !== dimensions.rowHeight
+        ? {
+            '--width': `${width}px`,
+            '--height': typeof height === 'number' ? `${height}px` : height,
+            ...styleProp,
+          }
+        : {
+            '--width': `${width}px`,
+            ...styleProp,
+          };


Do we even need --height here? It seems to be always set to rowHeight:

mui-x/packages/x-data-grid/src/components/GridRow.tsx

Line 423 in 4e5c087

height={rowHeight}

packages/x-data-grid/src/utils/createSelector.ts

romgrk · 2024-03-07T14:21:14Z

I've addressed the comments. The failing test is a flaky datepicker test. Approved?

cherniavskii

🎉

romgrk added the component: data grid This is the name of the generic UI component, not the React module! label Mar 6, 2024

romgrk commented Mar 6, 2024

View reviewed changes

packages/x-data-grid/src/utils/createSelector.ts Show resolved Hide resolved

romgrk requested review from cherniavskii and MBilalShafi March 6, 2024 12:59

romgrk marked this pull request as ready for review March 6, 2024 12:59

cherniavskii reviewed Mar 7, 2024

View reviewed changes

romgrk added 11 commits March 7, 2024 08:54

draft: small optimizations

01e0109

perf: pipe processors iterator

643b1eb

update

ad231e4

update

df217fa

perf: selector memoized function

7435c0b

lint

7dcd223

lint

611525b

lint

b1e494a

lint

34ca9f7

lint

0f46d68

lint

29d94da

romgrk force-pushed the perf-small-opts branch from 91700c2 to 29d94da Compare March 7, 2024 13:54

fix: tests

90af7a5

cherniavskii approved these changes Mar 7, 2024

View reviewed changes

romgrk merged commit f68925c into mui:next Mar 7, 2024
14 of 15 checks passed

romgrk deleted the perf-small-opts branch March 7, 2024 15:00

thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024

[DataGrid] Performance: small optimizations (mui#12346)

8005261

oliviertassinari added the performance label Dec 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Performance: small optimizations #12346

[DataGrid] Performance: small optimizations #12346

romgrk commented Mar 6, 2024 •

edited

Loading

mui-bot commented Mar 6, 2024 •

edited

Loading

romgrk Mar 6, 2024

romgrk Mar 6, 2024

cherniavskii Mar 7, 2024

romgrk Mar 6, 2024 •

edited

Loading

romgrk Mar 6, 2024

romgrk Mar 6, 2024

romgrk Mar 6, 2024

cherniavskii Mar 7, 2024

romgrk commented Mar 7, 2024

cherniavskii left a comment

[DataGrid] Performance: small optimizations #12346

[DataGrid] Performance: small optimizations #12346

Conversation

romgrk commented Mar 6, 2024 • edited Loading

mui-bot commented Mar 6, 2024 • edited Loading

romgrk Mar 6, 2024

Choose a reason for hiding this comment

romgrk Mar 6, 2024

Choose a reason for hiding this comment

cherniavskii Mar 7, 2024

Choose a reason for hiding this comment

romgrk Mar 6, 2024 • edited Loading

Choose a reason for hiding this comment

romgrk Mar 6, 2024

Choose a reason for hiding this comment

romgrk Mar 6, 2024

Choose a reason for hiding this comment

romgrk Mar 6, 2024

Choose a reason for hiding this comment

cherniavskii Mar 7, 2024

Choose a reason for hiding this comment

romgrk commented Mar 7, 2024

cherniavskii left a comment

Choose a reason for hiding this comment

romgrk commented Mar 6, 2024 •

edited

Loading

mui-bot commented Mar 6, 2024 •

edited

Loading

romgrk Mar 6, 2024 •

edited

Loading