VueVirtualLazyTree-支持懒加载的虚拟树

1、背景

2、分析

[2.1 测试步骤](#2.1 测试步骤)

[2.2 测试结果](#2.2 测试结果)

3、实现

[3.1 实现步骤](#3.1 实现步骤)

4、结果

vue3-虚拟树

npmhttps://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