最近在瀏覽項目時無意中發(fā)現(xiàn)負責的模塊在滾動時會出現(xiàn)些許卡頓。
通過chrome的performance工具進行對比測試發(fā)現(xiàn)：
- 鼠標放在滾動條上密强，即不再頁面之內時，用滾輪進行滾動蜗元，無明顯異常或渤；
- 鼠標放在table組件上時，用滾輪滾動奕扣，感覺到了卡頓薪鹦，見下圖；
performance
從上圖可以發(fā)現(xiàn)，在某些時間段內幀數(shù)極低池磁，同時火焰圖上可以發(fā)現(xiàn)于此同時在執(zhí)行mouseenter事件的函數(shù)奔害，綜上推測源頭應該是鼠標移動的相關事件，這個鼠標事件本身耗時不多地熄，但是觸發(fā)了Vue的updateComponent华临。
同時使用Vue官方插件，它在新版同樣提供了性能測試功能：
Component render
Frames per second
可以注意到端考，ElTableColumn的updateRender觸發(fā)了非常多次雅潭，雖然每次時間不長，但是集合起來很多却特。
同時cell-mouse-enter在一秒內觸發(fā)多次扶供。
打開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 的重新渲染椿浓，需要優(yōu)化
this.tooltipContent = cell.innerText || cell.textContent;
tooltip.referenceElm = cell;
...
}
...
相關的issue，我推測是由于餓了么框架在鼠標滑過單元格時漾岳，為了顯示tooltips，觸發(fā)了數(shù)據(jù)更新粉寞，特別是在表格中有計算的值會導致頁面更慢尼荆。
解決方案：
- 升級elementui到v2.6.0以上的版本；
- 不在表格中使用計算的屬性用來展示可緩解問題唧垦；
