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

相关推荐
望获linux10 分钟前
【Linux基础知识系列:第一百五十九篇】磁盘健康监测:smartctl
linux·前端·数据库·chrome·python·操作系统·软件
十一吖i1 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
冰暮流星3 小时前
css之线性渐变
前端·css
徐同保3 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front3 小时前
大厂精英为何在中小公司水土不服?
前端
生莫甲鲁浪戴3 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
细节控菜鸡5 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
2501_916008895 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu6 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una6 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节