Need help fixing AngularJS performance issue with many elements

Question

Im currently facing a problem with AngularJS, which seems to perform very poorly when alot of "elements" are added to the page. On my computer it takes about 20 seconds just to render the elements in this folder structure. (each folder contains 10 subfolders in this example with 10 items each, so in total 110 folders and 1001 elements):

I already read alot of angularjs performance and so on yet couldnt find an appropriate answer. I already profiled the thing:

I have uploaded the profile here:

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

This is a full page reload where the service worker finished reloading everything at 16s. Afterwards it takes the client about 2s to read and decrypt the datastore from the backend and then this "XHR Load of view/tree-view.html" takes him about 20s which is currently the one troubling me.

tree-view.html looks quite simple:

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

Yet that one loads the treeView that loads the treeViewNodes recursive:

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

I already tried to optimize that one with onetime bindings and so on to reduce the angularjs juju required to render it and so on yet without any hope.

I currently have an user who has to wait 5 to 10 minutes to load a datastore with 2500 entries.

All help is appreciated!

Answer 1

I was able to fix the problem, so I leave here the solution for everyone who is investigating a similar problem.

The solution was actually quite simple:

I was using ng-show instead of ng-if in the directives template in this line here:

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

(Link to the original code: https://gitlab.com/psono/psono-client/blob/master/src/common/data/js/directive/treeViewNode.js#L520 )

ng-if prevents rendering of "unnecessary" elements, reducing the necessary amount of DOM elements dramatically.