优化vxe-table下,超大数据下el-popover性能问题

问题场景

  1. 项目有一个页面基于vxe-table做数据展示,大概会有表格规模默认是50(列) × 20 (行)
  2. 有其中7列数据可以悬浮展示与该字段相关的更详细的数据表格,基于 el-popover 和自己写的一个简易表格

伪代码大致如下

html 复制代码
<vxe-table>
    <vxe-column field="test" title="test" width="120">
    	<template #default="{ row }">
            <el-popover>
                <my-table></my-table>
            </el-popover>
        </template>
    </vxe-column>
</vxe-table>

问题分析

尝试跑lighthouse去找优化方向,没想到lighthouse直接崩了。所以只能通过经验,判断是尽管有vxe-table做了虚拟滚动,但是因为el-popover的存在,在首屏加载以及滚动滚动条的情况下,依然加载了大量DOM,导致浏览器解析执行JS的时间非常的长,加载完成后由于DOM数量极其巨大,所以依然造成卡顿,影响使用。最后通过控制台性能页和打印分析,验证确实加载了巨量的DOM节点。

解决思路

原因分析出来之后,解决方案就比较清晰了,减少首屏的DOM数量即可。因为 el-popover 是悬浮触发的,并不需要首屏加载的时候把DOM节点解析出来,所以就使用懒加载的思路去解决这个问题。el-popover提供了气泡框展示的回调方法,我们监听这个方法再去动态加载组件即可。

代码大致如下

html 复制代码
<vxe-table>
    <vxe-column field="test" title="test" width="120">
        <template #default="{ row }">
            <el-popover @show="showContent">
                <component :is="myTable" v-bind="$attrs" />
            </el-popover>
        </template>
    </vxe-column>
</vxe-table>

<script>
import MyTable from './MyTable'
export default {
    components: {MyTable},
    data () {
        return {
            myTable: null
        }
    },
    methods: {
        showContent () {
            this.myTable = MyTable
        }
    }
}
</script>

总结

这个解决思路可以用于其他类似的场景大数据量场景,也就是首屏在满足需求的前提下,应该尽可能少的加载DOM元素或者其他长任务,提前做好预警准备,避免上线后影响用户体验。

相关推荐
2501_915918413 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂3 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技3 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip3 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go4 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x4 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java4 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)5 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术5 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体