javascript - 通过下拉菜单在数组之间切换需要相当多的时间。我该如何减少它？ Angularjs、IvhTreeview

Question

页面加载后，我已通过剩余 Angular 请求获取了两个数组。后来我使用一个 Angular 模块 - ivh-tree view 来显示它们。两个数组相差 10^3 个元素。 问题:通过下拉菜单在它们之间切换需要相当多的时间。我该如何减少它？

Answer 1

我相信任何解决方案都需要修改 ivh-treeview 才能提高本身的效率。

快速浏览一下 ivh-treeview 的源代码，它看起来总是渲染整个树，并在节点展开和折叠时切换可见性。

如果您将指令修改为最初仅渲染已经扩展的节点并按需渲染，那么它应该会大大提高性能，因为您只会渲染实际需要的内容。

另请注意，ivh-treeview 有大量嵌套的转发器，而无需指定track by(作为通用控件，它不一定可以)。如果您更改要求为每个树节点提供 id 字段，则可以将 track by 添加到中继器，这对性能有积极影响(但小于延迟加载)。

另请注意，作为嵌套重复器的大型递归结构，可以通过将数据转换为具有深度标识符的平面列表，然后使用 css 将整个树渲染为单个列表来控制深度来提高性能。这失去了嵌套节点的语义优势，但可能对性能产生积极影响。当您失去嵌套结构以及几乎自动扩展和折叠的好处时，它还会使树的许多部分变得复杂。