精读《高性能表格》

[ascoders]

笔者结合自身项目经历，总结做高性能表格的方法，实现以下效果：

1. 鼠标 or 拖滚动条滚动完全无白屏。
2. 行列与单元格跟随无延迟。
3. 可拓展，单元格可任意合并替换为可视化组件。

---

精读《高性能表格》

[shijiatongxue]

文章很赞👏，有两个疑问

1. 横轴只能纵向滚动是指？
2. 有demo吗？

[zhengao261]

文章很赞，我也刚用 DOM 实现了一个高性能的表格。

可以实现表头固定和左右列固定

性能是同数据量 ElementUI 表格的3-5倍。且大数据量渲染之后，拖拽滚动无卡顿，无延迟。

实践总结了一下就是要想高性能，尽量少的使用事件监听。

为了提升性能使用了一些黑科技，刚加了学长微信，可以给黄大神提供一些不成熟的思路哈。

[ascoders]

@shijiatongxue 无 demo，内部产品不方便放出来，但效果是验证过的。

[jhoneybee]

我正在实现一个高性能的表格. 总结一下几点.

1. 采用 react-window 来作虚拟滚动.
2. 固定列, 采用 position: absolute; float: right or left . 一共三个表格
3. 合并列头部, 采用表格头部和body 分离, 那么只要计算出来宽度对其,那么就没有其他问题了.
4. 编辑表格 cell 在 click 的时候切换一下编辑器即可 ( 还在开发)

PS: 不知道为什么 Linux 下录制会是这样的.

期间遇到的问题

1. 有滚动条的时候, 滚动条会占用宽度, 最后动态生成不可见的div 来获取到滚动条的宽度
2. 头部合并的时候, 采用 flex 布局来进行自动居中. 头部是嵌套的.
3. 最后一点, 其实非常重要, 数据驱动视图, 定义好表格的数据格式,.

[ascoders]

下面是比较完整的，文件 10M，如果卡顿可能你本地没下载完。上图是1M大小的。

这个是笔者按照本文思路实现的效果，供参考。数据量123万单元格。

[jhoneybee]

关于表格的滚动条同步问题,大致和以下有关

• CSS will-change 属性
• Chrome 73 中的 {passive: false}

参照地址

• mouse wheel scrolling broken in chrome bvaughn/react-window#221
• Chrome 73 breaks wheel events facebook/react#14856

效果如下

[leewhite97]

好奇单元格宽高要如何计算，尤其是非文字，自定义渲染内容的情况下。

[ascoders]

好奇单元格宽高要如何计算，尤其是非文字，自定义渲染内容的情况下。

每个单元格固定宽高，一般在配置的时候设置好宽高的，如果调整为动态模式，就等图片之类资源加载完后动态调整单元格宽高，并把滚动条调整一下，让整个表格看上去没有跳动。

[zenglinan]

请教一下作者和各位大佬，文中说的 “快速滚动时惊喜的发现不会白屏了，原因是用 js 控制触发的滚动发生在渲染完成之后，所以浏览器会在滚动发生前现完成渲染，这相当有趣。” 是怎么做到的呀？
我理解是 mousewheel 的时候去触发一次渲染，并且加锁，渲染完后再设置偏移滚动到对应位置，然后再解锁。上锁期间不会响应 mousewheel 事件，防止频繁滚动频繁触发渲染。
不知道理解的对不对，还请各位指点

[ascoders]

@zenglinan 效果是这样，但实现没那么复杂。用 js 控制滚动自然就能实现该效果。

也可以做一种类比，假设用 canvas 绘制表格，那么你可以在滚动函数里实现渲染，滚动多少位移，就渲染多少位移的像素，只要按需渲染优化做得好，滚动就不会卡顿，然而渲染永远发生在滚动前，所以不可能出现白屏。

[daisybin]

@zhengao261 hello 你好 我在尝试实现这个table 遇到一些问题 想问一下是否可与你参考一下你的代码