Нужна помощь в устранении проблемы производительности AngularJS со многими элементами

Question

В настоящее время я сталкиваюсь с проблемой AngularJS, которая, кажется, работает очень плохо, когда на страницу добавлено много «элементов».На моем компьютере требуется около 20 секунд, чтобы визуализировать элементы в этой структуре папок.(в этом примере каждая папка содержит 10 подпапок, каждая из которых содержит 10 элементов, всего 110 папок и 1001 элемент):

Я уже много читалПроизводительность angularjs и так далее пока не может найти подходящий ответ.Я уже профилировал вещь:

Я загрузил профиль здесь:

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

Этоэто полная перезагрузка страницы, когда сервисный работник завершил перезагрузку всего за 16 секунд.После этого клиенту требуется около 2 секунд, чтобы прочитать и расшифровать хранилище данных из бэкэнда, а затем эта «XHR загрузка представления / tree-view.html» берет ему около 20 секунд, что в настоящее время беспокоит меня.

дерево-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-покажите вместо 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.