优化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元素或者其他长任务,提前做好预警准备,避免上线后影响用户体验。

相关推荐
Queen_sy几秒前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq18 分钟前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开23 分钟前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方1 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔1 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
ObjectX前端实验室2 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者2 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱2 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
路很长OoO2 小时前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos
技术钱2 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript