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

翔啊翔阿翔2024-04-12 11:20

问题场景

项目有一个页面基于vxe-table做数据展示，大概会有表格规模默认是50（列） × 20 （行）
有其中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元素或者其他长任务，提前做好预警准备，避免上线后影响用户体验。