vue2 智慧城市大数据展示 vue tree 大数据

转载

mob64ca13f96cda 2024-05-06 22:22:21

文章标签 vue2 智慧城市大数据展示 datagridview数据绑定卡顿 Vue 开发技巧数据 文章分类 物联网

vue2 智慧城市大数据展示 vue tree 大数据_数据

作者：jayzou

转发连接：

背景

项目中需要渲染一个5000+节点的树组件，但是在引入element Tree组件之后发现性能非常差，无论是滚动、展开/收起节点还是点击节点卡顿都非常明显，利用performance跑一下性能数据发现到问题所在

vue2 智慧城市大数据展示 vue tree 大数据_数据_02

从上图可以看到，除去Idle之外，总共花费的时间为12s，其中Scripting花了10s

vue2 智慧城市大数据展示 vue tree 大数据_vue2 智慧城市大数据展示_03

从上图可以看出，Scripting期间除了 Observe 之外，大部分时间都在调用createChildren来创建vue实例

优化思路

从上面的分析可以看出引发的性能问题都是因为渲染的节点过多导致，那么要解决这个问题就是尽量减少节点的渲染，然而在业界中与之相类似的解决方案就是虚拟列表虚拟列表的核心概念就是 根据滚动来控制可视区域渲染的列表这样一来，就能大幅度减少节点的渲染，提升性能

具体的步骤如下：

将递归结构的tree数据“拍平”，但是保留parent以及child的引用(一方面是为了方便查找子级和父级节点的引用，另一方面是为了方便计算可视区域的list数据)
动态计算滚动区域的高度(很多虚拟长列表的组件都是固定高度的，但是因为这里是tree，需要折叠/展开节点，所以是动态计算高度)
根据可见的高度以及滚动的距离渲染相应的节点

代码实现

最简代码实现

细节如下：

整个容器使用相对定位是为了避免在滚动中引起页面回流
phantom 容器为了撑开高度，让滚动条出现
flattenTree 为了拍平递归结构的tree数据，同时添加level、expand、visibel属性，分别代表节点层级、是否展开、是否可视
contentHeight 动态计算容器的高度，隐藏(收起)节点不应该计算在总高度里面

这样一来渲染大数据的tree组件就有了基本的雏形，接下来看看节点展开/收起如何实现

节点展开收起

在flattenTree中保留了针对子级的引用，展开/收集的话，只需要对子级进行显示/隐藏即可

{    methods: {         //展开节点        expand(item) {          item.expand = true;          this.recursionVisible(item.children, true);        },        //折叠节点        collapse(item) {          item.expand = false;          this.recursionVisible(item.children, false);        },        //递归节点        recursionVisible(children, status) {          children.forEach(node => {            node.visible = status;            if (node.children) {              this.recursionVisible(node.children, status);            }          })        }}