From 72f02cb93365bd71ee9d46cbf411a7488d7f8620 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Wed, 16 Sep 2026 11:52:15 +0800
Subject: [PATCH 1/8] perf: reuse complex cell graphics during scrolling

Reduce complex-cell reconstruction costs while preserving fallback behavior for special cells.

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
---
 .../complex-cell-fast-update.test.ts          | 127 +++++++
 .../debug/issue-5308-scroll-performance.ts    | 316 ++++++++++++++++++
 .../issue-5308-scroll-performance.html        |  17 +
 packages/vtable/examples/menu.ts              |   4 +
 .../scenegraph/group-creater/cell-helper.ts   | 226 +++++++++++--
 .../group-creater/cell-type/button-cell.ts    |  47 ++-
 .../group-creater/cell-type/checkbox-cell.ts  |  39 ++-
 .../cell-type/progress-bar-cell.ts            | 110 ++++--
 .../group-creater/cell-type/switch-cell.ts    |  39 ++-
 9 files changed, 843 insertions(+), 82 deletions(-)
 create mode 100644 packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
 create mode 100644 packages/vtable/examples/debug/issue-5308-scroll-performance.ts
 create mode 100644 packages/vtable/examples/issue-5308-scroll-performance.html

diff --git a/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts b/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
new file mode 100644
index 0000000000..fd749ad76a
--- /dev/null
+++ b/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
@@ -0,0 +1,127 @@
+// @ts-nocheck
+import { ListTable } from '../../src';
+import { createDiv } from '../dom';
+
+global.__VERSION__ = 'none';
+
+describe('complex cell fast update', () => {
+  test('reuses cell groups and component instances', () => {
+    const container = createDiv();
+    container.style.width = '1000px';
+    container.style.height = '500px';
+
+    const table = new ListTable(container, {
+      records: [
+        {
+          checkbox: { text: 'Ready', checked: true, disable: false },
+          switch: { text: '', checked: false, disable: false },
+          button: 'Open',
+          progress: 50
+        }
+      ],
+      columns: [
+        { field: 'checkbox', cellType: 'checkbox', width: 160 },
+        { field: 'switch', cellType: 'switch', width: 160 },
+        { field: 'button', cellType: 'button', width: 160 },
+        { field: 'progress', cellType: 'progressbar', width: 160, min: 0, max: 100 }
+      ],
+      defaultRowHeight: 40
+    });
+
+    const componentNames = ['checkbox', 'switch', 'button', 'progress-bar'];
+    const cellGroups = componentNames.map((_, col) => table.scenegraph.getCell(col, 1));
+    const components = cellGroups.map((cellGroup, col) => cellGroup.getChildByName(componentNames[col]));
+    const progressText = cellGroups[3].getChildByName('text');
+    const progressMain = components[3].getChildByName('progress-bar-main');
+
+    table.updateRecords(
+      [
+        {
+          checkbox: { text: 'Disabled', checked: false, disable: true },
+          switch: { text: '', checked: true, disable: true },
+          button: 'Close',
+          progress: 75
+        }
+      ],
+      [0]
+    );
+
+    cellGroups.forEach((cellGroup, col) => {
+      expect(table.scenegraph.getCell(col, 1)).toBe(cellGroup);
+      expect(cellGroup.getChildByName(componentNames[col])).toBe(components[col]);
+    });
+    expect(components[3].getChildByName('progress-bar-main')).toBe(progressMain);
+    expect(cellGroups[3].getChildByName('text')).toBe(progressText);
+
+    table.updateRecords(
+      [
+        {
+          checkbox: { text: 'Ready', checked: false, disable: false },
+          switch: { text: '', checked: false, disable: false },
+          button: 'Open',
+          progress: 25
+        }
+      ],
+      [0]
+    );
+    cellGroups.forEach((cellGroup, col) => {
+      expect(table.scenegraph.getCell(col, 1)).toBe(cellGroup);
+      expect(cellGroup.getChildByName(componentNames[col])).toBe(components[col]);
+    });
+
+    table.release();
+  });
+
+  test('reuses progress graphics and removes stale mode graphics', () => {
+    const container = createDiv();
+    container.style.width = '400px';
+    container.style.height = '300px';
+
+    const table = new ListTable(container, {
+      records: [{ progress: 25, mode: 'default', show: true, background: false }],
+      columns: [
+        {
+          field: 'progress',
+          cellType: 'progressbar',
+          width: 160,
+          min: -100,
+          max: 100,
+          barType: args => args.table.getCellOriginRecord(args.col, args.row).mode,
+          style: {
+            barBgColor: args => (args.table.getCellOriginRecord(args.col, args.row).background ? '#eee' : undefined),
+            showBar: args => args.table.getCellOriginRecord(args.col, args.row).show
+          }
+        }
+      ],
+      defaultRowHeight: 40
+    });
+
+    const progressGroup = table.scenegraph.getCell(0, 1).getChildByName('progress-bar');
+    const main = progressGroup.getChildByName('progress-bar-main');
+    expect(progressGroup.getChildByName('progress-bar-background')).toBeNull();
+
+    table.updateRecords([{ progress: 50, mode: 'default', show: true, background: true }], [0]);
+    const background = progressGroup.getChildByName('progress-bar-background');
+    expect(progressGroup.firstChild).toBe(background);
+    expect(progressGroup.getChildByName('progress-bar-main')).toBe(main);
+
+    table.updateRecords([{ progress: -50, mode: 'negative', show: true, background: true }], [0]);
+    expect(progressGroup.getChildByName('progress-bar-main')).toBeNull();
+    const negative = progressGroup.getChildByName('progress-bar-negative');
+    const positive = progressGroup.getChildByName('progress-bar-positive');
+    const axis = progressGroup.getChildByName('progress-bar-axis');
+
+    table.updateRecords([{ progress: 50, mode: 'negative', show: true, background: true }], [0]);
+    expect(progressGroup.getChildByName('progress-bar-negative')).toBe(negative);
+    expect(progressGroup.getChildByName('progress-bar-positive')).toBe(positive);
+    expect(progressGroup.getChildByName('progress-bar-axis')).toBe(axis);
+
+    table.updateRecords([{ progress: 50, mode: 'negative', show: false, background: true }], [0]);
+    expect(progressGroup.childrenCount).toBe(0);
+
+    table.updateRecords([{ progress: 'invalid', mode: 'default', show: true, background: true }], [0]);
+    expect(progressGroup.childrenCount).toBe(0);
+
+    table.release();
+  });
+});
diff --git a/packages/vtable/examples/debug/issue-5308-scroll-performance.ts b/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
new file mode 100644
index 0000000000..aefb6378a8
--- /dev/null
+++ b/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
@@ -0,0 +1,316 @@
+import * as VTable from '../../src';
+
+const CONTAINER_ID = 'vTable';
+const numberFormatter = new Intl.NumberFormat('zh-CN');
+
+type PerfSample = {
+  frameGaps: number[];
+  longTasks: number[];
+  scrollEvents: number;
+  cellUpdates: number;
+  cellUpdatesByType: Record<string, number>;
+};
+
+declare global {
+  interface Window {
+    issue5308Init: {
+      rows: number;
+      columns: number;
+      recordsDuration: number;
+      tableDuration?: number;
+      ready: boolean;
+    };
+    issue5308Result?: {
+      elapsed: number;
+      jumpDuration?: number;
+      frameGaps: number[];
+      longTasks: number[];
+      scrollEvents: number;
+      cellUpdates: number;
+      cellUpdatesByType: Record<string, number>;
+    };
+    issue5308Perf: PerfSample & {
+      reset: () => void;
+      table: VTable.ListTable;
+    };
+  }
+}
+
+function createRecords(rowCount: number) {
+  const regions = ['华东', '华北', '华南', '西南', '东北'];
+  const statuses = ['进行中', '已完成', '待确认', '已暂停'];
+
+  return Array.from({ length: rowCount }, (_, index) => ({
+    id: index + 1,
+    account: `客户 ${String(index + 1).padStart(6, '0')}`,
+    region: regions[index % regions.length],
+    status: statuses[index % statuses.length],
+    amount: (index * 7919) % 100000,
+    updatedAt: `2026-${String((index % 12) + 1).padStart(2, '0')}-${String((index % 28) + 1).padStart(2, '0')}`
+  }));
+}
+
+function createColumns(columnCount: number, complexCells: boolean): VTable.ColumnsDefine {
+  const columns: VTable.ColumnsDefine = [
+    { field: 'id', title: '序号', width: 88, style: { textAlign: 'right' } },
+    { field: 'account', title: '客户', width: 156 }
+  ];
+
+  for (let index = 2; index < columnCount; index++) {
+    const metricIndex = index - 1;
+    if (complexCells && metricIndex <= 10) {
+      columns.push({
+        field: `checkbox_${metricIndex}`,
+        title: `勾选 ${metricIndex}`,
+        width: 220,
+        cellType: 'checkbox',
+        checked: args => (args.row + metricIndex) % 3 === 0,
+        style: { textAlign: 'center', checkboxStyle: { checkedFill: '#1976d2' } }
+      });
+      continue;
+    }
+    if (complexCells && metricIndex <= 20) {
+      columns.push({
+        field: `switch_${metricIndex - 10}`,
+        title: `开关 ${metricIndex - 10}`,
+        width: 230,
+        cellType: 'switch',
+        checked: args => (args.row + metricIndex) % 2 === 0,
+        checkedText: '开',
+        uncheckedText: '关',
+        style: {
+          textAlign: 'center',
+          color: '#fff',
+          switchStyle: { checkedFill: '#14804a' }
+        }
+      });
+      continue;
+    }
+    if (complexCells && metricIndex <= 30) {
+      columns.push({
+        field: `button_${metricIndex - 20}`,
+        title: `操作 ${metricIndex - 20}`,
+        width: 220,
+        cellType: 'button',
+        text: args => ((args.row + metricIndex) % 2 === 0 ? '查看' : '处理'),
+        style: {
+          textAlign: 'center',
+          color: '#135fbd',
+          buttonStyle: {
+            buttonColor: '#eef5ff',
+            buttonBorderColor: '#a9c8ec',
+            buttonHoverColor: '#dcecff',
+            buttonHoverBorderColor: '#1976d2',
+            buttonBorderRadius: 4,
+            buttonPadding: 6
+          }
+        }
+      });
+      continue;
+    }
+    if (complexCells && metricIndex <= 40) {
+      columns.push({
+        field: 'amount',
+        title: `进度 ${metricIndex - 30}`,
+        width: 240,
+        cellType: 'progressbar',
+        min: 0,
+        max: 100000,
+        fieldFormat: record => `${Math.round(record.amount / 1000)}%`,
+        style: {
+          textAlign: 'right',
+          barHeight: 7,
+          barBottom: 5,
+          barColor: metricIndex % 2 === 0 ? '#1976d2' : '#14804a',
+          barBgColor: '#e7ebef'
+        }
+      });
+      continue;
+    }
+    columns.push({
+      field: `metric_${metricIndex}`,
+      title: `指标 ${metricIndex}`,
+      width: index % 7 === 0 ? 180 : 170,
+      fieldFormat: record => {
+        switch (index % 5) {
+          case 0:
+            return record.region;
+          case 1:
+            return record.status;
+          case 2:
+            return numberFormatter.format(record.amount + metricIndex * 17);
+          case 3:
+            return record.updatedAt;
+          default:
+            return `${record.id}-${metricIndex}`;
+        }
+      },
+      style: { textAlign: index % 5 === 2 ? 'right' : 'left' }
+    });
+  }
+
+  return columns;
+}
+
+export function createTable() {
+  const params = new URLSearchParams(window.location.search);
+  const rowCount = Number(params.get('rows')) || 100000;
+  const columnCount = Number(params.get('cols')) || 120;
+  const complexCells = params.get('cells') !== 'text';
+  const frozen = params.get('frozen') !== 'off';
+  const rightFrozen = frozen && params.get('rightFrozen') !== 'off';
+  const bottomFrozen = frozen && params.get('bottomFrozen') !== 'off';
+  const crossHighlight = params.get('cross') !== 'off';
+  const samples: PerfSample = {
+    frameGaps: [],
+    longTasks: [],
+    scrollEvents: 0,
+    cellUpdates: 0,
+    cellUpdatesByType: {}
+  };
+  let lastFrame = performance.now();
+
+  const recordFrame = (time: number) => {
+    const gap = time - lastFrame;
+    lastFrame = time;
+    if (gap > 20) {
+      samples.frameGaps.push(gap);
+      if (samples.frameGaps.length > 500) {
+        samples.frameGaps.shift();
+      }
+    }
+    requestAnimationFrame(recordFrame);
+  };
+  requestAnimationFrame(recordFrame);
+
+  if ('PerformanceObserver' in window) {
+    new PerformanceObserver(list => {
+      list.getEntries().forEach(entry => samples.longTasks.push(entry.duration));
+    }).observe({ entryTypes: ['longtask'] });
+  }
+
+  const recordsStart = performance.now();
+  const records = createRecords(rowCount);
+  window.issue5308Init = {
+    rows: rowCount,
+    columns: columnCount,
+    recordsDuration: performance.now() - recordsStart,
+    ready: false
+  };
+
+  const tableStart = performance.now();
+  const table = new VTable.ListTable(document.getElementById(CONTAINER_ID)!, {
+    columns: createColumns(columnCount, complexCells),
+    records,
+    widthMode: 'standard',
+    defaultRowHeight: 36,
+    defaultHeaderRowHeight: 40,
+    frozenColCount: frozen ? 2 : 0,
+    rightFrozenColCount: rightFrozen ? 2 : 0,
+    frozenRowCount: frozen ? 3 : 0,
+    bottomFrozenRowCount: bottomFrozen ? 2 : 0,
+    hover: { highlightMode: crossHighlight ? 'cross' : 'row' },
+    select: { highlightMode: crossHighlight ? 'cross' : 'row' },
+    theme: VTable.themes.ARCO.extends({
+      headerStyle: {
+        bgColor: '#eef2f6',
+        color: '#263340',
+        fontWeight: 600,
+        borderColor: '#d6dce3'
+      },
+      bodyStyle: { color: '#344251', borderColor: '#e1e5e9' },
+      frameStyle: { borderColor: '#bcc5cf', borderLineWidth: 1 },
+      scrollStyle: { visible: 'always', width: 9, hoverOn: true }
+    })
+  });
+  window.issue5308Init.tableDuration = performance.now() - tableStart;
+  window.issue5308Init.ready = true;
+
+  const scenegraph = table.scenegraph as typeof table.scenegraph & {
+    updateCellContent: (col: number, row: number, forceFastUpdate?: boolean) => unknown;
+  };
+  const updateCellContent = scenegraph.updateCellContent.bind(scenegraph);
+  scenegraph.updateCellContent = (col, row, forceFastUpdate) => {
+    const type = complexCells
+      ? col < 2
+        ? 'text'
+        : col <= 11
+        ? 'checkbox'
+        : col <= 21
+        ? 'switch'
+        : col <= 31
+        ? 'button'
+        : col <= 41
+        ? 'progressbar'
+        : 'text'
+      : 'text';
+    samples.cellUpdates++;
+    samples.cellUpdatesByType[type] = (samples.cellUpdatesByType[type] ?? 0) + 1;
+    return updateCellContent(col, row, forceFastUpdate);
+  };
+
+  table.on(VTable.ListTable.EVENT_TYPE.SCROLL, () => {
+    samples.scrollEvents++;
+  });
+
+  window.issue5308Perf = Object.assign(samples, {
+    table,
+    reset: () => {
+      samples.frameGaps.length = 0;
+      samples.longTasks.length = 0;
+      samples.scrollEvents = 0;
+      samples.cellUpdates = 0;
+      samples.cellUpdatesByType = {};
+    }
+  });
+  window.tableInstance = table;
+
+  if (params.get('jump') === '1') {
+    requestAnimationFrame(() => {
+      window.issue5308Perf.reset();
+      const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
+      const start = performance.now();
+      table.setScrollTop(maxScrollTop / 2);
+      const jumpDuration = performance.now() - start;
+      window.issue5308Result = {
+        elapsed: jumpDuration,
+        jumpDuration,
+        frameGaps: [...samples.frameGaps],
+        longTasks: [...samples.longTasks],
+        scrollEvents: samples.scrollEvents,
+        cellUpdates: samples.cellUpdates,
+        cellUpdatesByType: { ...samples.cellUpdatesByType }
+      };
+    });
+  }
+
+  if (params.get('auto') === '1') {
+    samples.frameGaps.length = 0;
+    samples.longTasks.length = 0;
+    samples.scrollEvents = 0;
+    samples.cellUpdates = 0;
+    samples.cellUpdatesByType = {};
+    const start = performance.now();
+    const duration = 2000;
+    const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
+    const scroll = (time: number) => {
+      const progress = Math.min(1, (time - start) / duration);
+      table.setScrollTop(maxScrollTop * progress);
+      if (progress < 1) {
+        requestAnimationFrame(scroll);
+        return;
+      }
+      requestAnimationFrame(() => {
+        window.issue5308Result = {
+          elapsed: performance.now() - start,
+          frameGaps: [...samples.frameGaps],
+          longTasks: [...samples.longTasks],
+          scrollEvents: samples.scrollEvents,
+          cellUpdates: samples.cellUpdates,
+          cellUpdatesByType: { ...samples.cellUpdatesByType }
+        };
+      });
+    };
+    requestAnimationFrame(scroll);
+  }
+}
diff --git a/packages/vtable/examples/issue-5308-scroll-performance.html b/packages/vtable/examples/issue-5308-scroll-performance.html
new file mode 100644
index 0000000000..1cf8ae982f
--- /dev/null
+++ b/packages/vtable/examples/issue-5308-scroll-performance.html
@@ -0,0 +1,17 @@
+<div id="vTable"></div>
+
+<style>
+  html,
+  body,
+  #vTable {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+</style>
+
+<script type="module">
+  import { createTable } from './debug/issue-5308-scroll-performance';
+
+  createTable();
+</script>
diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts
index 6a43a63cee..be4a10ab0d 100644
--- a/packages/vtable/examples/menu.ts
+++ b/packages/vtable/examples/menu.ts
@@ -66,6 +66,10 @@ export const menus = [
         path: 'debug',
         name: 'issue-5278-set-records-header-blank'
       },
