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

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    }  })
// ...省略其他代码

// 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;  }

// packages\vue\src\grid\src\header\src\header.tsfunction 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.tsxfunction 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>  )

// packages\vue\src\grid\src\composable\useCellStatus.tsexport 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.tsconst 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}

// template add code<tiny-button @click="handleScroll">开始滚动</tiny-button>
// ...省略其他代码
// script add codeconst 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();};