一、场景和问题

树结构，多级嵌套（不确定几级），使用递归方式实现，数据量上万情况下，页面加载很慢。

数据结构：十个父级节点，每个父节点有10000个子节点，父子是嵌套关系

代码：

页面加载：

此时页面渲染需要13.5s

 二、问题解决

2.1 树数据结构扁平化

从performance工具定位问题：调用栈createChildren被疯狂调用，在vue源码中，createChildren做的是创建Vue实例这件事。创建Vue实例包括依赖收集、响应式监听、数据事件绑定、编译模板等等。

如果能将数据结构扁平化，就只会有一个tree组件，createChildren只执行进行一次。

扁平化数据还有个好处就是：

• 减少栈的读取，递归的本质是栈的读取，栈的读取是由解析器做的，扁平化可以减少V8引擎的开销。

• 扁平化数据可以减少dom 的数量。

  

  
  

  
  

  扁平化后优化到6.5s，我们觉得6.5s还是远远不够

2.2 虚拟长列表

我们可以用懒加载解决海量数据一次性加载的问题，但是最终dom数量还是很大，容易造成页面卡顿。

所以我们使用虚拟长列表解决这个问题：

通过虚拟长列表，我们就控制住了DOM数量。

2.3 其他优化思考

滚动事件加防抖，但要保证滚动的平滑度，使我们需要去权衡的。样式直接在数据中输出，不通过计算：树结构缩进padding距离不通过层级计算，而是在数据中直接给出样式，避免每个节点都计算一次样式的性能问题。