perf: 优化开启多行文本时的布局性能 (#2734)

* perf: 优化开启多行文本时的布局性能 * test: 增加 benchmark * perf: 优化明细表性能 * fix: 修复类型问题和错误定义 * fix: 重命名 * test: 增加 --detectOpenHandles * chore: 更新版本
antvis · May 24, 2024 · 388157c · 388157c
1 parent 782a2fc
commit 388157c
Show file tree

Hide file tree

Showing 28 changed files with 1,009 additions and 177 deletions.
diff --git a/packages/s2-core/__tests__/benchmark/pivot-sheet-spec.ts b/packages/s2-core/__tests__/benchmark/pivot-sheet-spec.ts
@@ -1,10 +1,14 @@
 /* eslint-disable no-console */
-import { PivotSheet, S2DataConfig } from '../../src';
+import { PivotSheet, S2DataConfig, type S2Options } from '../../src';
 import { generateRawData, getContainer } from '../util/helpers';
 
-async function measurePivotSheetRender(s2DataCfg: S2DataConfig, title) {
+async function measurePivotSheetRender(
+  title: string,
+  s2DataCfg: S2DataConfig,
+  s2Options?: S2Options,
+) {
   performance.mark('startTask');
-  const s2 = new PivotSheet(getContainer(), s2DataCfg, null);
+  const s2 = new PivotSheet(getContainer(), s2DataCfg, s2Options || null);
 
   await s2.render();
   performance.mark('endTask');
@@ -40,8 +44,8 @@ describe('pivot sheet benchmark', () => {
       };
 
       await measurePivotSheetRender(
-        s2DataCfg,
         '🚀 10 * 100 for single measure',
+        s2DataCfg,
       );
     });
 
@@ -60,8 +64,8 @@ describe('pivot sheet benchmark', () => {
       };
 
       await measurePivotSheetRender(
-        s2DataCfg,
         '🚀 100 * 100 for single measure',
+        s2DataCfg,
       );
     });
 
@@ -80,8 +84,8 @@ describe('pivot sheet benchmark', () => {
       };
 
       await measurePivotSheetRender(
-        s2DataCfg,
         '🚀 1000 * 100 for single measure',
+        s2DataCfg,
       );
     });
 
@@ -100,8 +104,8 @@ describe('pivot sheet benchmark', () => {
       };
 
       await measurePivotSheetRender(
-        s2DataCfg,
         '🚀 1000 * 1000 for single measure',
+        s2DataCfg,
       );
     });
   });
@@ -130,7 +134,7 @@ describe('pivot sheet benchmark', () => {
         ),
       };
 
-      await measurePivotSheetRender(s2DataCfg, '🚀 10 * 100 for multi measure');
+      await measurePivotSheetRender('🚀 10 * 100 for multi measure', s2DataCfg);
     });
 
     test('should render 100 * 100', async () => {
@@ -148,8 +152,8 @@ describe('pivot sheet benchmark', () => {
       };
 
       await measurePivotSheetRender(
-        s2DataCfg,
         '🚀 100 * 100 for multi measure',
+        s2DataCfg,
       );
     });
 
@@ -168,8 +172,8 @@ describe('pivot sheet benchmark', () => {
       };
 
       await measurePivotSheetRender(
-        s2DataCfg,
         '🚀 1000 * 100 for multi measure',
+        s2DataCfg,
       );
     });
 
