[技术干货] 前端树结构优化

## 一、 场景和问题 树结构,多级嵌套(不确定几级),使用递归方式实现,数据量上万情况下,页面加载很慢。 数据结构:十个父级节点,每个父节点有10000个子节点,父子是嵌套关系 #### 代码: ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/attachment/forum/202008/21/1015289541bgbfss4v8yqi.png) #### 页面加载: ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/attachment/forum/202008/21/101559ltvf2s6kmuwa5w36.png) 此时页面渲染需要13.5s ## 二、问题解决 #### 2.1 树数据结构扁平化 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/attachment/forum/202008/21/101735nlhao6wsmnqgwpin.png) 从performance工具定位问题:调用栈createChildren被疯狂调用,在vue源码中,createChildren做的是创建Vue实例这件事。创建Vue实例包括依赖收集、响应式监听、数据事件绑定、编译模板等等。 如果能将数据结构扁平化,就只会有一个tree组件,createChildren只执行进行一次。 扁平化数据还有个好处就是: + 减少栈的读取,递归的本质是栈的读取,栈的读取是由解析器做的,扁平化可以减少V8引擎的开销。 + 扁平化数据可以减少dom 的数量。 ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/attachment/forum/202008/21/101744sxwbkqtpgc9ccmou.png) 扁平化后优化到6.5s,我们觉得6.5s还是远远不够 #### 2.2 虚拟长列表 我们可以用懒加载解决海量数据一次性加载的问题,但是最终dom数量还是很大,容易造成页面卡顿。 所以我们使用虚拟长列表解决这个问题: ![image.png](https://bbs-img-cbc-cn.obs.cn-north-1.myhuaweicloud.com/data/attachment/forum/202008/21/101800h4an6sdtrumx9beu.png) 通过虚拟长列表,我们就控制住了DOM数量。 #### 2.3 其他优化思考 滚动事件加防抖,但要保证滚动的平滑度,使我们需要去权衡的。样式直接在数据中输出,不通过计算:树结构缩进padding距离不通过层级计算,而是在数据中直接给出样式,避免每个节点都计算一次样式的性能问题。