为何ep的虚拟滚动树在开启性能模式时，内存会增大很多？

虚拟滚动树在开启性能模式（perfMode: true）时，内存使用会显著增加的原因主要与其实现机制有关。以下是详细解释：

---

✅ 什么是性能模式？

性能模式通过 预加载和缓存更多节点数据 来提升滚动的流畅性，适用于大数据量场景下的快速响应。

perfMode: {
  type: Boolean,
  default: true,
}

当 perfMode 为 true 时，组件会采取以下策略来优化渲染性能。

---

🧠 内存占用增大的原因

1. 节点缓存机制

• 虚拟滚动只渲染当前可视区域附近的节点，但为了实现平滑滚动，它通常会缓存一部分“即将进入视口”的节点。
• 在性能模式下，缓存范围扩大，保留更多已创建的节点实例，导致内存占用上升。

2. 节点 DOM 预渲染

• 性能模式可能会提前创建并保留部分不可见节点的 DOM 元素或其渲染状态，而不是每次滚动时重新创建。
• 这种方式提升了滚动体验，但也增加了内存开销。

3. 扁平化结构缓存

• 树形结构在虚拟滚动中通常会被拍平成一个一维数组（如 [flattenTree](file://F:\learn-front\UI组件库\Vue3\element-plus\packages\components\tree-v2\src\composables\useTree.ts#L78-L115)），以方便计算索引、偏移等；
• 开启性能模式后，这个扁平化数组可能不会频繁重建，而是被长期保留，从而占用额外内存。

4. 事件监听器与引用保留

• 每个节点可能会绑定事件监听器、动画状态或样式信息；
• 性能模式下这些对象可能不会及时释放，造成内存泄漏或增长。

---

🔍 如何验证是否是性能模式引起的？

你可以通过以下方式观察内存变化：

方法	描述
Chrome DevTools Memory 面板	查看 JS 堆内存变化情况
Performance 面板	观察 GC（垃圾回收）频率和内存分配情况
对比测试	将 perfMode 设为 false，对比两种模式下的内存占用

---

💡 解决方案与建议

措施	说明
关闭 perfMode	如果对性能要求不高，可设为 false，减少内存占用
控制数据规模	减少一次性加载的数据量，采用懒加载或分页加载
手动清理无用节点	在滚动结束后主动清理长时间未使用的节点缓存
使用 Web Worker 处理复杂逻辑	避免主线程阻塞，降低内存压力

---

✅ 示例：关闭性能模式

<el-tree-v2
  :data="treeData"
  :perf-mode="false"
/>

---

📌 总结

性能模式的本质是以空间换时间 —— 它通过增加内存占用换取更流畅的滚动体验。
如果你的应用需要处理大量树形数据且对性能敏感，可以启用该模式；如果内存受限或数据量不大，建议关闭此模式以节省资源。