@@ -188,8 +192,78 @@ describe('pivot sheet benchmark', () => {
       };
 
       await measurePivotSheetRender(
-        s2DataCfg,
         '🚀 1000 * 1000 for multi measure',
+        s2DataCfg,
+      );
+    });
+  });
+
+  describe('multi line text', () => {
+    const baseDataCfg: S2DataConfig = {
+      fields: {
+        rows: ['province', 'city'],
+        columns: ['type', 'subType'],
+        values: ['number'],
+      },
+      data: [],
+    };
+
+    const s2Options: S2Options = {
+      style: {
+        cornerCell: {
+          maxLines: 3,
+        },
+        rowCell: {
+          maxLines: 3,
+        },
+        colCell: {
+          maxLines: 3,
+        },
+        dataCell: {
+          maxLines: 3,
+        },
+      },
+    };
+
+    test('should render 100 * 100', async () => {
+      const s2DataCfg: S2DataConfig = {
+        ...baseDataCfg,
+        data: generateRawData(
+          [
+            ['province', 10],
+            ['city', 10],
+            ['type', 10],
+            ['subType', 10],
+          ],
+          ['number'],
+        ),
+      };
+
+      await measurePivotSheetRender(
+        '🚀 100 * 100 for single measure',
+        s2DataCfg,
+        s2Options,
+      );
+    });
+
+    test('should render 1000 * 1000', async () => {
+      const s2DataCfg: S2DataConfig = {
+        ...baseDataCfg,
+        data: generateRawData(
+          [
+            ['province', 100],
+            ['city', 10],
+            ['type', 100],
+            ['subType', 10],
+          ],
+          ['number'],
+        ),
+      };
+
+      await measurePivotSheetRender(
+        '🚀 1000 * 1000 for single measure',
+        s2DataCfg,
+        s2Options,
       );
     });
   });

diff --git a/packages/s2-core/__tests__/benchmark/table-sheet-spec.ts b/packages/s2-core/__tests__/benchmark/table-sheet-spec.ts
@@ -1,10 +1,14 @@
 /* eslint-disable no-console */
-import { S2DataConfig, TableSheet } from '../../src';
+import { S2DataConfig, TableSheet, type S2Options } from '../../src';
 import { generateRawData, getContainer } from '../util/helpers';
 
-async function measureTableSheetRender(s2DataCfg: S2DataConfig, title) {
+async function measureTableSheetRender(
+  title: string,
+  s2DataCfg: S2DataConfig,
+  s2Options?: S2Options,
+) {
   performance.mark('startTask');
-  const s2 = new TableSheet(getContainer(), s2DataCfg, null);
+  const s2 = new TableSheet(getContainer(), s2DataCfg, s2Options || null);
 
   await s2.render();
   performance.mark('endTask');
@@ -36,7 +40,7 @@ describe('table sheet benchmark', () => {
       ),
     };
 
-    await measureTableSheetRender(s2DataCfg, '🚀 1000 items');
+    await measureTableSheetRender('🚀 1000 items', s2DataCfg);
   });
 
   test('should render 10000 items', async () => {
@@ -53,7 +57,7 @@ describe('table sheet benchmark', () => {
       ),
     };
 
-    await measureTableSheetRender(s2DataCfg, '🚀 10000 items');
+    await measureTableSheetRender('🚀 10000 items', s2DataCfg);
   });
 
   test('should render 10_0000 items', async () => {
@@ -70,7 +74,7 @@ describe('table sheet benchmark', () => {
       ),
     };
 
-    await measureTableSheetRender(s2DataCfg, '🚀 10_0000 items');
+    await measureTableSheetRender('🚀 10_0000 items', s2DataCfg);
   });
 
   test('should render 100_0000 items', async () => {
@@ -87,6 +91,53 @@ describe('table sheet benchmark', () => {
       ),
     };
 
-    await measureTableSheetRender(s2DataCfg, '🚀 100_0000 items');
+    await measureTableSheetRender('🚀 100_0000 items', s2DataCfg);
+  });
+
+  describe('multi line text', () => {
+    const s2Options: S2Options = {
+      style: {
+        colCell: {
+          maxLines: 3,
+        },
+        dataCell: {
+          maxLines: 3,
+        },
+      },
+    };
+
+    test('should render 10_0000 items', async () => {
+      const s2DataCfg: S2DataConfig = {
+        ...baseDataCfg,
+        data: generateRawData(
+          [
+            ['province', 100],
+            ['city', 10],
+            ['type', 10],
+            ['subType', 10],
+          ],
+          ['number'],
+        ),
+      };
+
+      await measureTableSheetRender('🚀 10_0000 items', s2DataCfg, s2Options);
+    });
+
+    test('should render 100_0000 items', async () => {
+      const s2DataCfg: S2DataConfig = {
+        ...baseDataCfg,
+        data: generateRawData(
+          [
+            ['province', 100],
+            ['city', 10],
+            ['type', 100],
+            ['subType', 10],
+          ],
+          ['number'],
+        ),
+      };
+
+      await measureTableSheetRender('🚀 100_0000 items', s2DataCfg, s2Options);
+    });
   });
 });