element-UI(v2.4.9)table性能问题浅谈

最近在浏览项目时无意中发现负责的模块在滚动时会出现些许卡顿。

通过chrome的performance工具进行对比测试发现：

1. 鼠标放在滚动条上，即不再页面之内时，用滚轮进行滚动，无明显异常；
2. 鼠标放在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，触发了数据更新，特别是在表格中有计算的值会导致页面更慢。

解决方案：

1. 升级elementui到v2.6.0以上的版本；
2. 不在表格中使用计算的属性用来展示可缓解问题；