element ui dialog 弹出框 加载严重卡顿 弹出 大概需要两三秒 表格卡顿严重

前提介绍:

    这是个数据很多的页面,

    页面有很多参数,

    表格横向有77个参数, 纵向有十几,二十个

    加载 大表格数据 也需要很长时间 大概需要十秒左右,

    这个是一开始以为是另外一回事,

    我是一个纯前端 ,

    没有办法通过后端请求少量数据来减少页面数据,

    最主要原因还是后端的数据全部抛出 ,没有进行处理

    我们公司后端只有一个,

    所以数据部分交给我这个前端处理,

    查看了 向后台请求 大数据 为0.8秒左右

    页面处理数据 大概花了 0.2秒左右

    合起来我自己数据  大概处理了 1秒钟的时间,

    按理说如果我这个页面我数据加载一秒钟的时间 ,还可以接受 ,

    因为数据量过大,甲方也没有要求数据的加载速度,

    添加功能用都用不到几次,添加过之后他基本不会再使用这个页面,

    但是比较多的表格页面,需要十秒的加载时间,这就不对了,

    而页面数据少的则不会出现这个情况,

    通过了解,使用浏览器里面的performance工具,保存内存快照,

    发现浏览器在这九秒内内存占用率极高,谷歌浏览器的内存占用是2mb,

    基本全部占满,所以我猜想,

    可能是因为表格中dom元素过多渲染页面,

    导致内存不够处理数据导致的卡顿

解决方案:

    说干就干哦,如何解决表格数据过多呢?

    分页是一个很好的东西,

    害,后端干的活 ,我前端来整

    但是纵向单一一个分页是整好了,页面还是会卡顿,

    因为横向的表格有77个参数,后续还在不断添加,

    所以横向的我也做了个分页,

    详见,https://blog.csdn.net/qq_45385505/article/details/126123260

    最后完美解决问题,

总结:

    吐槽一句,还是后端没处理数据,全抛给我出现的问题