+      {
+        path: 'debug',
+        name: 'issue-5308-scroll-performance'
+      },
       {
         path: 'debug',
         name: 'issue-5277-frozen-row-border'
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
index bdc4cf3e64..950f0c13c3 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -90,10 +90,11 @@ export function createCell(
     elementsGroup?: VGroup;
     renderDefault: boolean;
   },
-  cellValue?: any
+  cellValue?: any,
+  reusableCellGroup?: Group
 ): Group {
   let isAsync = false;
-  let cellGroup: Group;
+  let cellGroup = reusableCellGroup;
   const hasCellValue = arguments.length >= 19;
   let renderValue = hasCellValue ? cellValue : value;
   if (isPromise(value)) {
@@ -366,31 +367,48 @@ export function createCell(
     );
     const style = table._getCellStyle(col, row) as ProgressBarStyle;
     const dataValue = table.getCellOriginValue(col, row);
-    // 创建基础文字单元格
-    const createTextCellGroup = Factory.getFunction('createTextCellGroup') as CreateTextCellGroup;
-    cellGroup = createTextCellGroup(
-      table,
-      value,
-      columnGroup,
-      0,
-      y,
-      col,
-      row,
-      colWidth,
-      cellWidth,
-      cellHeight,
-      padding,
-      textAlign,
-      textBaseline,
-      mayHaveIcon,
-      customElementsGroup,
-      renderDefault,
-      cellTheme,
-      range,
-      isAsync
-    );
+    if (cellGroup) {
+      updateProgressBarTextCellGroup(
+        cellGroup,
+        value,
+        col,
+        row,
+        cellWidth,
+        cellHeight,
+        padding,
+        textAlign,
+        textBaseline,
+        cellTheme,
+        table
+      );
+    } else {
+      // 创建基础文字单元格
+      const createTextCellGroup = Factory.getFunction('createTextCellGroup') as CreateTextCellGroup;
+      cellGroup = createTextCellGroup(
+        table,
+        value,
+        columnGroup,
+        0,
+        y,
+        col,
+        row,
+        colWidth,
+        cellWidth,
+        cellHeight,
+        padding,
+        textAlign,
+        textBaseline,
+        mayHaveIcon,
+        customElementsGroup,
+        renderDefault,
+        cellTheme,
+        range,
+        isAsync
+      );
+    }
 
     // 创建bar group
+    const oldProgressBarGroup = cellGroup.getChildByName('progress-bar') as Group;
     const createProgressBarCell = Factory.getFunction('createProgressBarCell') as CreateProgressBarCell;
     const progressBarGroup = createProgressBarCell(
       define as ProgressbarColumnDefine,
@@ -402,13 +420,16 @@ export function createCell(
       row,
       padding,
       table,
-      range
+      range,
+      oldProgressBarGroup
     );
     // 进度图插入到文字前，绘制在文字下
-    if (cellGroup.firstChild) {
-      cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
-    } else {
-      cellGroup.appendChild(progressBarGroup);
+    if (progressBarGroup !== oldProgressBarGroup) {
+      if (cellGroup.firstChild) {
+        cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild);
+      } else {
+        cellGroup.appendChild(progressBarGroup);
+      }
     }
   } else if (type === 'sparkline') {
     const createSparkLineCellGroup = Factory.getFunction('createSparkLineCellGroup') as CreateSparkLineCellGroup;
@@ -456,7 +477,7 @@ export function createCell(
     } else {
       const createCheckboxCellGroup = Factory.getFunction('createCheckboxCellGroup') as CreateCheckboxCellGroup;
       cellGroup = createCheckboxCellGroup(
-        null,
+        cellGroup ?? null,
         columnGroup,
         0,
         y,
@@ -530,7 +551,7 @@ export function createCell(
   } else if (type === 'switch') {
     const createSwitchCellGroup = Factory.getFunction('createSwitchCellGroup') as CreateSwitchCellGroup;
     cellGroup = createSwitchCellGroup(
-      null,
+      cellGroup ?? null,
       columnGroup,
       0,
       y,
@@ -553,7 +574,7 @@ export function createCell(
   } else if (type === 'button') {
     const createButtonCellGroup = Factory.getFunction('createButtonCellGroup') as CreateButtonCellGroup;
     cellGroup = createButtonCellGroup(
-      null,
+      cellGroup ?? null,
       columnGroup,
       0,
       y,
@@ -1017,6 +1038,86 @@ export function updateCell(
   return newCellGroup;
 }
 
+function updateProgressBarTextCellGroup(
+  cellGroup: Group,
+  value: any,
+  col: number,
+  row: number,
+  cellWidth: number,
+  cellHeight: number,
+  padding: [number, number, number, number],
+  textAlign: CanvasTextAlign,
+  textBaseline: CanvasTextBaseline,
+  cellTheme: IThemeSpec,
+  table: BaseTableAPI
+) {
+  const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
+  cellGroup.setAttributes({
+    width: cellWidth,
+    height: cellHeight,
+    lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+    fill: cellTheme?.group?.fill ?? undefined,
+    stroke: cellTheme?.group?.stroke ?? undefined,
+    strokeArrayWidth: strokeArrayWidth ?? undefined,
+    strokeArrayColor: (cellTheme?.group as any)?.strokeArrayColor ?? undefined,
+    cursor: (cellTheme?.group as any)?.cursor ?? undefined,
+    cornerRadius: cellTheme?.group?.cornerRadius ?? 0,
+    lineDash: cellTheme?.group?.lineDash ?? undefined,
+    lineCap: 'butt',
+    clip: true,
+    y: table.scenegraph.getCellGroupY(row)
+  } as any);
+  cellGroup.col = col;
+  cellGroup.row = row;
+  cellGroup.mergeStartCol = undefined;
+  cellGroup.mergeStartRow = undefined;
+  cellGroup.mergeEndCol = undefined;
+  cellGroup.mergeEndRow = undefined;
+
+  const textMark = cellGroup.getChildByName('text');
+  if (!textMark) {
+    return;
+  }
+
+  const cellStyle = table._getCellStyle(col, row);
+  const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
+  const { text: textArr, moreThanMaxCharacters } = breakString(value, table);
+  const hierarchyOffset = getHierarchyOffset(col, row, table);
+  const lineClamp = cellStyle.lineClamp;
+  let x = padding[3];
+  if (textAlign === 'center') {
+    x += (cellWidth - padding[1] - padding[3]) / 2;
+  } else if (textAlign === 'right') {
+    x += cellWidth - padding[1] - padding[3];
+  }
+  textMark.setAttributes(
+    Object.assign({}, cellTheme.text, {
+      text: textArr.length === 1 && !autoWrapText ? textArr[0] : textArr,
+      moreThanMaxCharacters,
+      maxLineWidth: cellWidth - padding[1] - padding[3] - hierarchyOffset,
+      textBaseline: 'top',
+      autoWrapText,
+      lineClamp,
+      wordBreak: 'break-word',
+      heightLimit: cellHeight - Math.floor(padding[0] + padding[2]),
+      pickable: false,
+      dx: textAlign === 'left' ? hierarchyOffset : 0,
+      x
+    }) as any
+  );
+
+  if (textMark.attribute.text) {
+    const contentHeight = cellHeight - padding[0] - padding[2];
+    const y =
+      textBaseline === 'middle'
+        ? padding[0] + (contentHeight - textMark.AABBBounds.height()) / 2
+        : textBaseline === 'bottom'
+        ? padding[0] + contentHeight - textMark.AABBBounds.height()
+        : padding[0];
+    textMark.setAttribute('y', y);
+  }
+}
+
 function updateCellContent(
   type: ColumnTypeOption,
   value: any,
@@ -1080,7 +1181,23 @@ function updateCellContent(
     range,
     customResult
   ];
-  if (hasCellValue) {
+  const reusableCellGroup = canUseComplexCellFastUpdate(
+    type,
+    oldCellGroup,
+    define,
+    range,
+    customResult,
+    mayHaveIcon,
+    table._getCellStyle(col, row).autoWrapText ?? table.internalProps.autoWrapText,
+    table,
+    row,
+    addNew
+  )
+    ? oldCellGroup
+    : undefined;
+  if (reusableCellGroup) {
+    createCellArgs.push(value, reusableCellGroup);
+  } else if (hasCellValue) {
     createCellArgs.push(cellValue);
   }
   const newCellGroup = createCell(...createCellArgs);
@@ -1099,6 +1216,47 @@ function updateCellContent(
   return newCellGroup;
 }
 
+function canUseComplexCellFastUpdate(
+  type: ColumnTypeOption,
+  oldCellGroup: Group,
+  define: ColumnDefine,
+  range: CellRange | undefined,
+  customResult: { elementsGroup?: VGroup; renderDefault: boolean } | undefined,
+  mayHaveIcon: boolean,
+  autoWrapText: boolean,
+  table: BaseTableAPI,
+  row: number,
+  addNew: boolean
+) {
+  if (
+    addNew ||
+    oldCellGroup.role !== 'cell' ||
+    range ||
+    customResult ||
+    mayHaveIcon ||
+    autoWrapText ||
+    table.isAutoRowHeight(row) ||
+    define.customLayout ||
+    define.customRender
+  ) {
+    return false;
+  }
+
+  if (type === 'checkbox') {
+    return !define.tree && !!oldCellGroup.getChildByName('checkbox');
+  }
+  if (type === 'switch') {
+    return !!oldCellGroup.getChildByName('switch');
+  }
+  if (type === 'button') {
+    return !!oldCellGroup.getChildByName('button');
+  }
+  if (type === 'progressbar') {
+    return !!oldCellGroup.getChildByName('text') && !!oldCellGroup.getChildByName('progress-bar');
+  }
+  return false;
+}
+
 function canUseFastUpdate(
   col: number,
   row: number,
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/button-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/button-cell.ts
index d7b632307e..3254b289c1 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/button-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/button-cell.ts
@@ -10,6 +10,8 @@ import { getOrApply } from '../../../tools/helper';
 import { getHierarchyOffset } from '../../utils/get-hierarchy-offset';
 import { dealWithIconLayout } from '../../utils/text-icon-layout';
 
+const hoverListenerBoundComponents = new WeakSet<Tag>();
+
 export function createButtonCellGroup(
   cellGroup: Group | null,
   columnGroup: Group,
@@ -32,10 +34,9 @@ export function createButtonCellGroup(
   cellValue?: any
 ) {
   const value = arguments.length >= 19 ? cellValue : table.getCellValue(col, row);
+  const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
   // cell
   if (!cellGroup) {
-    const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
-
     if (isAsync) {
       cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
       if (cellGroup && cellGroup.role === 'cell') {
@@ -81,6 +82,23 @@ export function createButtonCellGroup(
       cellGroup.row = row;
       cellGroup = columnGroup?.addCellGroup(cellGroup) ?? cellGroup;
     }
+  } else {
+    cellGroup.setAttributes({
+      x: xOrigin,
+      y: yOrigin,
+      width,
+      height,
+      lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+      fill: cellTheme?.group?.fill ?? undefined,
+      stroke: cellTheme?.group?.stroke ?? undefined,
+      strokeArrayWidth,
+      strokeArrayColor: (cellTheme?.group as any)?.strokeArrayColor ?? undefined,
+      cursor: (cellTheme?.group as any)?.cursor ?? undefined,
+      lineDash: cellTheme?.group?.lineDash ?? undefined,
+      lineCap: 'butt',
+      clip: true,
+      cornerRadius: cellTheme.group.cornerRadius
+    } as any);
   }
 
   let icons;
@@ -132,6 +150,7 @@ export function createButtonCellGroup(
     });
   }
 
+  const oldButtonComponent = cellGroup.getChildByName('button') as Tag;
   const buttonComponent = createButton(
     col,
     row,
@@ -142,9 +161,10 @@ export function createButtonCellGroup(
     cellTheme,
     define,
     table,
-    value
+    value,
+    oldButtonComponent
   );
-  if (buttonComponent) {
+  if (buttonComponent && buttonComponent !== oldButtonComponent) {
     cellGroup.appendChild(buttonComponent);
   }
 
@@ -184,7 +204,8 @@ function createButton(
   cellTheme: IThemeSpec,
   define: ButtonColumnDefine,
   table: BaseTableAPI,
-  cellValue: any
+  cellValue: any,
+  buttonComponent?: Tag
 ) {
   const style = table._getCellStyle(col, row) as ButtonStyle;
   const buttonColor = getProp('buttonColor', style, col, row, table);
@@ -275,15 +296,27 @@ function createButton(
   buttonTextDisableColor && (buttonAttributes.state.text.fill = buttonTextDisableColor);
   buttonTextHoverColor && (buttonAttributes.state.text.hover.fill = buttonTextHoverColor);
 
-  const buttonComponent = new Tag(buttonAttributes);
+  if (buttonComponent) {
+    buttonComponent.removeState('hover', false);
+    buttonComponent.initAttributes(buttonAttributes);
+  } else {
+    buttonComponent = new Tag(buttonAttributes);
+  }
   buttonComponent.name = 'button';
 
-  if (!isDisable) {
+  if (!hoverListenerBoundComponents.has(buttonComponent)) {
+    hoverListenerBoundComponents.add(buttonComponent);
     buttonComponent.addEventListener('mouseenter', () => {
+      if ((buttonComponent.attribute as any).disable) {
+        return;
+      }
       buttonComponent.addState('hover', true, false);
       buttonComponent.stage.renderNextFrame();
     });
     buttonComponent.addEventListener('mouseleave', () => {
+      if ((buttonComponent.attribute as any).disable) {
+        return;
+      }
       buttonComponent.removeState('hover', false);
       buttonComponent.stage.renderNextFrame();
     });
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts
index 6b58ebda73..c1db6b0ecd 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts
@@ -46,10 +46,9 @@ export function createCheckboxCellGroup(
   cellValue?: any
 ) {
   const value = arguments.length >= 20 ? cellValue : table.getCellValue(col, row);
+  const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
   // cell
   if (!cellGroup) {
-    const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
-
     if (isAsync) {
       cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
       if (cellGroup && cellGroup.role === 'cell') {
@@ -95,6 +94,23 @@ export function createCheckboxCellGroup(
       cellGroup.row = row;
       cellGroup = columnGroup?.addCellGroup(cellGroup) ?? cellGroup;
     }
+  } else {
+    cellGroup.setAttributes({
+      x: xOrigin,
+      y: yOrigin,
+      width,
+      height,
+      lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+      fill: cellTheme?.group?.fill ?? undefined,
+      stroke: cellTheme?.group?.stroke ?? undefined,
+      strokeArrayWidth,
+      strokeArrayColor: (cellTheme?.group as any)?.strokeArrayColor ?? undefined,
+      cursor: (cellTheme?.group as any)?.cursor ?? undefined,
+      lineDash: cellTheme?.group?.lineDash ?? undefined,
+      lineCap: 'butt',
+      clip: true,
+      cornerRadius: cellTheme.group.cornerRadius
+    } as any);
   }
 
   let icons;
@@ -155,6 +171,7 @@ export function createCheckboxCellGroup(
   }
 
   // checkbox
+  const oldCheckboxComponent = cellGroup.getChildByName('checkbox') as CheckBox;
   const checkboxComponent = createCheckbox(
     col,
     row,
@@ -166,7 +183,8 @@ export function createCheckboxCellGroup(
     define,
     table,
     isCheckboxTree,
-    value
+    value,
+    oldCheckboxComponent
   );
 
   // 目前只支持展示折叠或者展开icons
@@ -266,11 +284,13 @@ export function createCheckboxCellGroup(
       }
     });
   } else {
-    if (checkboxComponent) {
+    if (checkboxComponent && checkboxComponent !== oldCheckboxComponent) {
       cellGroup.appendChild(checkboxComponent);
     }
 
-    checkboxComponent.render();
+    if (!oldCheckboxComponent) {
+      checkboxComponent.render();
+    }
   }
 
   width -= padding[1] + padding[3] + iconWidth;
@@ -308,7 +328,8 @@ function createCheckbox(
   define: CheckboxColumnDefine,
   table: BaseTableAPI,
   isCheckboxTree: boolean,
-  cellValue: any
+  cellValue: any,
+  checkbox?: CheckBox
 ) {
   const style = table._getCellStyle(col, row) as CheckboxStyle;
   const size = getProp('size', style, col, row, table);
@@ -431,7 +452,11 @@ function createCheckbox(
   checkIconImage && (checkboxAttributes.icon.checkIconImage = checkIconImage);
   indeterminateIconImage && (checkboxAttributes.icon.indeterminateIconImage = indeterminateIconImage);
 
-  const checkbox = new CheckBox(checkboxAttributes);
+  if (checkbox) {
+    checkbox.initAttributes(checkboxAttributes);
+  } else {
+    checkbox = new CheckBox(checkboxAttributes);
+  }
   checkbox.name = 'checkbox';
 
   return checkbox;
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
index 743713f667..042003761b 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
@@ -24,7 +24,8 @@ export function createProgressBarCell(
   row: number,
   padding: [number, number, number, number],
   table: BaseTableAPI,
-  range?: CellRange
+  range?: CellRange,
+  progressBarGroup?: Group
 ) {
   if (progressBarDefine.dependField) {
     const dependField = getOrApply(progressBarDefine.dependField, {
@@ -93,13 +94,24 @@ export function createProgressBarCell(
   if (isNumber(table.theme._contentOffset)) {
     _contentOffset = table.theme._contentOffset;
   }
-  const percentCompleteBarGroup = new Group({
-    x: -_contentOffset,
-    y: -_contentOffset,
-    width: contentWidth,
-    height: contentHeight
-  });
+  const percentCompleteBarGroup =
+    progressBarGroup ??
+    new Group({
+      x: -_contentOffset,
+      y: -_contentOffset,
+      width: contentWidth,
+      height: contentHeight
+    });
+  if (progressBarGroup) {
+    progressBarGroup.setAttributes({
+      x: -_contentOffset,
+      y: -_contentOffset,
+      width: contentWidth,
+      height: contentHeight
+    });
+  }
   percentCompleteBarGroup.name = 'progress-bar';
+  const usedGraphicNames = new Set<string>();
 
   const {
     showBar,
@@ -203,6 +215,7 @@ export function createProgressBarCell(
     }
     const num = Number(svalue);
     if (isNaN(num)) {
+      removeUnusedProgressBarGraphics(percentCompleteBarGroup, usedGraphicNames);
       return percentCompleteBarGroup;
     }
 
@@ -230,14 +243,13 @@ export function createProgressBarCell(
       });
 
       if (bgFillColor) {
-        const barBack = createRect({
+        updateProgressBarRect(percentCompleteBarGroup, 'progress-bar-background', usedGraphicNames, {
           x: barLeft,
           y: barTop,
           width: barMaxWidth,
           height: barHeight,
           fill: bgFillColor
         });
-        percentCompleteBarGroup.addChild(barBack);
       }
 
       const fillColor =
@@ -250,14 +262,13 @@ export function createProgressBarCell(
           dataValue,
           percentile
         }) || '#20a8d8';
-      const barMain = createRect({
+      updateProgressBarRect(percentCompleteBarGroup, 'progress-bar-main', usedGraphicNames, {
         x: barLeft,
         y: barTop,
         width: barSize,
         height: barHeight,
         fill: fillColor
       });
-      percentCompleteBarGroup.addChild(barMain);
     } else if (barType === 'negative') {
       // negative模式参考风神现有数据条样式，显示坐标轴和正负数据条
       // 计算坐标轴位置
@@ -286,14 +297,13 @@ export function createProgressBarCell(
         percentile: positiveRate
       });
       if (bgFillColor) {
-        const barBack = createRect({
+        updateProgressBarRect(percentCompleteBarGroup, 'progress-bar-background', usedGraphicNames, {
           x: barLeft,
           y: barTop,
           width: barMaxWidth,
           height: barHeight,
           fill: bgFillColor
         });
-        percentCompleteBarGroup.addChild(barBack);
       }
 
       // 坐标轴距离左侧边界距离
@@ -324,14 +334,13 @@ export function createProgressBarCell(
           dataValue,
           percentile: negativeRate
         }) || '#20a8d8';
-      const barNega = createRect({
+      updateProgressBarRect(percentCompleteBarGroup, 'progress-bar-negative', usedGraphicNames, {
         x: barRectNega.left,
         y: barRectNega.top,
         width: barRectNega.width,
         height: barRectNega.height,
         fill: barNagiFillColor
       });
-      percentCompleteBarGroup.addChild(barNega);
 
       // 绘制正值区域
       let barSizePosi = Math.min(barMaxWidth * positiveFactor * positiveRate, barMaxWidth);
@@ -363,14 +372,13 @@ export function createProgressBarCell(
           dataValue,
           percentile: positiveRate
         }) || '#20a8d8';
-      const barPosi = createRect({
+      updateProgressBarRect(percentCompleteBarGroup, 'progress-bar-positive', usedGraphicNames, {
         x: barRectPosi.left,
         y: barRectPosi.top,
         width: barRectPosi.width,
         height: barRectPosi.height,
         fill: barPosiFillColor
       });
-      percentCompleteBarGroup.addChild(barPosi);
 
       // 绘制坐标轴
       const lineLeft = barRightToLeft ? barRectNega.left : barRectPosi.left;
@@ -383,7 +391,7 @@ export function createProgressBarCell(
         dataValue,
         percentile: positiveRate
       });
-      const line = createLine({
+      updateProgressBarLine(percentCompleteBarGroup, 'progress-bar-axis', usedGraphicNames, {
         x: 0,
         y: 0,
         stroke: lineStrokeColor,
@@ -394,7 +402,6 @@ export function createProgressBarCell(
           { x: lineLeft, y: height }
         ]
       });
-      percentCompleteBarGroup.addChild(line);
 
       // 绘制mark
       if (showBarMark && (positiveRate || negativeRate)) {
@@ -456,14 +463,13 @@ export function createProgressBarCell(
             });
           }
         }
-        const barMark = createLine({
+        updateProgressBarLine(percentCompleteBarGroup, 'progress-bar-mark', usedGraphicNames, {
           x: 0,
           y: 0,
           stroke: barMarkStrokeColor,
           lineWidth,
           points
         });
-        percentCompleteBarGroup.addChild(barMark);
       }
     } else if (barType === 'negative_no_axis') {
       // negative_no_axis模式不显示坐标轴，正负数据条同向，区分颜色
@@ -500,14 +506,13 @@ export function createProgressBarCell(
         percentile
       });
       if (bgFillColor) {
-        const barBack = createRect({
+        updateProgressBarRect(percentCompleteBarGroup, 'progress-bar-background', usedGraphicNames, {
           x: barLeft,
           y: barTop,
           width: barMaxWidth,
           height: barHeight,
           fill: bgFillColor
         });
-        percentCompleteBarGroup.addChild(barBack);
       }
 
       // 绘制bar
@@ -541,14 +546,13 @@ export function createProgressBarCell(
             percentile
           }) || '#20a8d8';
       }
-      const bar = createRect({
+      updateProgressBarRect(percentCompleteBarGroup, 'progress-bar-main', usedGraphicNames, {
         x: barRect.left,
         y: barRect.top,
         width: barRect.width,
         height: barRect.height,
         fill: barRectFillColor
       });
-      percentCompleteBarGroup.addChild(bar);
 
       // 绘制mark
       if (showBarMark && num) {
@@ -594,18 +598,70 @@ export function createProgressBarCell(
             y: barRect.top + barRect.height - barMarkWidth / 2
           });
         }
-        const barMark = createLine({
+        updateProgressBarLine(percentCompleteBarGroup, 'progress-bar-mark', usedGraphicNames, {
           x: 0,
           y: 0,
           stroke: barMarkStrokeColor,
           lineWidth,
           points
         });
-        percentCompleteBarGroup.addChild(barMark);
       }
     }
   }
+  removeUnusedProgressBarGraphics(percentCompleteBarGroup, usedGraphicNames);
   return percentCompleteBarGroup;
 }
 
+function updateProgressBarRect(group: Group, name: string, usedGraphicNames: Set<string>, attributes: any) {
+  usedGraphicNames.add(name);
+  let graphic = group.getChildByName(name);
+  if (graphic?.type !== 'rect') {
+    if (graphic) {
+      group.removeChild(graphic);
+      graphic.release?.();
+    }
+    graphic = createRect(attributes);
+    graphic.name = name;
+    if (name === 'progress-bar-background' && group.firstChild) {
+      group.insertBefore(graphic, group.firstChild);
+    } else {
+      group.addChild(graphic);
+    }
+  } else {
+    graphic.setAttributes(attributes);
+  }
+  return graphic;
+}
+
+function updateProgressBarLine(group: Group, name: string, usedGraphicNames: Set<string>, attributes: any) {
+  usedGraphicNames.add(name);
+  let graphic = group.getChildByName(name);
+  if (graphic?.type !== 'line') {
+    if (graphic) {
+      group.removeChild(graphic);
+      graphic.release?.();
+    }
+    graphic = createLine(attributes);
+    graphic.name = name;
+    group.addChild(graphic);
+  } else {
+    graphic.setAttributes(attributes);
+  }
+  return graphic;
+}
+
+function removeUnusedProgressBarGraphics(group: Group, usedGraphicNames: Set<string>) {
+  const unusedGraphics: any[] = [];
+  group.forEachChildren((graphic: any) => {
+    if (!usedGraphicNames.has(graphic.name)) {
+      unusedGraphics.push(graphic);
+    }
+    return false;
+  });
+  unusedGraphics.forEach(graphic => {
+    group.removeChild(graphic);
+    graphic.release?.();
+  });
+}
+
 export type CreateProgressBarCell = typeof createProgressBarCell;
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/switch-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/switch-cell.ts
index 120ab4199a..9ba761e636 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/switch-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/switch-cell.ts
@@ -32,10 +32,9 @@ export function createSwitchCellGroup(
   cellValue?: any
 ) {
   const value = arguments.length >= 19 ? cellValue : table.getCellValue(col, row);
+  const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
   // cell
   if (!cellGroup) {
-    const strokeArrayWidth = getCellBorderStrokeWidth(col, row, cellTheme, table);
-
     if (isAsync) {
       cellGroup = table.scenegraph.highPerformanceGetCell(col, row, true);
       if (cellGroup && cellGroup.role === 'cell') {
@@ -81,6 +80,23 @@ export function createSwitchCellGroup(
       cellGroup.row = row;
       cellGroup = columnGroup?.addCellGroup(cellGroup) ?? cellGroup;
     }
+  } else {
+    cellGroup.setAttributes({
+      x: xOrigin,
+      y: yOrigin,
+      width,
+      height,
+      lineWidth: cellTheme?.group?.lineWidth ?? undefined,
+      fill: cellTheme?.group?.fill ?? undefined,
+      stroke: cellTheme?.group?.stroke ?? undefined,
+      strokeArrayWidth,
+      strokeArrayColor: (cellTheme?.group as any)?.strokeArrayColor ?? undefined,
+      cursor: (cellTheme?.group as any)?.cursor ?? undefined,
+      lineDash: cellTheme?.group?.lineDash ?? undefined,
+      lineCap: 'butt',
+      clip: true,
+      cornerRadius: cellTheme.group.cornerRadius
+    } as any);
   }
 
   let icons;
@@ -132,6 +148,7 @@ export function createSwitchCellGroup(
     });
   }
 
+  const oldSwitchComponent = cellGroup.getChildByName('switch') as Switch;
   const switchComponent = createSwitch(
     col,
     row,
@@ -142,13 +159,16 @@ export function createSwitchCellGroup(
     cellTheme,
     define,
     table,
-    value
+    value,
+    oldSwitchComponent
   );
-  if (switchComponent) {
+  if (switchComponent && switchComponent !== oldSwitchComponent) {
     cellGroup.appendChild(switchComponent);
   }
 
-  switchComponent.render();
+  if (!oldSwitchComponent) {
+    switchComponent.render();
+  }
 
   width -= padding[1] + padding[3] + iconWidth;
   height -= padding[0] + padding[2];
@@ -184,7 +204,8 @@ function createSwitch(
   cellTheme: IThemeSpec,
   define: SwitchColumnDefine,
   table: BaseTableAPI,
-  cellValue: any
+  cellValue: any,
+  switchComponent?: Switch
 ) {
   const style = table._getCellStyle(col, row) as SwitchStyle;
 
@@ -304,7 +325,11 @@ function createSwitch(
   disableCheckedFill && (switchAttributes.box.disableCheckedFill = disableCheckedFill);
   circleFill && (switchAttributes.circle.fill = circleFill);
 
-  const switchComponent = new Switch(switchAttributes);
+  if (switchComponent) {
+    switchComponent.initAttributes(switchAttributes);
+  } else {
+    switchComponent = new Switch(switchAttributes);
+  }
   switchComponent.name = 'switch';
   return switchComponent;
 }

From 8eed4c7ec2a76ea5a6492187e982105122e3c6ed Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Wed, 16 Sep 2026 15:20:36 +0800
Subject: [PATCH 2/8] fix: preserve complex cell rendering fallbacks

Keep optimized updates aligned with custom rendering and text layout semantics.
Make the performance benchmark measurements reliable.

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
---
 .../complex-cell-fast-update.test.ts          | 113 ++++++++++++++++++
 .../debug/issue-5308-scroll-performance.ts    | 109 ++++++++++-------
 .../scenegraph/group-creater/cell-helper.ts   |  34 +++++-
 3 files changed, 211 insertions(+), 45 deletions(-)

diff --git a/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts b/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
index fd749ad76a..7cceb7f86d 100644
--- a/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
+++ b/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
@@ -33,6 +33,7 @@ describe('complex cell fast update', () => {
     const components = cellGroups.map((cellGroup, col) => cellGroup.getChildByName(componentNames[col]));
     const progressText = cellGroups[3].getChildByName('text');
     const progressMain = components[3].getChildByName('progress-bar-main');
+    const initialProgressWidth = progressMain.attribute.width;
 
     table.updateRecords(
       [
@@ -52,6 +53,9 @@ describe('complex cell fast update', () => {
     });
     expect(components[3].getChildByName('progress-bar-main')).toBe(progressMain);
     expect(cellGroups[3].getChildByName('text')).toBe(progressText);
+    expect(components[2].attribute.text).toBe('Close');
+    expect(progressText.attribute.text).toBe('75');
+    expect(progressMain.attribute.width).toBeGreaterThan(initialProgressWidth);
 
     table.updateRecords(
       [
@@ -68,6 +72,8 @@ describe('complex cell fast update', () => {
       expect(table.scenegraph.getCell(col, 1)).toBe(cellGroup);
       expect(cellGroup.getChildByName(componentNames[col])).toBe(components[col]);
     });
+    expect(components[2].attribute.text).toBe('Open');
+    expect(progressText.attribute.text).toBe('25');
 
     table.release();
   });
@@ -124,4 +130,111 @@ describe('complex cell fast update', () => {
 
     table.release();
   });
+
+  test('preserves progress text layout attributes during reuse', () => {
+    const container = createDiv();
+    container.style.width = '400px';
+    container.style.height = '300px';
+
+    const table = new ListTable(container, {
+      records: [{ progress: 25 }],
+      columns: [
+        {
+          field: 'progress',
+          cellType: 'progressbar',
+          width: 160,
+          min: 0,
+          max: 100,
+          style: { textAlign: 'right' }
+        }
+      ],
+      customConfig: { limitContentHeight: false },
+      theme: { _contentOffset: 3 },
+      defaultRowHeight: 40
+    });
+
+    const cellGroup = table.scenegraph.getCell(0, 1);
+    const text = cellGroup.getChildByName('text');
+
+    table.updateRecords([{ progress: 75 }], [0]);
+
+    expect(table.scenegraph.getCell(0, 1)).toBe(cellGroup);
+    expect(cellGroup.getChildByName('text')).toBe(text);
+    expect(text.attribute).toMatchObject({
+      text: '75',
+      heightLimit: -1,
+      whiteSpace: 'normal',
+      dx: -3,
+      keepCenterInLine: true
+    });
+
+    table.release();
+  });
+
+  test('falls back when table customRender is configured', () => {
+    const container = createDiv();
+    container.style.width = '400px';
+    container.style.height = '300px';
+
+    const table = new ListTable(container, {
+      records: [{ progress: 25 }],
+      columns: [{ field: 'progress', cellType: 'progressbar', width: 160, min: 0, max: 100 }],
+      customRender: () => ({
+        elements: [{ type: 'rect', x: 0, y: 0, width: 4, height: 4, fill: '#f00' }],
+        renderDefault: true
+      }),
+      defaultRowHeight: 40
+    });
+
+    const cellGroup = table.scenegraph.getCell(0, 1);
+    expect(cellGroup.getChildByName('custom-container')).not.toBeNull();
+
+    table.updateRecords([{ progress: 75 }], [0]);
+
+    const updatedCellGroup = table.scenegraph.getCell(0, 1);
+    expect(updatedCellGroup).not.toBe(cellGroup);
+    expect(updatedCellGroup.getChildByName('custom-container')).not.toBeNull();
+
+    table.release();
+  });
+
+  test('falls back when a progress cell gains a mark', () => {
+    const container = createDiv();
+    container.style.width = '400px';
+    container.style.height = '300px';
+
+    const table = new ListTable(container, {
+      records: [{ progress: 25 }],
+      columns: [
+        {
+          field: 'progress',
+          cellType: 'progressbar',
+          width: 160,
+          min: 0,
+          max: 100,
+          style: {
+            marked: args => args.value >= 50
+          }
+        }
+      ],
+      defaultRowHeight: 40
+    });
+
+    const cellGroup = table.scenegraph.getCell(0, 1);
+    expect(cellGroup.getChildByName('mark')).toBeNull();
+
+    table.updateRecords([{ progress: 75 }], [0]);
+
+    const updatedCellGroup = table.scenegraph.getCell(0, 1);
+    expect(updatedCellGroup).not.toBe(cellGroup);
+    expect(updatedCellGroup.getChildByName('mark')).not.toBeNull();
+
+    table.updateRecords([{ progress: 25 }], [0]);
+
+    const unmarkedCellGroup = table.scenegraph.getCell(0, 1);
+    expect(unmarkedCellGroup).not.toBe(updatedCellGroup);
+    expect(unmarkedCellGroup.getChildByName('mark')).toBeNull();
+
+    table.release();
+  });
 });
diff --git a/packages/vtable/examples/debug/issue-5308-scroll-performance.ts b/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
index aefb6378a8..348ba77d8e 100644
--- a/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
+++ b/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
@@ -169,24 +169,36 @@ export function createTable() {
     cellUpdatesByType: {}
   };
   let lastFrame = performance.now();
+  let measurementStart = Infinity;
+  let frameRequestId = 0;
+  let automationRequestId = 0;
+  let released = false;
+  let longTaskObserver: PerformanceObserver | undefined;
 
   const recordFrame = (time: number) => {
+    if (released) {
+      return;
+    }
     const gap = time - lastFrame;
     lastFrame = time;
-    if (gap > 20) {
+    if (time >= measurementStart && gap > 20) {
       samples.frameGaps.push(gap);
       if (samples.frameGaps.length > 500) {
         samples.frameGaps.shift();
       }
     }
-    requestAnimationFrame(recordFrame);
+    frameRequestId = requestAnimationFrame(recordFrame);
   };
-  requestAnimationFrame(recordFrame);
+  frameRequestId = requestAnimationFrame(recordFrame);
 
   if ('PerformanceObserver' in window) {
-    new PerformanceObserver(list => {
-      list.getEntries().forEach(entry => samples.longTasks.push(entry.duration));
-    }).observe({ entryTypes: ['longtask'] });
+    longTaskObserver = new PerformanceObserver(list => {
+      list
+        .getEntries()
+        .filter(entry => entry.startTime >= measurementStart)
+        .forEach(entry => samples.longTasks.push(entry.duration));
+    });
+    longTaskObserver.observe({ entryTypes: ['longtask'] });
   }
 
   const recordsStart = performance.now();
@@ -253,64 +265,79 @@ export function createTable() {
     samples.scrollEvents++;
   });
 
+  const reset = () => {
+    window.issue5308Result = undefined;
+    samples.frameGaps.length = 0;
+    samples.longTasks.length = 0;
+    samples.scrollEvents = 0;
+    samples.cellUpdates = 0;
+    samples.cellUpdatesByType = {};
+    measurementStart = performance.now();
+    lastFrame = measurementStart;
+  };
+
   window.issue5308Perf = Object.assign(samples, {
     table,
-    reset: () => {
-      samples.frameGaps.length = 0;
-      samples.longTasks.length = 0;
-      samples.scrollEvents = 0;
-      samples.cellUpdates = 0;
-      samples.cellUpdatesByType = {};
-    }
+    reset
   });
   window.tableInstance = table;
 
+  const originalRelease = table.release.bind(table);
+  table.release = ((...args: Parameters<typeof table.release>) => {
+    released = true;
+    cancelAnimationFrame(frameRequestId);
+    cancelAnimationFrame(automationRequestId);
+    longTaskObserver?.disconnect();
+    return originalRelease(...args);
+  }) as typeof table.release;
+
+  const reportResult = (start: number, jumpDuration?: number) => {
+    automationRequestId = requestAnimationFrame(() => {
+      automationRequestId = requestAnimationFrame(() => {
+        if (released) {
+          return;
+        }
+        window.issue5308Result = {
+          elapsed: performance.now() - start,
+          jumpDuration,
+          frameGaps: [...samples.frameGaps],
+          longTasks: [...samples.longTasks],
+          scrollEvents: samples.scrollEvents,
+          cellUpdates: samples.cellUpdates,
+          cellUpdatesByType: { ...samples.cellUpdatesByType }
+        };
+      });
+    });
+  };
+
   if (params.get('jump') === '1') {
-    requestAnimationFrame(() => {
-      window.issue5308Perf.reset();
+    automationRequestId = requestAnimationFrame(() => {
+      reset();
       const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
       const start = performance.now();
       table.setScrollTop(maxScrollTop / 2);
       const jumpDuration = performance.now() - start;
-      window.issue5308Result = {
-        elapsed: jumpDuration,
-        jumpDuration,
-        frameGaps: [...samples.frameGaps],
-        longTasks: [...samples.longTasks],
-        scrollEvents: samples.scrollEvents,
-        cellUpdates: samples.cellUpdates,
-        cellUpdatesByType: { ...samples.cellUpdatesByType }
-      };
+      reportResult(start, jumpDuration);
     });
   }
 
   if (params.get('auto') === '1') {
-    samples.frameGaps.length = 0;
-    samples.longTasks.length = 0;
-    samples.scrollEvents = 0;
-    samples.cellUpdates = 0;
-    samples.cellUpdatesByType = {};
+    reset();
     const start = performance.now();
     const duration = 2000;
     const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
     const scroll = (time: number) => {
+      if (released) {
+        return;
+      }
       const progress = Math.min(1, (time - start) / duration);
       table.setScrollTop(maxScrollTop * progress);
       if (progress < 1) {
-        requestAnimationFrame(scroll);
+        automationRequestId = requestAnimationFrame(scroll);
         return;
       }
-      requestAnimationFrame(() => {
-        window.issue5308Result = {
-          elapsed: performance.now() - start,
-          frameGaps: [...samples.frameGaps],
-          longTasks: [...samples.longTasks],
-          scrollEvents: samples.scrollEvents,
-          cellUpdates: samples.cellUpdates,
-          cellUpdatesByType: { ...samples.cellUpdatesByType }
-        };
-      });
+      reportResult(start);
     };
-    requestAnimationFrame(scroll);
+    automationRequestId = requestAnimationFrame(scroll);
   }
 }
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
index 950f0c13c3..2e55b67f1c 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -1084,6 +1084,14 @@ function updateProgressBarTextCellGroup(
   const { text: textArr, moreThanMaxCharacters } = breakString(value, table);
   const hierarchyOffset = getHierarchyOffset(col, row, table);
   const lineClamp = cellStyle.lineClamp;
+  let contentOffset = 0;
+  if (isNumber(table.theme._contentOffset)) {
+    if (textAlign === 'left') {
+      contentOffset = table.theme._contentOffset;
+    } else if (textAlign === 'right') {
+      contentOffset = -table.theme._contentOffset;
+    }
+  }
   let x = padding[3];
   if (textAlign === 'center') {
     x += (cellWidth - padding[1] - padding[3]) / 2;
@@ -1099,9 +1107,19 @@ function updateProgressBarTextCellGroup(
       autoWrapText,
       lineClamp,
       wordBreak: 'break-word',
-      heightLimit: cellHeight - Math.floor(padding[0] + padding[2]),
+      heightLimit:
+        table.options.customConfig?.limitContentHeight === false
+          ? -1
+          : cellHeight - Math.floor(padding[0] + padding[2]),
       pickable: false,
-      dx: textAlign === 'left' ? hierarchyOffset : 0,
+      dx: (textAlign === 'left' ? hierarchyOffset : 0) + contentOffset,
+      whiteSpace:
+        table.options.customConfig?.limitContentHeight === false
+          ? 'normal'
+          : textArr.length === 1 && !autoWrapText
+          ? 'no-wrap'
+          : 'normal',
+      keepCenterInLine: true,
       x
     }) as any
   );
@@ -1189,6 +1207,7 @@ function updateCellContent(
     customResult,
     mayHaveIcon,
     table._getCellStyle(col, row).autoWrapText ?? table.internalProps.autoWrapText,
+    cellTheme,
     table,
     row,
     addNew
@@ -1224,6 +1243,7 @@ function canUseComplexCellFastUpdate(
   customResult: { elementsGroup?: VGroup; renderDefault: boolean } | undefined,
   mayHaveIcon: boolean,
   autoWrapText: boolean,
+  cellTheme: IThemeSpec,
   table: BaseTableAPI,
   row: number,
   addNew: boolean
@@ -1237,7 +1257,8 @@ function canUseComplexCellFastUpdate(
     autoWrapText ||
     table.isAutoRowHeight(row) ||
     define.customLayout ||
-    define.customRender
+    define.customRender ||
+    table.customRender
   ) {
     return false;
   }
@@ -1252,7 +1273,12 @@ function canUseComplexCellFastUpdate(
     return !!oldCellGroup.getChildByName('button');
   }
   if (type === 'progressbar') {
-    return !!oldCellGroup.getChildByName('text') && !!oldCellGroup.getChildByName('progress-bar');
+    return (
+      !(cellTheme as any)?._vtable?.marked &&
+      !oldCellGroup.getChildByName('mark') &&
+      !!oldCellGroup.getChildByName('text') &&
+      !!oldCellGroup.getChildByName('progress-bar')
+    );
   }
   return false;
 }

From 6e3ec4037b8ec2e0460a3a1e43e9d5e650a6826c Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Wed, 16 Sep 2026 16:24:04 +0800
Subject: [PATCH 3/8] fix: use resolved values in complex cell reuse

Avoid forwarding Promise objects through asynchronous fast updates.
Verify button state changes during reuse.

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
---
 .../complex-cell-fast-update.test.ts          | 34 ++++++++++++++++++-
 .../scenegraph/group-creater/cell-helper.ts   |  2 +-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts b/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
index 7cceb7f86d..d0f16dd714 100644
--- a/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
+++ b/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
@@ -22,7 +22,7 @@ describe('complex cell fast update', () => {
       columns: [
         { field: 'checkbox', cellType: 'checkbox', width: 160 },
         { field: 'switch', cellType: 'switch', width: 160 },
-        { field: 'button', cellType: 'button', width: 160 },
+        { field: 'button', cellType: 'button', width: 160, disable: args => args.value === 'Close' },
         { field: 'progress', cellType: 'progressbar', width: 160, min: 0, max: 100 }
       ],
       defaultRowHeight: 40
@@ -54,6 +54,7 @@ describe('complex cell fast update', () => {
     expect(components[3].getChildByName('progress-bar-main')).toBe(progressMain);
     expect(cellGroups[3].getChildByName('text')).toBe(progressText);
     expect(components[2].attribute.text).toBe('Close');
+    expect(components[2].attribute.disable).toBe(true);
     expect(progressText.attribute.text).toBe('75');
     expect(progressMain.attribute.width).toBeGreaterThan(initialProgressWidth);
 
@@ -73,6 +74,7 @@ describe('complex cell fast update', () => {
       expect(cellGroup.getChildByName(componentNames[col])).toBe(components[col]);
     });
     expect(components[2].attribute.text).toBe('Open');
+    expect(components[2].attribute.disable).toBe(false);
     expect(progressText.attribute.text).toBe('25');
 
     table.release();
@@ -237,4 +239,34 @@ describe('complex cell fast update', () => {
 
     table.release();
   });
+
+  test('renders resolved progress values instead of Promise objects', async () => {
+    const container = createDiv();
+    container.style.width = '400px';
+    container.style.height = '300px';
+
+    const table = new ListTable(container, {
+      records: [{ progress: 25 }],
+      columns: [{ field: 'progress', cellType: 'progressbar', width: 160, min: 0, max: 100 }],
+      defaultRowHeight: 40
+    });
+
+    const cellGroup = table.scenegraph.getCell(0, 1);
+    const removeAllChild = jest.spyOn(cellGroup, 'removeAllChild').mockImplementation(() => cellGroup);
+    let resolveProgress: (value: number) => void;
+    const progress = new Promise<number>(resolve => {
+      resolveProgress = resolve;
+    });
+
+    table.updateRecords([{ progress }], [0]);
+    resolveProgress(75);
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(table.scenegraph.getCell(0, 1)).toBe(cellGroup);
+    expect(cellGroup.getChildByName('text').attribute.text).toBe('75');
+    expect(cellGroup.getChildByName('progress-bar')).not.toBeNull();
+
+    removeAllChild.mockRestore();
+    table.release();
+  });
 });
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
index 2e55b67f1c..3f9609f20d 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -1215,7 +1215,7 @@ function updateCellContent(
     ? oldCellGroup
     : undefined;
   if (reusableCellGroup) {
-    createCellArgs.push(value, reusableCellGroup);
+    createCellArgs.push(hasCellValue ? cellValue : value, reusableCellGroup);
   } else if (hasCellValue) {
     createCellArgs.push(cellValue);
   }

From 8a5f848f60605406f5ad8f31cacdacdaf775a5a4 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Wed, 16 Sep 2026 16:52:52 +0800
Subject: [PATCH 4/8] fix: guard stale pivot tree cell updates

Fall back from complex cell reuse when rapid hierarchy changes invalidate a cell definition.

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
---
 .../vtable/__tests__/pivotTable-tree.test.ts  | 60 +++++++++++++++++++
 .../scenegraph/group-creater/cell-helper.ts   |  1 +
 2 files changed, 61 insertions(+)

diff --git a/packages/vtable/__tests__/pivotTable-tree.test.ts b/packages/vtable/__tests__/pivotTable-tree.test.ts
index 494d1c7844..0d1a7372a6 100644
--- a/packages/vtable/__tests__/pivotTable-tree.test.ts
+++ b/packages/vtable/__tests__/pivotTable-tree.test.ts
@@ -510,6 +510,66 @@ describe('pivotTableTree init test', () => {
   });
 });
 
+describe('pivot tree rapid hierarchy updates', () => {
+  test('builds visible descendants after consecutive toggles', () => {
+    const containerDom: HTMLElement = createDiv();
+    containerDom.style.position = 'relative';
+    containerDom.style.width = '800px';
+    containerDom.style.height = '400px';
+
+    const records = [];
+    const provinces = {
+      浙江省: ['杭州市', '宁波市', '绍兴市', '舟山市'],
+      四川省: ['成都市', '南充市', '绵阳市', '乐山市'],
+      天津市: ['天津市']
+    };
+    Object.keys(provinces).forEach(province => {
+      provinces[province].forEach((city, index) => {
+        records.push({
+          province,
+          city,
+          category: '家具',
+          sub_category: '桌子',
+          sales: 800 + index,
+          number: 7000 + index
+        });
+      });
+    });
+
+    const table = new PivotTable({
+      container: containerDom,
+      records,
+      rows: [
+        { dimensionKey: 'province', title: 'province', sort: true },
+        { dimensionKey: 'city', title: 'city', sort: true }
+      ],
+      columns: ['category', 'sub_category'],
+      indicators: ['sales', 'number'],
+      indicatorsAsCol: false,
+      enableDataAnalysis: true,
+      rowHierarchyType: 'tree',
+      widthMode: 'autoWidth'
+    });
+
+    try {
+      table.toggleHierarchyState(0, 4);
+      table.toggleHierarchyState(0, 3);
+      table.toggleHierarchyState(0, 4);
+      table.toggleHierarchyState(0, 2);
+      table.toggleHierarchyState(0, 3);
+
+      expect(table.getCellValue(0, 2)).toBe('浙江省');
+      expect(table.getCellValue(0, 3)).toBe('杭州市');
+      expect(table.getHierarchyState(0, 3)).toBe('expand');
+      expect(table.getCellValue(0, 4)).toBe('sales');
+      expect(table.scenegraph.getCell(0, 4).getChildByName('text').attribute.text).toBe('sales');
+      expect(table.scenegraph.getCell(1, 4).getChildByName('text').attribute.text).toBe('800');
+    } finally {
+      table.release();
+    }
+  });
+});
+
 describe('pivotTable grid-tree hierarchy scroll', () => {
   test('keeps bottom scroll position after collapsing a visible bottom row tree node', () => {
     const containerDom: HTMLElement = createDiv();
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
index 3f9609f20d..6e701686a1 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -1249,6 +1249,7 @@ function canUseComplexCellFastUpdate(
   addNew: boolean
 ) {
   if (
+    !define ||
     addNew ||
     oldCellGroup.role !== 'cell' ||
     range ||

From 2e6ab8e34bced987570ba951b77a62aa32578ec9 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 17 Sep 2026 14:59:09 +0800
Subject: [PATCH 5/8] fix: harden complex cell reuse state

Prevent stale graphics during complex cell reuse.
Wait for scene updates before reporting performance samples.

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
---
 .../complex-cell-fast-update.test.ts          |  63 ++++++++-
 .../debug/issue-5308-scroll-performance.ts    | 130 ++++++++++++------
 .../scenegraph/group-creater/cell-helper.ts   |  12 +-
 .../cell-type/progress-bar-cell.ts            |  20 +++
 4 files changed, 177 insertions(+), 48 deletions(-)

diff --git a/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts b/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
index d0f16dd714..bdc3396a7d 100644
--- a/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
+++ b/packages/vtable/__tests__/cell-type/complex-cell-fast-update.test.ts
@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { ListTable } from '../../src';
 import { createDiv } from '../dom';
+import { Group } from '../../src/scenegraph/graphic/group';
 
 global.__VERSION__ = 'none';
 
@@ -97,7 +98,8 @@ describe('complex cell fast update', () => {
           barType: args => args.table.getCellOriginRecord(args.col, args.row).mode,
           style: {
             barBgColor: args => (args.table.getCellOriginRecord(args.col, args.row).background ? '#eee' : undefined),
-            showBar: args => args.table.getCellOriginRecord(args.col, args.row).show
+            showBar: args => args.table.getCellOriginRecord(args.col, args.row).show,
+            showBarMark: true
           }
         }
       ],
@@ -124,6 +126,22 @@ describe('complex cell fast update', () => {
     expect(progressGroup.getChildByName('progress-bar-positive')).toBe(positive);
     expect(progressGroup.getChildByName('progress-bar-axis')).toBe(axis);
 
+    table.updateRecords([{ progress: 50, mode: 'negative_no_axis', show: true, background: true }], [0]);
+    let graphicNames = [];
+    progressGroup.forEachChildren(graphic => {
+      graphicNames.push(graphic.name);
+      return false;
+    });
+    expect(graphicNames.indexOf('progress-bar-main')).toBeLessThan(graphicNames.indexOf('progress-bar-mark'));
+
+    table.updateRecords([{ progress: 50, mode: 'negative', show: true, background: true }], [0]);
+    graphicNames = [];
+    progressGroup.forEachChildren(graphic => {
+      graphicNames.push(graphic.name);
+      return false;
+    });
+    expect(graphicNames.indexOf('progress-bar-axis')).toBeLessThan(graphicNames.indexOf('progress-bar-mark'));
+
     table.updateRecords([{ progress: 50, mode: 'negative', show: false, background: true }], [0]);
     expect(progressGroup.childrenCount).toBe(0);
 
@@ -147,7 +165,10 @@ describe('complex cell fast update', () => {
           width: 160,
           min: 0,
           max: 100,
-          style: { textAlign: 'right' }
+          style: {
+            textAlign: 'right',
+            textBaseline: args => (args.value === 75 ? 'bottom' : 'top')
+          }
         }
       ],
       customConfig: { limitContentHeight: false },
@@ -157,6 +178,7 @@ describe('complex cell fast update', () => {
 
     const cellGroup = table.scenegraph.getCell(0, 1);
     const text = cellGroup.getChildByName('text');
+    expect(text.textBaseline).toBe('top');
 
     table.updateRecords([{ progress: 75 }], [0]);
 
@@ -169,6 +191,39 @@ describe('complex cell fast update', () => {
       dx: -3,
       keepCenterInLine: true
     });
+    expect(text.textBaseline).toBe('bottom');
+
+    table.release();
+  });
+
+  test('falls back when a reusable cell contains stale icons or custom content', () => {
+    const container = createDiv();
+    container.style.width = '400px';
+    container.style.height = '300px';
+
+    const table = new ListTable(container, {
+      records: [{ progress: 25 }],
+      columns: [{ field: 'progress', cellType: 'progressbar', width: 160, min: 0, max: 100 }],
+      defaultRowHeight: 40
+    });
+
+    const cellGroup = table.scenegraph.getCell(0, 1);
+    const staleIcon = new Group({});
+    staleIcon.role = 'icon-left';
+    cellGroup.addChild(staleIcon);
+
+    table.updateRecords([{ progress: 50 }], [0]);
+
+    const withoutIcon = table.scenegraph.getCell(0, 1);
+    expect(withoutIcon).not.toBe(cellGroup);
+
+    const staleCustomContainer = new Group({});
+    staleCustomContainer.name = 'custom-container';
+    withoutIcon.addChild(staleCustomContainer);
+
+    table.updateRecords([{ progress: 75 }], [0]);
+
+    expect(table.scenegraph.getCell(0, 1)).not.toBe(withoutIcon);
 
     table.release();
   });
@@ -264,7 +319,9 @@ describe('complex cell fast update', () => {
 
     expect(table.scenegraph.getCell(0, 1)).toBe(cellGroup);
     expect(cellGroup.getChildByName('text').attribute.text).toBe('75');
-    expect(cellGroup.getChildByName('progress-bar')).not.toBeNull();
+    const progressBar = cellGroup.getChildByName('progress-bar');
+    expect(progressBar).not.toBeNull();
+    expect(progressBar.getChildByName('progress-bar-main').attribute.width).toBeGreaterThan(0);
 
     removeAllChild.mockRestore();
     table.release();
diff --git a/packages/vtable/examples/debug/issue-5308-scroll-performance.ts b/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
index 348ba77d8e..8e0f2aa3d5 100644
--- a/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
+++ b/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
@@ -172,6 +172,7 @@ export function createTable() {
   let measurementStart = Infinity;
   let frameRequestId = 0;
   let automationRequestId = 0;
+  let automationTimerId = 0;
   let released = false;
   let longTaskObserver: PerformanceObserver | undefined;
 
@@ -195,7 +196,7 @@ export function createTable() {
     longTaskObserver = new PerformanceObserver(list => {
       list
         .getEntries()
-        .filter(entry => entry.startTime >= measurementStart)
+        .filter(entry => entry.startTime + entry.duration >= measurementStart)
         .forEach(entry => samples.longTasks.push(entry.duration));
     });
     longTaskObserver.observe({ entryTypes: ['longtask'] });
@@ -236,7 +237,6 @@ export function createTable() {
     })
   });
   window.issue5308Init.tableDuration = performance.now() - tableStart;
-  window.issue5308Init.ready = true;
 
   const scenegraph = table.scenegraph as typeof table.scenegraph & {
     updateCellContent: (col: number, row: number, forceFastUpdate?: boolean) => unknown;
@@ -276,6 +276,40 @@ export function createTable() {
     lastFrame = measurementStart;
   };
 
+  const isScenegraphIdle = () => {
+    const proxy = table.scenegraph.proxy;
+    return (
+      !proxy.isProgressing &&
+      proxy.colUpdatePos > proxy.colEnd &&
+      proxy.rowUpdatePos > proxy.rowEnd &&
+      proxy.currentCol >= proxy.totalCol &&
+      proxy.currentRow >= proxy.totalRow
+    );
+  };
+
+  const waitForScenegraphIdle = (callback: () => void) => {
+    const check = () => {
+      if (released) {
+        return;
+      }
+      if (!isScenegraphIdle()) {
+        automationTimerId = window.setTimeout(check, 16);
+        return;
+      }
+      automationTimerId = window.setTimeout(() => {
+        if (released) {
+          return;
+        }
+        if (isScenegraphIdle()) {
+          callback();
+        } else {
+          check();
+        }
+      });
+    };
+    check();
+  };
+
   window.issue5308Perf = Object.assign(samples, {
     table,
     reset
@@ -287,57 +321,65 @@ export function createTable() {
     released = true;
     cancelAnimationFrame(frameRequestId);
     cancelAnimationFrame(automationRequestId);
+    clearTimeout(automationTimerId);
     longTaskObserver?.disconnect();
     return originalRelease(...args);
   }) as typeof table.release;
 
   const reportResult = (start: number, jumpDuration?: number) => {
-    automationRequestId = requestAnimationFrame(() => {
-      automationRequestId = requestAnimationFrame(() => {
-        if (released) {
-          return;
-        }
-        window.issue5308Result = {
-          elapsed: performance.now() - start,
-          jumpDuration,
-          frameGaps: [...samples.frameGaps],
-          longTasks: [...samples.longTasks],
-          scrollEvents: samples.scrollEvents,
-          cellUpdates: samples.cellUpdates,
-          cellUpdatesByType: { ...samples.cellUpdatesByType }
-        };
+    waitForScenegraphIdle(() => {
+      automationTimerId = window.setTimeout(() => {
+        automationTimerId = window.setTimeout(() => {
+          if (released) {
+            return;
+          }
+          window.issue5308Result = {
+            elapsed: performance.now() - start,
+            jumpDuration,
+            frameGaps: [...samples.frameGaps],
+            longTasks: [...samples.longTasks],
+            scrollEvents: samples.scrollEvents,
+            cellUpdates: samples.cellUpdates,
+            cellUpdatesByType: { ...samples.cellUpdatesByType }
+          };
+        });
       });
     });
   };
 
-  if (params.get('jump') === '1') {
-    automationRequestId = requestAnimationFrame(() => {
+  waitForScenegraphIdle(() => {
+    reset();
+    window.issue5308Init.ready = true;
+
+    if (params.get('jump') === '1') {
+      automationTimerId = window.setTimeout(() => {
+        reset();
+        const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
+        const start = performance.now();
+        table.setScrollTop(maxScrollTop / 2);
+        const jumpDuration = performance.now() - start;
+        reportResult(start, jumpDuration);
+      });
+    }
+
+    if (params.get('auto') === '1') {
       reset();
-      const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
       const start = performance.now();
-      table.setScrollTop(maxScrollTop / 2);
-      const jumpDuration = performance.now() - start;
-      reportResult(start, jumpDuration);
-    });
-  }
-
-  if (params.get('auto') === '1') {
-    reset();
-    const start = performance.now();
-    const duration = 2000;
-    const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
-    const scroll = (time: number) => {
-      if (released) {
-        return;
-      }
-      const progress = Math.min(1, (time - start) / duration);
-      table.setScrollTop(maxScrollTop * progress);
-      if (progress < 1) {
-        automationRequestId = requestAnimationFrame(scroll);
-        return;
-      }
-      reportResult(start);
-    };
-    automationRequestId = requestAnimationFrame(scroll);
-  }
+      const duration = 2000;
+      const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
+      const scroll = (time: number) => {
+        if (released) {
+          return;
+        }
+        const progress = Math.min(1, (time - start) / duration);
+        table.setScrollTop(maxScrollTop * progress);
+        if (progress < 1) {
+          automationRequestId = requestAnimationFrame(scroll);
+          return;
+        }
+        reportResult(start);
+      };
+      automationRequestId = requestAnimationFrame(scroll);
+    }
+  });
 }
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
index 6e701686a1..c5932a07f0 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -366,7 +366,7 @@ export function createCell(
       customResult
     );
     const style = table._getCellStyle(col, row) as ProgressBarStyle;
-    const dataValue = table.getCellOriginValue(col, row);
+    const dataValue = isAsync ? value : table.getCellOriginValue(col, row);
     if (cellGroup) {
       updateProgressBarTextCellGroup(
         cellGroup,
@@ -1078,6 +1078,7 @@ function updateProgressBarTextCellGroup(
   if (!textMark) {
     return;
   }
+  (textMark as any).textBaseline = textBaseline;
 
   const cellStyle = table._getCellStyle(col, row);
   const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText;
@@ -1248,10 +1249,19 @@ function canUseComplexCellFastUpdate(
   row: number,
   addNew: boolean
 ) {
+  let oldCellHasIcon = false;
+  oldCellGroup.forEachChildren((child: IGraphic) => {
+    if (typeof child.role === 'string' && child.role.startsWith('icon-')) {
+      oldCellHasIcon = true;
+    }
+    return false;
+  });
   if (
     !define ||
     addNew ||
     oldCellGroup.role !== 'cell' ||
+    oldCellHasIcon ||
+    !!oldCellGroup.getChildByName(CUSTOM_CONTAINER_NAME) ||
     range ||
     customResult ||
     mayHaveIcon ||
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
index 042003761b..3ba2f405e2 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/progress-bar-cell.ts
@@ -8,6 +8,15 @@ import type { BaseTableAPI } from '../../../ts-types/base-table';
 import { isNumber } from '@visactor/vutils';
 import type { CellRange, StylePropertyFunctionArg } from '../../../ts-types';
 
+const PROGRESS_BAR_GRAPHIC_ORDER = [
+  'progress-bar-background',
+  'progress-bar-main',
+  'progress-bar-negative',
+  'progress-bar-positive',
+  'progress-bar-axis',
+  'progress-bar-mark'
+];
+
 export function createProgressBarCell(
   progressBarDefine: {
     min?: number | ((args: StylePropertyFunctionArg) => number);
@@ -609,6 +618,7 @@ export function createProgressBarCell(
     }
   }
   removeUnusedProgressBarGraphics(percentCompleteBarGroup, usedGraphicNames);
+  reorderProgressBarGraphics(percentCompleteBarGroup);
   return percentCompleteBarGroup;
 }
 
@@ -664,4 +674,14 @@ function removeUnusedProgressBarGraphics(group: Group, usedGraphicNames: Set<str
   });
 }
 
+function reorderProgressBarGraphics(group: Group) {
+  PROGRESS_BAR_GRAPHIC_ORDER.forEach(name => {
+    const graphic = group.getChildByName(name);
+    if (graphic) {
+      group.removeChild(graphic);
+      group.addChild(graphic);
+    }
+  });
+}
+
 export type CreateProgressBarCell = typeof createProgressBarCell;

From 9fa95f5ff5ee3de665e661ee227f26f771d12f16 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 17 Sep 2026 19:43:53 +0800
Subject: [PATCH 6/8] test: add scroll performance regression benchmark

Measure complex-cell scrolling against a same-run text control.
Gate regressions in CI without relying on external baselines.

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
---
 .github/workflows/performance-benchmark.yml   |  59 ++++
 common/config/rush/pnpm-lock.yaml             |  34 +-
 .../debug/issue-5308-scroll-performance.ts    |  10 +-
 packages/vtable/package.json                  |   4 +-
 .../scripts/benchmark-scroll-performance.mjs  | 333 ++++++++++++++++++
 5 files changed, 434 insertions(+), 6 deletions(-)
 create mode 100644 .github/workflows/performance-benchmark.yml
 create mode 100644 packages/vtable/scripts/benchmark-scroll-performance.mjs

diff --git a/.github/workflows/performance-benchmark.yml b/.github/workflows/performance-benchmark.yml
new file mode 100644
index 0000000000..9defd0920b
--- /dev/null
+++ b/.github/workflows/performance-benchmark.yml
@@ -0,0 +1,59 @@
+name: Performance benchmark
+
+on:
+  workflow_dispatch:
+  push:
+    branches: ['main', 'develop']
+    paths:
+      - 'packages/vtable/src/**'
+      - 'packages/vtable/examples/debug/issue-5308-scroll-performance.ts'
+      - 'packages/vtable/examples/issue-5308-scroll-performance.html'
+      - 'packages/vtable/scripts/benchmark-scroll-performance.mjs'
+      - 'packages/vtable/package.json'
+      - 'common/config/rush/pnpm-lock.yaml'
+      - '.github/workflows/performance-benchmark.yml'
+  pull_request:
+    branches: ['main', 'develop']
+    paths:
+      - 'packages/vtable/src/**'
+      - 'packages/vtable/examples/debug/issue-5308-scroll-performance.ts'
+      - 'packages/vtable/examples/issue-5308-scroll-performance.html'
+      - 'packages/vtable/scripts/benchmark-scroll-performance.mjs'
+      - 'packages/vtable/package.json'
+      - 'common/config/rush/pnpm-lock.yaml'
+      - '.github/workflows/performance-benchmark.yml'
+
+jobs:
+  scroll-performance:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+          cache: 'npm'
+          cache-dependency-path: './common/config/rush/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        run: node common/scripts/install-run-rush.js install --bypass-policy
+
+      - name: Install Chromium
+        working-directory: packages/vtable
+        run: node node_modules/playwright/cli.js install --with-deps chromium
+
+      - name: Run scroll performance benchmark
+        working-directory: packages/vtable
+        env:
+          BENCHMARK_OUTPUT: benchmark-result.json
+        run: node ../../common/scripts/install-run-rushx.js benchmark:scroll
+
+      - name: Upload benchmark result
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: scroll-performance-result
+          path: packages/vtable/benchmark-result.json
+          if-no-files-found: ignore
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index e266a022cb..7f2ee6f1dd 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -594,6 +594,9 @@ importers:
       pikaday:
         specifier: 1.8.2
         version: 1.8.2
+      playwright:
+        specifier: 1.51.1
+        version: 1.51.1
       postcss:
         specifier: 8.4.21
         version: 8.4.21
@@ -2129,7 +2132,7 @@ importers:
         version: 4.9.5
       vitest:
         specifier: 0.30.1
-        version: 0.30.1(jsdom@16.7.0)(less@4.1.3)(sass@1.43.5)(terser@5.17.1)
+        version: 0.30.1(jsdom@16.7.0)(less@4.1.3)(playwright@1.51.1)(sass@1.43.5)(terser@5.17.1)
 
 packages:
 
@@ -5469,6 +5472,11 @@ packages:
     os: [darwin]
     deprecated: Upgrade to fsevents v2 to mitigate potential security issues
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -7390,6 +7398,16 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
+  playwright-core@1.51.1:
+    resolution: {integrity: sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.51.1:
+    resolution: {integrity: sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   plugin-error@0.1.2:
     resolution: {integrity: sha512-WzZHcm4+GO34sjFMxQMqZbsz3xiNEgonCskQ9v+IroMmYgk/tas8dG+Hr2D6IbRPybZ12oWpzE/w3cGJ6FJzOw==}
     engines: {node: '>=0.10.0'}
@@ -13493,6 +13511,9 @@ snapshots:
       nan: 2.26.2
     optional: true
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -15926,6 +15947,14 @@ snapshots:
       mlly: 1.8.2
       pathe: 2.0.3
 
+  playwright-core@1.51.1: {}
+
+  playwright@1.51.1:
+    dependencies:
+      playwright-core: 1.51.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   plugin-error@0.1.2:
     dependencies:
       ansi-cyan: 0.1.1
@@ -17798,7 +17827,7 @@ snapshots:
       sass: 1.43.5
       terser: 5.17.1
 
-  vitest@0.30.1(jsdom@16.7.0)(less@4.1.3)(sass@1.43.5)(terser@5.17.1):
+  vitest@0.30.1(jsdom@16.7.0)(less@4.1.3)(playwright@1.51.1)(sass@1.43.5)(terser@5.17.1):
     dependencies:
       '@types/chai': 4.3.20
       '@types/chai-subset': 1.3.6(@types/chai@4.3.20)
@@ -17828,6 +17857,7 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       jsdom: 16.7.0
+      playwright: 1.51.1
     transitivePeerDependencies:
       - less
       - sass
diff --git a/packages/vtable/examples/debug/issue-5308-scroll-performance.ts b/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
index 8e0f2aa3d5..21436e156d 100644
--- a/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
+++ b/packages/vtable/examples/debug/issue-5308-scroll-performance.ts
@@ -182,9 +182,9 @@ export function createTable() {
     }
     const gap = time - lastFrame;
     lastFrame = time;
-    if (time >= measurementStart && gap > 20) {
+    if (time >= measurementStart) {
       samples.frameGaps.push(gap);
-      if (samples.frameGaps.length > 500) {
+      if (samples.frameGaps.length > 1000) {
         samples.frameGaps.shift();
       }
     }
@@ -355,8 +355,10 @@ export function createTable() {
       automationTimerId = window.setTimeout(() => {
         reset();
         const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
+        const maxScrollLeft = Math.max(0, table.getAllColsWidth() - table.tableNoFrameWidth);
         const start = performance.now();
         table.setScrollTop(maxScrollTop / 2);
+        table.setScrollLeft(maxScrollLeft / 2);
         const jumpDuration = performance.now() - start;
         reportResult(start, jumpDuration);
       });
@@ -365,14 +367,16 @@ export function createTable() {
     if (params.get('auto') === '1') {
       reset();
       const start = performance.now();
-      const duration = 2000;
+      const duration = Number(params.get('duration')) || 2000;
       const maxScrollTop = Math.max(0, table.getAllRowsHeight() - table.tableNoFrameHeight);
+      const maxScrollLeft = Math.max(0, table.getAllColsWidth() - table.tableNoFrameWidth);
       const scroll = (time: number) => {
         if (released) {
           return;
         }
         const progress = Math.min(1, (time - start) / duration);
         table.setScrollTop(maxScrollTop * progress);
+        table.setScrollLeft(maxScrollLeft * progress);
         if (progress < 1) {
           automationRequestId = requestAnimationFrame(scroll);
           return;
diff --git a/packages/vtable/package.json b/packages/vtable/package.json
index 1f2ae411ea..5f070112af 100644
--- a/packages/vtable/package.json
+++ b/packages/vtable/package.json
@@ -44,6 +44,7 @@
     "build": "npm run fix-memory-limit && bundle --clean",
     "dev": "bundle --clean -f es -w",
     "start": "vite serve examples",
+    "benchmark:scroll": "node ./scripts/benchmark-scroll-performance.mjs",
     "test": "jest --silent",
     "test-cov": "jest --coverage",
     "ci": "ts-node --transpileOnly --skipProject ./scripts/trigger-test.ts",
@@ -120,7 +121,8 @@
     "d3-hexbin": "^0.2.2",
     "d3-hierarchy": "^3.1.1",
     "@resvg/resvg-js": "^2.5.0",
-    "pikaday": "1.8.2"
+    "pikaday": "1.8.2",
+    "playwright": "1.51.1"
   },
   "unpkg": "latest",
   "unpkgFiles": [
diff --git a/packages/vtable/scripts/benchmark-scroll-performance.mjs b/packages/vtable/scripts/benchmark-scroll-performance.mjs
new file mode 100644
index 0000000000..dd39ca9e04
--- /dev/null
+++ b/packages/vtable/scripts/benchmark-scroll-performance.mjs
@@ -0,0 +1,333 @@
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import { chromium } from 'playwright';
+
+const HOST = '127.0.0.1';
+const PORT = readNumber('BENCHMARK_PORT', 4173);
+const ROUNDS = readNumber('BENCHMARK_ROUNDS', 5);
+const WARMUP_ROUNDS = readNumber('BENCHMARK_WARMUP_ROUNDS', 1);
+const DURATION = readNumber('BENCHMARK_DURATION', 1500);
+const ROWS = readNumber('BENCHMARK_ROWS', 30000);
+const COLUMNS = readNumber('BENCHMARK_COLUMNS', 64);
+const TIMEOUT = readNumber('BENCHMARK_TIMEOUT', 30000);
+const MAX_SCROLL_P95_RATIO = readNumber('BENCHMARK_MAX_SCROLL_P95_RATIO', 2.6);
+const MAX_JUMP_DURATION_RATIO = readNumber('BENCHMARK_MAX_JUMP_DURATION_RATIO', 3.1);
+const MAX_JUMP_ELAPSED_RATIO = readNumber('BENCHMARK_MAX_JUMP_ELAPSED_RATIO', 1.7);
+
+const rootDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const viteCli = path.join(rootDirectory, 'node_modules', 'vite', 'bin', 'vite.js');
+const serverUrl = `http://${HOST}:${PORT}`;
+let server;
+let browser;
+let serverOutput = '';
+
+function readNumber(name, defaultValue) {
+  const rawValue = process.env[name];
+  if (rawValue === undefined) {
+    return defaultValue;
+  }
+  const value = Number(rawValue);
+  if (!Number.isFinite(value) || value < 0) {
+    throw new Error(`${name} must be a non-negative number`);
+  }
+  return value;
+}
+
+function validateConfiguration() {
+  const integerValues = [
+    ['BENCHMARK_PORT', PORT],
+    ['BENCHMARK_ROUNDS', ROUNDS],
+    ['BENCHMARK_WARMUP_ROUNDS', WARMUP_ROUNDS],
+    ['BENCHMARK_ROWS', ROWS],
+    ['BENCHMARK_COLUMNS', COLUMNS]
+  ];
+  for (const [name, value] of integerValues) {
+    if (!Number.isInteger(value)) {
+      throw new Error(`${name} must be an integer`);
+    }
+  }
+  if (PORT < 1 || PORT > 65535 || ROUNDS < 1 || DURATION <= 0 || ROWS < 100 || COLUMNS < 42 || TIMEOUT <= 0) {
+    throw new Error(
+      'Benchmark configuration requires a valid port, at least one round, positive duration/timeout, 100 rows, and 42 columns'
+    );
+  }
+}
+
+function median(values) {
+  const sorted = [...values].sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0 ? (sorted[middle - 1] + sorted[middle]) / 2 : sorted[middle];
+}
+
+function percentile(values, percentileValue) {
+  if (values.length === 0) {
+    return 0;
+  }
+  const sorted = [...values].sort((a, b) => a - b);
+  return sorted[Math.min(sorted.length - 1, Math.ceil((percentileValue / 100) * sorted.length) - 1)];
+}
+
+function round(value) {
+  return Number(value.toFixed(2));
+}
+
+function summarizeSample(result) {
+  const frameBudget = 1000 / 60;
+  return {
+    elapsed: result.elapsed,
+    jumpDuration: result.jumpDuration ?? 0,
+    frameGapP95: percentile(result.frameGaps, 95),
+    frameGapP99: percentile(result.frameGaps, 99),
+    maxFrameGap: Math.max(0, ...result.frameGaps),
+    missedFrameTime: result.frameGaps.reduce((total, gap) => total + Math.max(0, gap - frameBudget), 0),
+    longTaskTime: result.longTasks.reduce((total, duration) => total + duration, 0),
+    maxLongTask: Math.max(0, ...result.longTasks),
+    scrollEvents: result.scrollEvents,
+    cellUpdates: result.cellUpdates,
+    cellUpdatesByType: result.cellUpdatesByType
+  };
+}
+
+function summarizeRuns(samples) {
+  const numericKeys = [
+    'elapsed',
+    'jumpDuration',
+    'frameGapP95',
+    'frameGapP99',
+    'maxFrameGap',
+    'missedFrameTime',
+    'longTaskTime',
+    'maxLongTask',
+    'scrollEvents',
+    'cellUpdates'
+  ];
+  return Object.fromEntries(numericKeys.map(key => [key, round(median(samples.map(sample => sample[key])))]));
+}
+
+function findBrowserExecutable() {
+  if (process.env.BENCHMARK_BROWSER_EXECUTABLE_PATH) {
+    return process.env.BENCHMARK_BROWSER_EXECUTABLE_PATH;
+  }
+  const candidates =
+    process.platform === 'darwin'
+      ? [
+          '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+          '/Applications/Chromium.app/Contents/MacOS/Chromium'
+        ]
+      : ['/usr/bin/google-chrome', '/usr/bin/chromium', '/usr/bin/chromium-browser'];
+  return candidates.find(candidate => fs.existsSync(candidate));
+}
+
+async function waitForServer() {
+  const deadline = Date.now() + TIMEOUT;
+  while (Date.now() < deadline) {
+    if (server.exitCode !== null) {
+      throw new Error(`Vite exited before becoming ready:\n${serverOutput}`);
+    }
+    try {
+      const response = await fetch(`${serverUrl}/issue-5308-scroll-performance.html`);
+      if (response.ok) {
+        return;
+      }
+    } catch {
+      // The server is still starting.
+    }
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+  throw new Error(`Vite did not start within ${TIMEOUT}ms`);
+}
+
+async function runSample(mode, workload) {
+  const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
+  const pageErrors = [];
+  page.on('pageerror', error => pageErrors.push(error.message));
+
+  const params = new URLSearchParams({
+    rows: String(ROWS),
+    cols: String(COLUMNS),
+    cells: workload,
+    frozen: 'off',
+    cross: 'off',
+    duration: String(DURATION),
+    [mode === 'scroll' ? 'auto' : 'jump']: '1'
+  });
+
+  try {
+    await page.goto(`${serverUrl}/issue-5308-scroll-performance.html?${params}`, {
+      waitUntil: 'domcontentloaded',
+      timeout: TIMEOUT
+    });
+    await page.waitForFunction(() => window.issue5308Init?.ready === true, undefined, { timeout: TIMEOUT });
+    await page.waitForFunction(() => window.issue5308Result !== undefined, undefined, { timeout: TIMEOUT });
+    if (pageErrors.length > 0) {
+      throw new Error(`Page error: ${pageErrors.join('; ')}`);
+    }
+    const result = await page.evaluate(() => window.issue5308Result);
+    return { ...summarizeSample(result), cellUpdatesByType: result.cellUpdatesByType };
+  } finally {
+    await page.close();
+  }
+}
+
+async function runScenario(mode) {
+  for (let roundIndex = 0; roundIndex < WARMUP_ROUNDS; roundIndex++) {
+    await runSample(mode, 'text');
+    await runSample(mode, 'complex');
+  }
+
+  const samples = { text: [], complex: [] };
+  for (let roundIndex = 0; roundIndex < ROUNDS; roundIndex++) {
+    const order = roundIndex % 2 === 0 ? ['text', 'complex'] : ['complex', 'text'];
+    for (const workload of order) {
+      samples[workload].push(await runSample(mode, workload));
+    }
+  }
+
+  return {
+    text: summarizeRuns(samples.text),
+    complex: summarizeRuns(samples.complex),
+    samples
+  };
+}
+
+function ratio(complexValue, textValue) {
+  return textValue > 0 ? round(complexValue / textValue) : null;
+}
+
+function verifyCoverage(results) {
+  const expectedTypes = ['checkbox', 'switch', 'button', 'progressbar'];
+  for (const mode of ['scroll', 'jump']) {
+    for (const sample of results[mode].samples.complex) {
+      for (const type of expectedTypes) {
+        if (!sample.cellUpdatesByType[type]) {
+          throw new Error(`${mode} benchmark did not update any ${type} cells`);
+        }
+      }
+    }
+  }
+}
+
+function evaluateThresholds(results) {
+  const comparisons = {
+    scrollP95Ratio: ratio(results.scroll.complex.frameGapP95, results.scroll.text.frameGapP95),
+    jumpDurationRatio: ratio(results.jump.complex.jumpDuration, results.jump.text.jumpDuration),
+    jumpElapsedRatio: ratio(results.jump.complex.elapsed, results.jump.text.elapsed)
+  };
+  const failures = [];
+  const scrollP95Limit = results.scroll.text.frameGapP95 * MAX_SCROLL_P95_RATIO + 4;
+  const jumpDurationLimit = results.jump.text.jumpDuration * MAX_JUMP_DURATION_RATIO + 5;
+  const jumpElapsedLimit = results.jump.text.elapsed * MAX_JUMP_ELAPSED_RATIO + 30;
+
+  if (results.scroll.complex.frameGapP95 > scrollP95Limit) {
+    failures.push(
+      `scroll frame-gap p95 ${results.scroll.complex.frameGapP95}ms exceeds relative limit ${round(
+        scrollP95Limit
+      )}ms`
+    );
+  }
+  if (results.jump.complex.jumpDuration > jumpDurationLimit) {
+    failures.push(
+      `jump synchronous duration ${results.jump.complex.jumpDuration}ms exceeds relative limit ${round(
+        jumpDurationLimit
+      )}ms`
+    );
+  }
+  if (results.jump.complex.elapsed > jumpElapsedLimit) {
+    failures.push(
+      `jump elapsed ${results.jump.complex.elapsed}ms exceeds relative limit ${round(jumpElapsedLimit)}ms`
+    );
+  }
+
+  return {
+    comparisons,
+    thresholds: {
+      maxScrollP95Ratio: MAX_SCROLL_P95_RATIO,
+      scrollP95AdditiveTolerance: 4,
+      maxJumpDurationRatio: MAX_JUMP_DURATION_RATIO,
+      jumpDurationAdditiveTolerance: 5,
+      maxJumpElapsedRatio: MAX_JUMP_ELAPSED_RATIO,
+      jumpElapsedAdditiveTolerance: 30
+    },
+    failures
+  };
+}
+
+function formatSummary(result) {
+  return [
+    '## VTable scroll performance benchmark',
+    '',
+    `- Rounds: ${ROUNDS} (+ ${WARMUP_ROUNDS} warmup)`,
+    `- Scroll p95: text ${result.scroll.text.frameGapP95}ms, complex ${result.scroll.complex.frameGapP95}ms`,
+    `- Jump elapsed: text ${result.jump.text.elapsed}ms, complex ${result.jump.complex.elapsed}ms`,
+    `- Ratios: scroll p95 ${result.evaluation.comparisons.scrollP95Ratio}x, jump duration ${result.evaluation.comparisons.jumpDurationRatio}x, jump elapsed ${result.evaluation.comparisons.jumpElapsedRatio}x`,
+    `- Status: ${result.evaluation.failures.length === 0 ? 'PASS' : 'FAIL'}`,
+    ''
+  ].join('\n');
+}
+
+async function main() {
+  validateConfiguration();
+  if (!fs.existsSync(viteCli)) {
+    throw new Error(`Vite CLI not found at ${viteCli}. Run Rush install first.`);
+  }
+
+  server = spawn(process.execPath, [viteCli, 'serve', 'examples', '--host', HOST, '--port', String(PORT), '--strictPort'], {
+    cwd: rootDirectory,
+    stdio: ['ignore', 'pipe', 'pipe']
+  });
+  const captureServerOutput = chunk => {
+    serverOutput = `${serverOutput}${chunk}`.slice(-4000);
+  };
+  server.stdout.on('data', captureServerOutput);
+  server.stderr.on('data', captureServerOutput);
+  await waitForServer();
+
+  const executablePath = findBrowserExecutable();
+  browser = await chromium.launch({
+    headless: true,
+    ...(executablePath ? { executablePath } : {})
+  });
+
+  const results = {
+    configuration: {
+      rows: ROWS,
+      columns: COLUMNS,
+      duration: DURATION,
+      rounds: ROUNDS,
+      warmupRounds: WARMUP_ROUNDS
+    },
+    scroll: await runScenario('scroll'),
+    jump: await runScenario('jump')
+  };
+  verifyCoverage(results);
+  const evaluation = evaluateThresholds(results);
+  const output = { ...results, evaluation };
+  const serialized = JSON.stringify(output);
+
+  console.log(formatSummary(output));
+  console.log(`VTABLE_BENCHMARK_RESULT=${serialized}`);
+
+  if (process.env.BENCHMARK_OUTPUT) {
+    fs.writeFileSync(path.resolve(process.env.BENCHMARK_OUTPUT), `${JSON.stringify(output, null, 2)}\n`);
+  }
+  if (process.env.GITHUB_STEP_SUMMARY) {
+    fs.appendFileSync(process.env.GITHUB_STEP_SUMMARY, formatSummary(output));
+  }
+  if (evaluation.failures.length > 0) {
+    throw new Error(`Performance regression:\n${evaluation.failures.join('\n')}`);
+  }
+}
+
+async function cleanup() {
+  await browser?.close();
+  server?.kill('SIGTERM');
+}
+
+try {
+  await main();
+} finally {
+  await cleanup();
+}

From e5e2f97a9dd76aaa4180d4604268b20c573f29a8 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 17 Sep 2026 19:49:11 +0800
Subject: [PATCH 7/8] fix: stabilize scroll benchmark gate

Keep idle completion time as diagnostic output because it varies by runner scheduling.
Gate only metrics that distinguish the optimized and disabled fast paths.

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
---
 .../vtable/scripts/benchmark-scroll-performance.mjs   | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/vtable/scripts/benchmark-scroll-performance.mjs b/packages/vtable/scripts/benchmark-scroll-performance.mjs
index dd39ca9e04..38fc2c8a91 100644
--- a/packages/vtable/scripts/benchmark-scroll-performance.mjs
+++ b/packages/vtable/scripts/benchmark-scroll-performance.mjs
@@ -15,7 +15,6 @@ const COLUMNS = readNumber('BENCHMARK_COLUMNS', 64);
 const TIMEOUT = readNumber('BENCHMARK_TIMEOUT', 30000);
 const MAX_SCROLL_P95_RATIO = readNumber('BENCHMARK_MAX_SCROLL_P95_RATIO', 2.6);
 const MAX_JUMP_DURATION_RATIO = readNumber('BENCHMARK_MAX_JUMP_DURATION_RATIO', 3.1);
-const MAX_JUMP_ELAPSED_RATIO = readNumber('BENCHMARK_MAX_JUMP_ELAPSED_RATIO', 1.7);
 
 const rootDirectory = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const viteCli = path.join(rootDirectory, 'node_modules', 'vite', 'bin', 'vite.js');
@@ -219,7 +218,6 @@ function evaluateThresholds(results) {
   const failures = [];
   const scrollP95Limit = results.scroll.text.frameGapP95 * MAX_SCROLL_P95_RATIO + 4;
   const jumpDurationLimit = results.jump.text.jumpDuration * MAX_JUMP_DURATION_RATIO + 5;
-  const jumpElapsedLimit = results.jump.text.elapsed * MAX_JUMP_ELAPSED_RATIO + 30;
 
   if (results.scroll.complex.frameGapP95 > scrollP95Limit) {
     failures.push(
@@ -235,11 +233,6 @@ function evaluateThresholds(results) {
       )}ms`
     );
   }
-  if (results.jump.complex.elapsed > jumpElapsedLimit) {
-    failures.push(
-      `jump elapsed ${results.jump.complex.elapsed}ms exceeds relative limit ${round(jumpElapsedLimit)}ms`
-    );
-  }
 
   return {
     comparisons,
@@ -247,9 +240,7 @@ function evaluateThresholds(results) {
       maxScrollP95Ratio: MAX_SCROLL_P95_RATIO,
       scrollP95AdditiveTolerance: 4,
       maxJumpDurationRatio: MAX_JUMP_DURATION_RATIO,
-      jumpDurationAdditiveTolerance: 5,
-      maxJumpElapsedRatio: MAX_JUMP_ELAPSED_RATIO,
-      jumpElapsedAdditiveTolerance: 30
+      jumpDurationAdditiveTolerance: 5
     },
     failures
   };

From f956ce55b59b6f10e26068ff54305547e02a9684 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Fri, 18 Sep 2026 09:01:19 +0800
Subject: [PATCH 8/8] test: clarify scroll benchmark CI summary

Show gated metrics, limits, diagnostics, and run settings directly on the Actions summary page.

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
---
 .../scripts/benchmark-scroll-performance.mjs  | 73 +++++++++++++++++--
 1 file changed, 66 insertions(+), 7 deletions(-)

diff --git a/packages/vtable/scripts/benchmark-scroll-performance.mjs b/packages/vtable/scripts/benchmark-scroll-performance.mjs
index 38fc2c8a91..0a0b2a1b61 100644
--- a/packages/vtable/scripts/benchmark-scroll-performance.mjs
+++ b/packages/vtable/scripts/benchmark-scroll-performance.mjs
@@ -196,6 +196,11 @@ function ratio(complexValue, textValue) {
   return textValue > 0 ? round(complexValue / textValue) : null;
 }
 
+function formatRatio(complexValue, textValue) {
+  const value = ratio(complexValue, textValue);
+  return value === null ? 'n/a' : `${value}x`;
+}
+
 function verifyCoverage(results) {
   const expectedTypes = ['checkbox', 'switch', 'button', 'progressbar'];
   for (const mode of ['scroll', 'jump']) {
@@ -247,16 +252,70 @@ function evaluateThresholds(results) {
 }
 
 function formatSummary(result) {
-  return [
+  const scrollP95Limit = round(
+    result.scroll.text.frameGapP95 * result.evaluation.thresholds.maxScrollP95Ratio +
+      result.evaluation.thresholds.scrollP95AdditiveTolerance
+  );
+  const jumpDurationLimit = round(
+    result.jump.text.jumpDuration * result.evaluation.thresholds.maxJumpDurationRatio +
+      result.evaluation.thresholds.jumpDurationAdditiveTolerance
+  );
+  const scrollP95Passed = result.scroll.complex.frameGapP95 <= scrollP95Limit;
+  const jumpDurationPassed = result.jump.complex.jumpDuration <= jumpDurationLimit;
+  const passed = result.evaluation.failures.length === 0;
+  const lines = [
     '## VTable scroll performance benchmark',
     '',
-    `- Rounds: ${ROUNDS} (+ ${WARMUP_ROUNDS} warmup)`,
-    `- Scroll p95: text ${result.scroll.text.frameGapP95}ms, complex ${result.scroll.complex.frameGapP95}ms`,
-    `- Jump elapsed: text ${result.jump.text.elapsed}ms, complex ${result.jump.complex.elapsed}ms`,
-    `- Ratios: scroll p95 ${result.evaluation.comparisons.scrollP95Ratio}x, jump duration ${result.evaluation.comparisons.jumpDurationRatio}x, jump elapsed ${result.evaluation.comparisons.jumpElapsedRatio}x`,
-    `- Status: ${result.evaluation.failures.length === 0 ? 'PASS' : 'FAIL'}`,
+    `### Result: **${passed ? 'PASS' : 'FAIL'}**`,
+    '',
+    'Lower values are better. Limits are calculated from the text-cell control in the same run.',
+    '',
+    '| Gated metric | Text control | Complex cells | Relative | Allowed maximum | Result |',
+    '| --- | ---: | ---: | ---: | ---: | :---: |',
+    `| Scroll frame-gap p95 | ${result.scroll.text.frameGapP95} ms | ${
+      result.scroll.complex.frameGapP95
+    } ms | ${result.evaluation.comparisons.scrollP95Ratio}x | ${scrollP95Limit} ms | ${
+      scrollP95Passed ? 'PASS' : 'FAIL'
+    } |`,
+    `| Jump synchronous duration | ${result.jump.text.jumpDuration} ms | ${
+      result.jump.complex.jumpDuration
+    } ms | ${result.evaluation.comparisons.jumpDurationRatio}x | ${jumpDurationLimit} ms | ${
+      jumpDurationPassed ? 'PASS' : 'FAIL'
+    } |`,
+    '',
+    '### Diagnostics',
+    '',
+    'These values are reported for investigation but do not fail the build.',
+    '',
+    '| Metric | Text control | Complex cells | Relative |',
+    '| --- | ---: | ---: | ---: |',
+    `| Scroll missed-frame time | ${result.scroll.text.missedFrameTime} ms | ${
+      result.scroll.complex.missedFrameTime
+    } ms | ${formatRatio(result.scroll.complex.missedFrameTime, result.scroll.text.missedFrameTime)} |`,
+    `| Scroll long-task time | ${result.scroll.text.longTaskTime} ms | ${
+      result.scroll.complex.longTaskTime
+    } ms | ${formatRatio(result.scroll.complex.longTaskTime, result.scroll.text.longTaskTime)} |`,
+    `| Jump completion time | ${result.jump.text.elapsed} ms | ${result.jump.complex.elapsed} ms | ${
+      result.evaluation.comparisons.jumpElapsedRatio
+    }x |`,
+    '',
+    '<details>',
+    '<summary>Run configuration</summary>',
+    '',
+    `- Rows: ${result.configuration.rows}`,
+    `- Columns: ${result.configuration.columns}`,
+    `- Scroll duration: ${result.configuration.duration} ms`,
+    `- Samples: ${result.configuration.rounds} measured + ${result.configuration.warmupRounds} warmup per case`,
+    '',
+    '</details>',
     ''
-  ].join('\n');
+  ];
+
+  if (!passed) {
+    lines.push('### Failed checks', '', ...result.evaluation.failures.map(failure => `- ${failure}`), '');
+  }
+
+  return lines.join('\n');
 }
 
 async function main() {