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

Question

我目前面临 AngularJS 的问题，当向页面添加大量“元素”时，它的性能似乎很差。在我的电脑上，渲染这个文件夹结构中的元素大约需要 20 秒。 (本例中每个文件夹包含 10 个子文件夹，每个子文件夹有 10 个项目，因此总共有 110 个文件夹和 1001 个元素):

我已经阅读了很多关于 angularjs 性能等的文章，但找不到合适的答案。我已经分析了这件事:

我已经在这里上传了个人资料:

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

这是一个完整的页面重新加载，服务工作人员在 16 秒时完成了所有内容的重新加载。之后，客户端需要大约 2 秒的时间从后端读取和解密数据存储，然后这个“XHR Load of view/tree-view.html”需要他大约 20 秒的时间，这是目前困扰我的。

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

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

然而，加载 treeView 的 treeView 是递归加载 treeViewNodes 的:

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

我已经尝试使用一次性绑定(bind)等来优化那个，以减少渲染它所需的 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 元素数量。