TinyVue表格重构 5 大关键帧一次曝光！内存节省 27%，JS 执行时间减少 43% ，FPS 提升 110%

本文由体验技术团队岑灌铭原创。

前言

表格作为组件库高频使用的组件，它作为承载、展示和交互数据的核心载体,每一次卡顿都可能意味着时间的浪费与耐心的消磨。 然而有小伙伴反馈说，表格组件树表数据滚动场景卡顿，偶尔会出现白屏现象，甚至会出现表头和表体滚动不同步的情况。 后来据了解是小伙伴的机器性能较为普通，加上表格树表大数据虚拟滚动确实存在较大的性能瓶颈，存在大量的计算与dom操作。 问题在性能较好的机器上被"屏蔽"了。

1. 打开 performance 面板
2. 点击面板内右上角设置按钮
3. 在 CPU 设置选项中点击弹出下拉面板
4. 选择需要降低的 CPU 倍率

在降低 CPU 性能 4x 减速后，再使用官网中的树表大数据demo体验滚动，用户反馈的问题也成功地"轻松"复现了。

白屏与滚动不同步的表格滚动体验实在是太差了，因此我们决定针对表格滚动场景做一个专项优化，解决这一大痛点。

使用performance工具分析滚动场景下任务耗时，发现其中hasRowChange和renderColumn比较耗时。

其中hasRowChange是动态计算表格中单元格有无发生数据变化。

renderColumn 就是渲染表格行和列了，展开后发现是其中vue更新组件耗时，其中涉及dom元素的创建和销毁，事件的处理等。

针对已有分析的问题，主要对表格做了如下重构：

主要重构点

单元格事件委托

重构前：

在之前的实现中，每个单元格（cell）都单独绑定了自己的事件监听器，并在单元格内容更新或页面滚动导致单元格变化时，频繁地进行事件监听器的绑定和销毁操作。这种做法在处理大数据量表格时，尤其是在滚动过程中动态更新单元格内容的情况下，占用了大量的资源。

重构后：

为了优化这一情况，采用了事件委托的技术方案；将所有单元格的事件处理器统一绑定到外层表格（table）上，利用事件冒泡机制，仅保留一个全局的事件处理器。无论表格中有多少个单元格，或是单元格如何动态变化，都不需要再对每个单元格单独管理事件监听器。相反，通过在外层表格上捕获并分发事件，我们可以显著减少因频繁绑定和销毁事件监听器带来的资源消耗，从而提升整体应用性能

关键代码修改：

将单元格事件处理逻辑使用composition-api抽离到packages\vue\src\grid\src\composable\useCellEvent.ts中

详细的处理逻辑可以查看具体文件

const bindMouseEvents = (target) => {
    on(target, 'mouseenter', handleMouseEnter, true)
    on(target, 'mouseleave', handleMouseLeave, true)
    on(target, 'mousedown', handleMouseDown, true)
    on(target, 'click', handleClick, true)
    on(target, 'dblclick', handleDoubleClick, true)
  }
// ...省略其他代码
hooks.watch(table, (table, old) => {
    if (isBound && old) {
      unbindMouseEvents(old)
      isBound = false
    }

    if (!isBound && table) {
      bindMouseEvents(table)
      isBound = true
    }
  })

// ...省略其他代码

空数据展示优化

重构前：

之前空数据居中展示，需要通过复杂的JS逻辑计算，保存表格的表体高度（表格整体高度减去表头高度），再通过js给空数据赋值对应高度，使其能够适配表体高度。期间会读取到clientHeight触发不必要的回流。

重构后：

重构后的空数据居中展示，使用纯css方案，使用sticky粘性定位加高度自适应实现，避免JS逻辑计算。

关键代码修改：

// packages\vue\src\grid\src\table\src\methods.ts
// 删除updateTableBodyHeight方法
  updateTableBodyHeight() {
    if (!this.tasks.updateTableBodyHeight) {
      this.tasks.updateTableBodyHeight = () => {
        fastdom.measure(() => {
          const tableBodyElem = this.elemStore['main-body-wrapper']
          this.tableBodyHeight = tableBodyElem ? tableBodyElem.clientHeight : 0
        })
      }
    }

    this.tasks.updateTableBodyHeight()
  },

// packages\theme\src\grid\table.less
// 改用sticky定位
  & &__empty-block {
    height: 100%;
    min-height: 60px;
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: sticky;
    left: 0;
    flex: auto;
    flex-direction: column;
  }

表头、表体、表尾三合一。

重构前：

在过去的版本中，为了实现表头固定显示在顶部，将表头、表体、表尾拆分为了三个表格，使滚动条仅出现在表体中从未达到表头固定展示的效果。当滚动横向滚动条时，通过js逻辑同步设置表头。表尾的滚动位置，达到三者同步效果。在性能不佳的机器上，大数据滚动场景会出现表头表尾不同步的问题。

