从4.9.6+版本开始，当列头过多，带有固定列左右漂浮时候XY滚时候非常卡

[vla]

可复现的链接（必须为公开链接，仅包含能复现问题的示例代码）：

demo代码 版本改成 <script src="https://unpkg.com/vxe-table@4.9.5"> 后XY滚动条非常快不卡顿

是否已准备好复现链接与示例代码？

• 我确定已准备好以上复现链接

问题描述与截图：

在4.9.6版本到最新版时候，数据行30条，列大概20左右，有固定列左和右，还有footer自定义的工具条。只要降低到4.9.5就非常流畅没问题。

代码历史记录为："优化虚拟渲染，渲染性能提升80%，大幅降低渲染期白屏"

期望的结果：

No response

操作系统：

windows11

浏览器版本：

edge 131.0.2903.112

vue 版本：

3.5.13

vxe-pc-ui 版本：

4.3.69

vxe-table 版本：

4.9.6+

是否使用当前最新版本？

• 我确定已经更新到最新版本后依然存在该问题

[vla]

默认参数

VxeUI.setConfig({
  table: {
    border: true,
    autoResize: false,
    stripe: true,
    headerAlign: 'center',
    showOverflow: true,
    showHeaderOverflow: true,
    showFooterOverflow: true,
    tooltipConfig: {
      enterable: true,
    },
    columnConfig: {
      resizable: true,
      isHover: true,
    },
    rowConfig: { isCurrent: true, isHover: true },
    sortConfig: { trigger: 'cell' },
    round: true,
    emptyText: '暂无数据',
    scrollY: {
      enabled: true,
    },
    checkboxConfig: { highlight: true },
  },
});

[transtone]

20列已经需要开启虚拟滚动了，加上下面的配置试试：

  scrollX: {
    enabled: true,
    gt: 0
  },

[vla]

20列已经需要开启虚拟滚动了，加上下面的配置试试：

  scrollX: {
    enabled: true,
    gt: 0
  },

开启了也会，我还是先回退4.9.5用没问题

[vla]

在线demo

https://jsrun.net/nBtKp

版本改成 <script src="https://unpkg.com/vxe-table@4.9.5"> 后XY滚动条非常快不卡顿

演示demo和实际是有出入的，真是场景单页面还有很多UI，卡顿会更明显。

[vla]

XY的oSize设置100好了一点，但动态设置网格高度，如窗口缩放时候设置table的height同样卡顿严重T_T

[transtone]

在线demo

https://jsrun.net/nBtKp

版本改成 <script src="https://unpkg.com/vxe-table@4.9.5"> 后XY滚动条非常快不卡顿

演示demo和实际是有出入的，真是场景单页面还有很多UI，卡顿会更明显。

打开跑了一下，感觉还好啊，并没有明显卡顿。至于固定列不跟随主内容的问题，加个参数：

  scrollY: { enabled: true, gt: 0, mode: 'wheel' },

[xlz26296]

这个版本才是根治固定列滚动不同步、虚拟滚动白屏的最终解决方案
https://jsrun.net/SBtKp/edit

[transtone]

这个版本才是根治固定列滚动不同步、虚拟滚动白屏的最终解决方案 https://jsrun.net/SBtKp/edit

老大，你这个链接跑不起来啊。
网速太慢~~ 。看效果是不错，正在研究。

好吧金刚大佬，你这是 4.10.6-beta.6 版啊，都没发布。用 4.10.5 都卡。

在本地项目上用 4.10.6-beta7 测试了一下，去掉 mode: 'wheel' 参数，
列滚动不同步倒是正常了，
但虚拟滚动白屏还是存在，只要是 slot 带自定义模版的数据或表头，都会先白屏再延时出现。

更新1

本地项目更新到 4.10.6-beta.9 ，卡的不行，根本没法用。

更新2

上边的 demo 项目更新版本到 4.10.6-beta.17 ，纵向滚动比较跟手。横向滚动时表头和内容错位。

[volcanoqq]

什么原因呢，主要是fixed列太卡，把fixed设置为null之后不卡，这个问题困扰了我很久

[transtone]

什么原因呢，主要是fixed列太卡，把fixed设置为null之后不卡，这个问题困扰了我很久

固定列是一个单独的表，如果左右都有固定列，那滚动条滚动的不是一个 table，是3个。

[volcanoqq]

什么原因呢，主要是fixed列太卡，把fixed设置为null之后不卡，这个问题困扰了我很久

固定列是一个单独的表，如果左右都有固定列，那滚动条滚动的不是一个 table，是3个。

有什么好的解决方案吗，调过gt，oSize，wheel，效果都不如把fixed列取消。

[vla]

在线demo
https://jsrun.net/nBtKp
版本改成 <script src="https://unpkg.com/vxe-table@4.9.5"> 后XY滚动条非常快不卡顿
演示demo和实际是有出入的，真是场景单页面还有很多UI，卡顿会更明显。

打开跑了一下，感觉还好啊，并没有明显卡顿。至于固定列不跟随主内容的问题，加个参数：

  scrollY: { enabled: true, gt: 0, mode: 'wheel' },

mode我也试过了，只要oSize设置100就还可以。反正我看debounce的改成fps计算后，CPU占用率非常高，4.9.5大概80%左右，4.10.5的CPU达到180~230%，浏览器的任务管理器监控。

debounce毕竟频率低，所以没有卡顿问题，所以出现空白情况会大。
现在改成FPS，如果oSize不设置大一点，就卡死了。

我这里的项目用的是naiveui，本身性能也是差，CPU使用率也过高，结合现在fps的计算频率，卡顿非常只明显，有空我录个视频放上来

[BigRockCandy]

别说20列了 升级后我6列有固定列都卡

[BigRockCandy]

同换回4.9.5 啥问题都没了

[vla]

【vxetable-4.9.6+卡顿演示】 https://www.bilibili.com/video/BV1nbc9e2EJh/?share_source=copy_web&vd_source=bda543e3f84d3f31be74cb81c2085b8c

@transtone

[transtone]

同换回 4.9.5 啥问题都没了

4.9.5 确实流畅，后面的版本都负优化了，看金刚怎么更新吧。
只是 4.9.5 的 drag 支持不好，不支持 trigger 参数，很难用。

======

自己合并了一个 4.9.5 + 4.9.28 的版本，将滚动更新的代码去掉了，合并了 drag 的优化更新，在后续版本没有解决卡顿问题之前，就保持在这个版本了：https://www.npmjs.com/package/@rockme/vxe-table

我是最近才从 4.6.x 版本升级过来的，一直没有发现 4.9.5 这么流畅，感谢楼主 @vla

[volcanoqq]

9e390727433935c9f6ddd3dfa0999302.mp4

3000条数据
设置了oSize:100，滚动一段会出现白屏

[xuliangzhan]

虚拟渲染的下一次重构会在 v3.12.10+, v4.10.6 版本中，向下兼容 v3.9+,v4.7+可以无缝升级。

优化固定列渲染期空白问题
优化虚拟滚动固定列不同步渲染问题
支持分组列宽拖拽
支持自定义滚动条位置
支持自定义单元格默认高度
大幅提升虚拟列表性能
优化动态行高虚拟算法，提升动态行高虚拟渲染性能
提升自适应列宽的流畅度
对双击列头自适应列宽的完整支持
支持行高拖拽调整高度