Угловая задержка производительности, если несколько элементов DOM вставлены через динамический компонент с привязкой - PullRequest
0 голосов
/ 24 октября 2018

Я создал n-уровневую функцию раскрытия / свертывания, используя динамические компоненты угловых 5.

Функционально все работает нормально, но когда я загружаю несколько элементов dom, браузер либо вылетает, либо прокрутка перестает работать (Jerky Scroll)

В основном это расширенная функция отчетов с выбранными пользователем фильтрами и группами по измерениям, которые мы предлагаем.

Вот как работает моя разработанная функция

1) Страница отчета о посещениях пользователей навеб-приложение.2) Пользователь выбирает фильтры и параметры групповой работы, в соответствии с которыми я генерирую таблицу на основе div, состоящую из нескольких строк.

Теперь я продолжил проверку условий, чтобы пользователь мог дополнительно развернуть / свернуть строку, основываясь на объекте, который я поддерживаюиспользуя группу по.Здесь сгруппировать по указывает количество уровней, которые пользователь может использовать

Например, сгруппировать по параметрам: Страна, ОС, Имя приложения и Кампания. Я предоставлю таблицу первого уровня, отображающую данные для всех стран, доступные с кнопкой расширения для каждогоВ строке, по нажатию на кнопку расширения, я отображаю другую таблицу, содержащую данные об операционной системе (ОС) для этой конкретной страны и т. д. ...

Я фактически определил причину проблемы с производительностью, возможно, потому что я проверяюдля этой конкретной кнопки раскрытия / свертывания, определенной следующим объектом groupby и параметром isCollapsed.Из-за этого конкретного условия проверяется несколько раз, периодически прокрутка либо перестает работать, либо браузер начинает работать медленно

Вот видео, иллюстрирующее его работу и производительность полосы прокрутки

https://youtu.be/m1a2uxhoNqc

Я не могу загрузить код наplunker или любой другой онлайн-инструмент, потому что он уже интегрирован в разрабатываемую мной платформу с фактическими данными.

Я не могу добавить код здесь из-за ограничения количества символов в стеке, но создал gist.

Вот URL-адрес для доступа к коду:

https://drive.google.com/drive/folders/1ZxAS8yHd8iHJ6ds3mZhLR0bw6o0cnRL6?usp=sharing

Я хотел бы сделать код более пригодным для повторного использования, чтобы сделать это, как только проблема с производительностью будет решена.

Просмотрите это и дайте мне знать, мойошибки для улучшения качества кода и проблемы с производительностью.

Спасибо.

1 Ответ

0 голосов
/ 02 ноября 2018

Эффект прокрутки, который вы видите, является разумным, учитывая количество отображаемых строк (и "сложную" логику группировки за ним).

Я бы предложил использовать какой-то виртуальный компонент прокрутки, такой какhttps://github.com/rintoj/ngx-virtual-scroller или новый https://material.angular.io/cdk/scrolling/overview#virtual-scrolling для повторного использования узлов DOM и значительного улучшения производительности

...