重构后：

最新版本的表格目前将表头、表体、表尾都合并到了一个table中，同样使用sticky定位去实现表头固定显示在顶部，删除滚动同步逻辑。由于三者位于同一滚动容器中，因此不会出现滚动不同步问题。

关键代码修改：

// packages\vue\src\grid\src\header\src\header.ts
function renderHeaderTable(args) {
  // ...省略其他代码
  return h(
    'table',
    {
      class: 'tiny-grid__header',
      style: { tableLayout },
      attrs: { cellspacing: 0, cellpadding: 0, border: 0 },
      ref: 'table'
    },
    [
      // 列宽
      renderTableColgroup(tableColumn),
      // 头部
      renderTableThead(args1)
    ]
  )
}

// packages\vue\src\grid\src\body\src\body.tsx
function renderTable({ $table, _vm, tableColumn, tableData, tableLayout }) {
  return h(
    'table',
    {
      class: 'tiny-grid__body',
      style: { tableLayout },
      attrs: { cellspacing: 0, cellpadding: 0, border: 0 },
      ref: 'table'
    },
    [
      // 渲染colgroup标签，设置表格列宽度，保证表头的表格和表体的表格每列宽相同
      h(
        'colgroup',
        { ref: 'colgroup' },
        tableColumn.map((column, columnIndex) => h('col', { attrs: { name: column.id }, key: columnIndex }))
      ),
      h('tbody', { ref: 'tbody' }, renderRows({ h, _vm, $table, $seq: '', rowLevel: 0, tableData, tableColumn }))
    ]
  )
}


// packages\vue\src\grid\src\footer\src\footer.ts
  render() 
    // ...省略其他代码 
    return h(
      'div',
      {
        class: ['tiny-grid__footer-wrapper', 'body__wrapper'],
        on: { scroll: this.scrollEvent }
      },
      [
        h('div', { class: 'tiny-grid-body__x-space', ref: 'xSpace' }),
        typeof renderFooter === 'function'
          ? renderFooter(renderParams, h)
          : h(
              'table',
              {
                class: 'tiny-grid__footer',
                style: { tableLayout },
                attrs: tableAttrs,
                ref: 'table'
              },
              [
                //  列宽
                colgroupVNode,
                // 底部
                tfootVNode
              ]
            )
      ]
    )
  },

// packages\vue\src\grid\src\body\src\body.tsx
// heder、body、footer三者再同一个table中
const tableVnode = (
    <table
      ref="table"
      class="tiny-grid__body"
      style={{ tableLayout, width: bodyTableWidth ? `${bodyTableWidth}px` : undefined }}
      cellspacing={0}
      cellpadding={0}
      border={0}
      data-tableid={$table.id}>
      {[
        // 列分组（用于指定列宽）
        <colgroup ref="colgroup">
          {columnPool.map(({ id, item: column, used }) => {
            return (
              <col
                key={id}
                name={column.id}
                width={String(column.renderWidth)}
                style={{ display: used ? undefined : 'none' }}
              />
            )
          })}
        </colgroup>,
        // 表头
        $table.showHeader ? <thead ref="thead">{renderHeaderRows(_vm)}</thead> : null,
        // 表体内容
        <tbody ref="tbody">{renderRows(_vm)}</tbody>,
        // 表尾
        $table.showFooter && !isNoData && typeof $table.renderFooter !== 'function' ? (
          <tfoot ref="tfoot">{renderFooterRows(_vm)}</tfoot>
        ) : null
      ]}
    </table>
  )

增加数据缓存，以空间换时间

重构前：

在之前的实现中，每次滚动时都会对每个单元格的状态进行重新计算，例如判断单元格数据是否发生变化（dirty check），这些操作涉及大量的计算资源，进一步加重了主线程的负担。频繁的重新计算和大对象查询导致了滚动等其他逻辑执行缓慢，引起卡顿问题。

重构后：

引入了缓存机制。在第一次渲染时，将每个单元格的 dirty 状态存储在一个小型缓存表中。这样，在后续的滚动过程中，无需再进行重复的状态计算或从原始大对象中查询数据，而是直接在缓存表中快速查找所需信息。通过这种方式，以空间换时间，减少不必要的计算开销。

关键代码修改：

将单元格状态相关逻辑使用composition-api抽离到packages\vue\src\grid\src\composable\useCellStatus.ts中

将数据相关缓存抽离到packages\vue\src\grid\src\composable\useData.ts中

