精读《高性能表格》

每个前端都想做一个完美的表格，业界也在持续探索不同的思路，比如钉钉表格、语雀表格。

笔者所在数据中台团队也对表格有着极高的要求，尤其是自助分析表格，需要兼顾性能与交互功能，本文便是记录自助分析表格高性能的研发思路。

精读

要做表格首先要选择基于 DOM 还是 Canvas，这是技术选型的第一步。比如钉钉表格就是 基于 Canvas 实现的，当然这不代表 Canvas 实现就比 DOM 实现要好，从技术上各有利弊：

• Canvas 渲染效率比 DOM 高，这是浏览器实现导致的。

• DOM 可拓展性比 Canvas 好，渲染自定义内容首选 DOM 而非 Canvas。

技术选型要看具体的业务场景，钉钉表格其实就是在线 Excel，Excel 这种形态决定了单元格内一定是简单文本加一些简单图标，因此不用考虑渲染自定义内容的场景，所以选择 Canvas 渲染在未来也不会遇到不好拓展的麻烦。

而自助分析表格天然可能拓展图形、图片、操作按钮到单元格中，对轴的拖拽响应交互也非常复杂，为了不让 Canvas 成为以后拓展的瓶颈，还是选择 DOM 实现比较妥当。

那问题来了，既然 DOM 渲染效率天然比 Canvas 低，我们应该如何用 DOM 实现一个高性能表格呢？

其实业界已经有许多 DOM 表格优化方案了，主要以按需渲染、虚拟滚动为主，即预留一些 Buffer 区域用于滑动时填充，表格仅渲染可视区域与 Buffer 区域部分。但这些方案都不可避免的存在快速滑动时白屏问题，笔者通过不断尝试终于发现了一种完美解决的方案，我们一起往下看吧！

单元格使用 DIV 绝对定位

即每个单元格都是用绝对定位的 DIV 实现，整个表格都是有独立计算位置的 DIV 拼接而成的：

这样做的前提是：

1. 所有单元格位置都要提前计算，这里可以利用 web worker 做并行计算。

2. 单元格合并仅是产生一个更大的单元格，它的定位方式与小单元格并无差异。

带来的好处是：

1. 滚动时，单元格可以最大程度实现复用。

2. 对于合并的单元格，只会让可视区域渲染的总单元格数更小，更利于性能提升，而不是带来性能负担。