Merge pull request #1648 from ghiscoding/chore/perf-lower-render-thro…

…ttling perf: decrease virtual scroll render throttling to 10ms
ghiscoding · Aug 23, 2024 · 7b01cc2 · 7b01cc2
2 parents 559d7de + d76b738
commit 7b01cc2
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.html b/examples/vite-demo-vanilla-bundle/src/examples/example03.html
@@ -22,8 +22,8 @@ <h3 class="title is-3">
     <button class="button is-small" data-test="add-500-rows-btn" onclick.delegate="loadData(500)">
       500 rows
     </button>
-    <button class="button is-small" data-test="add-50k-rows-btn" onclick.delegate="loadData(50000)">
-      50k rows
+    <button class="button is-small" data-test="add-500k-rows-btn" onclick.delegate="loadData(500000)">
+      500k rows
     </button>
     <button class="button is-small" data-test="clear-grouping-btn" onclick.delegate="clearGrouping()">
       <span class="mdi mdi-playlist-remove"></span>

diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts
@@ -275,7 +275,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     editorCellNavOnLRKeys: false,
     enableMouseWheelScrollHandler: true,
     doPaging: true,
-    scrollRenderThrottling: 50,
+    scrollRenderThrottling: 10,
     suppressCssChangesOnHiddenInit: false,
     ffMaxSupportedCssHeight: 6000000,
     maxSupportedCssHeight: 1000000000,

diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts
@@ -551,7 +551,10 @@ export interface GridOption<C extends Column = Column> {
   /** Do we want to force fit columns in the grid at all time? */
   forceFitColumns?: boolean;
 
-  /** Defaults to false, force synchronous scrolling */
+  /**
+   * Defaults to false, force synchronous scrolling without throttling the UI render when scrolling.
+   * Note: it might be risky to disable this option on large dataset, use at your own risk
+   */
   forceSyncScrolling?: boolean;
 
   /** Formatter class factory */
@@ -739,7 +742,7 @@ export interface GridOption<C extends Column = Column> {
    */
   sanitizer?: (dirtyHtml: string) => string | TrustedHTML;
 
-  /** Defaults to 50, render throttling when scrolling large dataset */
+  /** Defaults to 10(ms), render throttling when using virtual scroll on large dataset */
   scrollRenderThrottling?: number;
 
   /** CSS class name used when cell is selected */

diff --git a/test/cypress/e2e/example03.cy.ts b/test/cypress/e2e/example03.cy.ts
@@ -84,7 +84,7 @@ describe('Example 03 - Draggable Grouping', () => {
 
   describe('Grouping tests', () => {
     it('should "Group by Duration & sort groups by value" then Collapse All and expect only group titles', () => {
-      cy.get('[data-test="add-50k-rows-btn"]').click();
+      cy.get('[data-test="add-500k-rows-btn"]').click();
       cy.get('[data-test="group-duration-sort-value-btn"]').click();
       cy.get('[data-test="collapse-all-btn"]').click();
 
@@ -124,7 +124,7 @@ describe('Example 03 - Draggable Grouping', () => {
     });
 
     it('should click on Expand All columns and expect 1st row as grouping title and 2nd row as a regular row', () => {
-      cy.get('[data-test="add-50k-rows-btn"]').click();
+      cy.get('[data-test="add-500k-rows-btn"]').click();
       cy.get('[data-test="group-duration-sort-value-btn"]').click();
       cy.get('[data-test="expand-all-btn"]').click();