对于需要固定表头和表列的table，往往数据量都比较大。我们可以对现有的实现方式做更进一步的优化尝试。
使用tranfrom来代替设置scrollLeft
考虑浏览器重排和重绘，一般来说，scrollLeft会引起一次重排，而transfrom仅仅是一次重绘，同时我们可以使用transform3D使用GPU来加速浏览器的渲染。那么，是不是可以考虑在scroll事件中，使用transform来代替scrollLeft的设置呢？
在React 实现一个漂亮的 Table | HYPERS 前端团队博客这篇文章中，有提及到实现一个优化的table组件使用下面两点来优化onScroll 触发的频率和渲染的速度跟不上造成的抖动问题，他的解决办法如下：
用 transform: translate3D 代替 top 与 left ，因为 top/left 会导致回流，而 translate 只产生重绘，性能会更好，另外 translate3D 走的是 3D, 在手机浏览器器上会 GPU 加速。onScroll 触发的频率和渲染的速度会存在跟不上的情况，所有这里最好是自己实现一个滚动条，在 Table Body 上监听 onWheel 事件，在滚动条上监听 onMouse* 事件。 在自己实现滚动条的时候需要注意的是，在 Mac 的 chrome 上，左右滑动的时候会触发浏览器的上一页和下一页功能，所以这里的事件冒泡要处理好（本来想找一个开源的滚动条轮子，发现有好多组件这个问题没有处理好，所以就自己写了）。
减少scroll事件中的dom操作
为了更好的对比table的scroll性能，通过对iview和element两个组件库的table均进行了5000行数据下table滚动的测试，发现两者均有一定的抖动（都有做防抖动处理，不够明显）。
查看两个组件库的源码，发现两者均在scroll事件中执行了较多的逻辑判断，例如iview在scroll中进行了column是否存在的判断，时，每次渲染都对操作那一列进行了重新渲染计算，element在scroll时，对左右和上下的滚动都进行了判断计算，这些也都影响滚动的性能。由于onscroll的高频触发，尽量减少scroll事件中对dom的计算和操作，减少浏览器重排和重绘。
优化滚动事件
对于onscroll，onresize等这一类高频触发的事件，如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。
对用户来说，平滑的滚动往往能带来很好的交互效果，优化滚动事件往往有以下三种方法：
- 防抖（Debouncing）：把多个操作合并为一个，即在一定时间内，规定事件出发的次数。
- 节流（Throttling）：只允许操作在一定时间内执行一次，只有当上一次操作执行后过了你规定的时间间隔，才能进行下一次。这种方法往往运用于图片懒加载的的优化。
- 使用 rAF（requestAnimationFrame）触发滚动事件：在页面重绘之前，通知浏览器进行操作。
一般来说，现有的table组件中，一般采用第一种方式来对scroll事件进行处理，通过约束一定时间内发生的次数，来因为用户过快操作导致的scroll请求。