// packages\vue\src\grid\src\composable\useCellStatus.ts
export const getCellStatus = ($table, row, column) => {
  const cellKey = getCellKey($table, row, column)
  const map = $table.cellStatus

  if (map.has(cellKey)) {
    return map.get(cellKey)
  } else {
    return { isDirty: false }
  }
}

// packages\vue\src\grid\src\composable\useData.ts
const structure = ({ array, stack, tiled, map, customMappings, getID, childrenKey, sizeKey }) => {
  if (!Array.isArray(array)) {
    return
  }

  const level = stack.length
  const nodes = []

  for (let i = 0; i < array.length; i++) {
    const item = array[i]

    const node = {
      id: getID(item) || ++nid,
      payload: item,
      path: [...stack, item],
      level,
      parentNode: level > 0 ? map.get(stack[stack.length - 1]) : undefined,
      childNodes: undefined,
      space: { originDistance: 0, size: item[sizeKey] || 36 },
      mappings: customMappings ? Object.assign({}, customMappings({ payload: item, viewIndex: tiled.length })) : {}
    }

    tiled.push(node)
    map.set(item, node)
    nodes.push(node)

    if (childrenKey) {
      stack.push(item)
      node.childNodes = structure({
        array: item[childrenKey],
        stack,
        tiled,
        map,
        customMappings,
        getID,
        childrenKey,
        sizeKey
      })
      stack.pop()
    }
  }

  return nodes
}

其他更新

• 特性增强：表格支持跨冻结列合并
• 优化渲染机制，减少表格内组件重新 render 次数
• 优化列配置收集，列配置收集完成后再渲染真实表格，解决表格初始化渲染高度过大问题。

验证性能提升

测试环境信息：

• 浏览器：chrome 版本 138.0.7204.158 无痕模式
• 操作系统: win10 专业版
• 处理器： Intel(R) Xeon(R) Gold 6278C CPU
• 内存： 32GB

本次性能测试的 demo 是官网中已有的树表虚拟滚动：opentiny.design/tiny-vue/zh...

先来看看直观感受

重构前：

可以明显的看到，当纵向和横向快速滚动时，都会出现白屏现象。且滚动条也较为卡顿。 重构后：

重构后，无论是横向亦或是纵向快速滚动，都不会出现白屏现象，滚动效果也相对丝滑。

利用 performance 记录一下大数据树表虚拟滚动初始化的情况。

重构前的内存占用约为 37.2M （832KB 应为 chrome 初始化必需内存），代码执行时间为 981ms。

重构后的内存占用约为 27M，代码执行时间为 552ms。

小结： 大数据树表虚拟滚动初始化场景，内存节省27%, js 执行时间减少43%,另外渲染和绘制时间也有小幅提升。

再来记录一下滚动场景： 对 Demo 进行以下改造，点击按钮后, 在 3 秒内对表格进行横向滚动6000px

// template add code
<tiny-button @click="handleScroll">开始滚动</tiny-button>

// ...省略其他代码

// script add code
const grid = ref();
const handleScroll = () => {
  const now = Date.now();
  let frameCount = 0;
  const doScroll = () => {
    const time = Date.now() - now;
    requestAnimationFrame(() => {
      frameCount++;
      if (time <= 3000) {
        grid.value.scrollTo(time * 2);
        doScroll();
      } else {
        console.log(`滚动结束:平均帧率为${frameCount / 3}FPS`);
      }
    });
  };
  doScroll();
};

先使用 chrome performance 工具记录，然后再点击按钮

重构前后数据对比如下：

重构前：FPS 约为20FPS,js 执行时间为2288ms

重构后：FPS 约为44FPS,js 执行时间为1302ms

重构后单个任务中，已经消除了状态计算的逻辑，renderColumn任务也从40ms降低为15ms

小结： 大数据树表虚拟滚动横向场景下，FPS 提升110%, js 执行时间减少43%

总结

主要优化点：

• 事件委托：将单元格事件统一绑定到表格外层，减少事件监听器频繁绑定/销毁
• CSS 优化：空数据展示改用纯 CSS 方案，避免 JS 计算和回流
• 结构简化：表头、表体、表尾合并为单一表格，使用 sticky 定位，消除滚动同步问题
• 缓存机制：增加数据缓存，以空间换时间，减少重复计算
• 滚动优化：分离滚动处理与数据剪切逻辑，提高响应速度

中等配置电脑下性能提升如下：

初始化场景：内存节省 27%，JS 执行时间减少 43% 滚动场景：FPS 提升 110%（20FPS → 44FPS），JS 执行时间减少 43%

关于 OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：opentiny.design
OpenTiny 代码仓库：github.com/opentiny
TinyVue 源码：github.com/opentiny/ti...
TinyEngine 源码： github.com/opentiny/ti...

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~ 如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~