Element-ui 2.8.0版本中提升表格性能,做了哪些事情,原理是什么

Posted mianbaodaxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-ui 2.8.0版本中提升表格性能,做了哪些事情,原理是什么相关的知识,希望对你有一定的参考价值。

背景

项目中一直用element-ui,之前用el-table的时候,发现表格数据较多时,滑动表格就会很卡。我们的表格中只有200行数据,每行大概有30的字段,表格滑动就卡的不行。在Element-ui 2.8.0版本中,对表格性能进行了优化,链接。短短只有几行代码,却解决了表格的性能问题,今天我们来深度剖析,具体是怎么做到的。

先看改变的代码

技术图片

 

 

 代码很简单,增加了一个watch,watch中给当前hover的dom增加"hover-row‘ class,之前的dom移除‘hover-row‘。并在214行把添加hover-row的代码去掉了。

听听了上面的我说的是不是更蒙了,很正常。那我们在再来看看具体的代码

技术图片

技术图片

技术图片

 

 

上图的三段代码都在element-ui源码的 packages/table/src/table-body.js中。

如上图所示,table在渲染时,会调用getRowClass方法,在getRowClass方法中,会判断当前的行是不是hover的那一行,是的话就增加hover-row这个类。给每一行都增加mouseenter和mouseleave, mouseenter时把vuex中的hoverRow置为当前行,mouseleave时把hoverRow置为空。

问题出在哪?

代码表面看上去没有任何问题,但是仔细一想,只要我们把鼠标放在表格上移动,就会触发mouseenter和mouseleave,vuex中的hoveRow就会发生变化,表格就会重现渲染,render就会重新运行一次。render重新执行一次,getRowStyle有多少行就会执行多少次,getCellStyle和getCellClass(绑在单元格上的方法)有多少个单元格就会执行多少次。假设我们的表格是30*200,那么getRowStyle会执行200次,getCellStyle和getCellClass各执行6000次。还有很多绑在table上的方法都会执行。执行这么多方法,能不卡吗?

官方怎么解决

技术图片

 

 首先去掉了添加hover-row的语句。

问题:性能问题出在这里?删掉这段代码鼠标移动的时候就不会重新render?

答:问题就出在这里,删掉这段代码鼠标移动不会重新render。只要删掉这段代码,table reder的时候,this.store.states.hoverRow并不会被touch,鼠标移动的时候this.store.states.hoverRow虽然发生变化,但是并不会触发页面的重新渲染,这就是依赖收集的意义。

依赖收集:当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data

技术图片

 

 这时这段代码就更容易理解了,检测vuex中hoverRow的变化,通过直接修改dom的方法来添加类名。

问题:不是说操作dom性能不好,为什么这里要直接操作dom

答:首先直接操作dom性能是要优于vdom,因为需要把vdom转化为真实的dom,但是vdom能够批量更新,且能跨平台,数据和view分离效率也更高。如果我们只是更新单个数据,且页面重新reder很复杂时,直接操作dom也是一种解决办法。当然得看具体情况使用。

我会怎么解决这个问题

如果是我来做,我不会通过js才给一个dom hover增加样式,因为只用css就能搞定了,明明一段css就能搞定的事,为什么要用js来做

.el-table__body tr:hover 
  background-color: ...;

  

 总结

(1)在嵌套循环中,不要用函数,因为每次reder函数都会执行很多遍

(2)善用缓存,善用computed

 

以上是关于Element-ui 2.8.0版本中提升表格性能,做了哪些事情,原理是什么的主要内容,如果未能解决你的问题,请参考以下文章

解决 Element-ui中 表格(Table)单元格内换行转义符不起作用的问题

javascript element-ui@1.x版本的动态调整表底部滚动条位置,引用在表格行数超过屏幕高度,并且列较多的情况

javascript element-ui@1.x版本,如果需要把表第一列作为汇总列,并且表格高度大于屏幕高度,向下滚动式使第一行固定在屏幕顶部

elementuitable表格中把后端传过来的数据加了逗号不显示怎么回事

更快更低耗!Spread表格控件V11 CTP发布,性能巨大提升

Element-ui的Table表格展开行功能