element el-table 处理万数级别表格不卡顿秒开

先看效果图吧,先上100条内容,介绍思路最后上2万条


效果图

实现思路,监听滚动事件,获取滚动条到顶部距离通过除以单条数的DOM高度,以这个数作为显示的第一条数据的index,然后以刚刚获取到的index + 屏幕高度 / 单条数的DOM高度得到一屏能放下多少条数据,这样子就能准确获取一屏要显示的数据
这种做法只需要vue渲染10~20条数据,而不用几万条几千条生成,加上内嵌的DOMDOM数量直接爆炸
所以只需要渲染这十几条数据就能达到巨额的DOM优化,如果看不懂没关系,以下有一幅图可以帮助你理解

原理图

这里有个demo可以复制看一下效果



    
    
    
    Document
    


{{item}}

解决完dom过大问题之后,还有一个问题,如果遇到dom复杂例如element的组件也要处理这类这么大数据量的表单显然是会卡顿的。
解决问题之前我们先思考一下用以上的方法为什么会造成卡顿呢?
问题其实出在高频触发DOM的更新,由于vue是使用双向绑定进行页面更新的,每次绑定的数据更新都会触发页面的DOM进行更新,所以导致了,我们鼠标每滚动一次都会重新渲染和更新这十几条信息,无疑也是高额的性能消耗。
解决方法其实也很简单,我们要利用vue在key相同的情况下是会缓存DOM的特性,让DOMkey相同,但是渲染的数据却不同,就能缓存元素了

最后是2万条数据在element实现加载2万条数据



这是本次渲染的速度


你可能感兴趣的:(element el-table 处理万数级别表格不卡顿秒开)