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

相关推荐
今晚吃什么呢?7 分钟前
前端面试题之CSS中的box属性
前端·css
我是大龄程序员10 分钟前
Babel工作理解
前端
《独白》20 分钟前
将图表和表格导出为PDF的功能
javascript·vue.js·ecmascript
CopyLower24 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ25 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
什码情况25 分钟前
微服务集成测试 -华为OD机试真题(A卷、JavaScript)
javascript·数据结构·算法·华为od·机试
你的人类朋友1 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵1 小时前
JavaScript 空对象检测
javascript
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js