需要帮助解决包含许多元素的AngularJS性能问题

Question

我目前面临AngularJS的问题，当向页面中添加大量“元素”时，它的表现似乎很差。在我的计算机上，仅渲染此文件夹结构中的元素大约需要20秒钟。 （在此示例中，每个文件夹包含10个子文件夹，每个子文件夹包含10个项目，因此共有110个文件夹和1001个元素）：

我已经阅读了许多angularjs性能，等等，但找不到合适的答案。我已经剖析了这个东西：

我已在此处上传个人资料：

https://drive.google.com/file/d/1KhzIo91IVv80q3Jl6w--ivgvFh78Y-Sm/view?usp=sharing

这是整页重新加载，服务工作者在16s时完成了所有加载。之后，客户端需要大约2s的时间来从后端读取和解密数据存储，然后此“ XHR加载view / tree-view.html”需要他大约20s的时间，这是困扰我的时间。

tree-view.html看起来很简单：

https://gitlab.com/psono/psono-client/blob/master/src/common/data/view/tree-view.html

还可以加载treeView并递归加载treeViewNodes：

https://gitlab.com/psono/psono-client/blob/master/src/common/data/js/directive/treeViewNode.js

我已经尝试使用一次性绑定优化该对象，以此类推以减少呈现它所需的angularjs juju，等等，但毫无希望。

我目前有一个用户，需要等待5至10分钟才能加载包含2500个条目的数据存储。

感谢所有帮助！

Answer 1

我能够解决问题，所以我将解决方案留给所有正在研究类似问题的人。

解决方案实际上非常简单：

我在此行的指令模板中使用ng-show而不是ng-if：

'<div class="tree-folder-content"'+ (collapsible ? ' ng-show="node.expanded || node.expanded_temporary"' : '') + '>' +
'<div tree-view-node="{\'data\': node}">' +
'</div>' +
'</div>' +

（链接到原始代码：https://gitlab.com/psono/psono-client/blob/master/src/common/data/js/directive/treeViewNode.js#L520）

ng-if防止呈现“不必要”的元素，从而大大减少了必要的DOM元素数量。