最近在浏览项目时无意中发现负责的模块在滚动时会出现些许卡顿。
通过chrome的performance工具进行对比测试发现：
- 鼠标放在滚动条上，即不再页面之内时，用滚轮进行滚动，无明显异常；
- 鼠标放在table组件上时，用滚轮滚动，感觉到了卡顿，见下图；
performance
从上图可以发现，在某些时间段内帧数极低，同时火焰图上可以发现于此同时在执行mouseenter事件的函数，综上推测源头应该是鼠标移动的相关事件，这个鼠标事件本身耗时不多，但是触发了Vue的updateComponent。
同时使用Vue官方插件，它在新版同样提供了性能测试功能：
Component render
Frames per second
可以注意到，ElTableColumn的updateRender触发了非常多次，虽然每次时间不长，但是集合起来很多。
同时cell-mouse-enter在一秒内触发多次。
打开v2.4.9的element-UI源代码，找到了ElemeFE/element/v2.4.9/packages/table/src/table-body.js这个文件，里面赫然写着
...
handleCellMouseEnter(event, row) {
...
const tooltip = this.$refs.tooltip;
// TODO 会引起整个 Table 的重新渲染，需要优化
this.tooltipContent = cell.innerText || cell.textContent;
tooltip.referenceElm = cell;
...
}
...
相关的issue，我推测是由于饿了么框架在鼠标滑过单元格时，为了显示tooltips，触发了数据更新，特别是在表格中有计算的值会导致页面更慢。
解决方案：
- 升级elementui到v2.6.0以上的版本；
- 不在表格中使用计算的属性用来展示可缓解问题；
