目录
[2.1 测试步骤](#2.1 测试步骤)
[2.2 测试结果](#2.2 测试结果)
[3.1 实现步骤](#3.1 实现步骤)
vue3-虚拟树
npm
https://www.npmjs.com/package/vue-virtual-lazy-tree
githubhttps://github.com/huiaixing/vue-virtual-lazy-tree
1、背景
在大数据量情况下，我们一般都会使用el-tree，并且开启懒加载，这样可解决80%场景下的问题。但是el-tree是通过递归组件来渲染的，所以就会导致即使是懒加载，但是在极端情况下用户点击了很多层级，渲染出几百几千个tree节点后，此时HTML中DOM节点数量暴增，此时再选中最顶级的节点，el-tree会自动勾中所有子节点，此时大量的重绘操作会导致浏览器卡顿！接下来我们会一步一步分析。
2、分析
使用chrome的性能看板来分析。
指标：INP。INP的全称叫 Interaction to Next Pain，意思是从交互到下一次绘制的延迟。
2.1 测试步骤
注意为了模拟真实用户电脑 我这里将CPU速度设置为4倍降速 之后使用虚拟树测试时也保持同样的4倍降速。（见图1）
1、先展开各个节点，渲染很多子节点。
2、点击最顶层节点"中国"，再取消选择，重复两次，查看各个指标。
图1
2.2 测试结果
INP：1312ms（图2）。可以参考图3，大于500ms就为性能差。
整个测试流程时长接近9s，从图2可以看出总时间为8873ms，减去系统空闲的3258ms，剩余5600ms，有2500ms都在渲染。
再看图4，有大量的重绘操作作用在el-checkbox__inner上，我们查看html中el-checkbox__inner，可以看见选中的节点中添加了background-color和border-color样式。
再看图5，浏览器给出的建议"优化DOM大小"，此时整个HTML有13676个元素，下面的"样式重新计算"就有13487个元素。
结合以上总总原因，就可以得出结论，就是因为大量DOM节点的重绘导致的界面卡顿，所以我们的核心目标就是解决大量DOM节点的问题。
图2
图3
图4
图5
图6
3、实现
既然是解决DOM节点渲染过多的问题，那么我们使用Vue官方的虚拟滚动组件（vue-virtual-scroll）结合el-tree组件来二次封装一个新的组件就可以。
3.1 实现步骤
1、在element-plus的github库找到el-tree，copy出所有代码。注意源码里面有些引用是相对路径，需要自己改成绝对路径。如图中红框中，源码中是'../utils/index.mjs'，需要手动改成从element-plus中引入。
图7
2、npm install --save vue-virtual-scroll@next
3、将tree-node复制一份，命名为virtual-tree-node，然后删除递归组件，添加span，用来作为树节点前面的空余空间，从视觉上看起来就是一个树。
图8
图9
4、在tree.vue中使用，从vue-virtual-scroll中引入RecycleScroller，传入所需要字段，具体字段可参考RecycleScroller官网。
图10
5、测试
使用mock写了个接口来模拟，数据使用网上扒的中国省市区数据。
javascript
<script setup lang="ts">
import VueVirtualLazyTree from "./vueVirtualLazyTree/tree.vue";
import { getSubScope } from "./api/index";
import { ref } from "vue";
// 传入defaultExpandKeys el-tree会自动调用接口打开树 解决回显问题
// defaultExpandKeys可让后台提供接口返回所选数据的所有去重后的祖先节点
const cascadeModelKeys = ref(["深圳市"]);
const defaultExpandKeys = ref(["中国", "广东省"]);
const props = {
nodeKey: "value",
value: "value",
label: "label",
children: "children",
isLeaf: "leaf",
multiple: true,
emitPath: false,
lazy: true,
lazyLoad: (node: any, resolve: any) => lazyLoadFun(node, resolve),
};
const getData = async (value) => {
const { data } = await getSubScope(value);
if (data.success) {
const newRes = data.obj.map((item) => {
const newData = {
...item,
children: [],
};
return newData;
});
return newRes;
}
};
const lazyLoadFun = async (node: any, resolve: any) => {
const data = await getData(node.key);
resolve(data);
};
</script>
<!-- 使用 传入height属性开启虚拟模式 -->
<template>
<div class="tree-wrapper">
<div style="margin-bottom: 12px">虚拟树-支持懒加载</div>
<VueVirtualLazyTree
:props="props"
:nodeKey="props.nodeKey"
:load="props.lazyLoad"
:lazy="props.lazy"
:default-expanded-keys="defaultExpandKeys"
:default-checked-keys="cascadeModelKeys"
height="100%"
:indent="8"
:item-size="32"
show-checkbox
></VueVirtualLazyTree>
</div>
</template>4、结果
图11为el-tree的DOM，可以看见DOM的层级也是一个树结构，随着DOM节点的增多，会不断递归下去。图12为实现的vue-virtual-lazy-tree的DOM结构，可以看见所有DOM节点都是平铺的，但是从视觉上来看是一个树结构。
得益于vue-virtual-scroll的功能，就算DOM节点不断增多，vue-virtual-scroll也只会渲染可视范围内的DOM节点，所以始终就只有这几十个DOM节点。从图13可以看出，元素量大幅减少，"优化DOM大小"这一项已被浏览器放到"已通过的数据分析"，总体优化后：
INP: 1312ms --> 79ms
渲染时间：2579ms --> 152ms
图11
图12
图13