typescript - Angular experimenta retrasos en el rendimiento si se insertan múltiples elementos DOM mediante un componente dinámico con enlace

He creado una funcionalidad de expansión/colapso anidada de n niveles utilizando componentes dinámicos de Angular 5.

Funcionalmente todo está funcionando bien, pero cuando cargo múltiples elementos del DOM, el navegador o se bloquea o el desplazamiento deja de funcionar (desplazamiento entrecortado)

Básicamente es una función avanzada de informes con filtros seleccionados por el usuario y dimensiones para agrupar que estamos ofreciendo.

Aquí está cómo funciona mi característica desarrollada

1) El usuario visita la página de informes en la aplicación web. 2) El usuario selecciona filtros y parámetros de agrupación según los cuales genero una tabla basada en divs con múltiples filas.

Ahora he mantenido la verificación de condiciones para que el usuario pueda expandir/colapsar más la fila, basado en el objeto que estoy manteniendo usando 'group by'. Aquí, 'group by' indica el número de niveles que el usuario puede utilizar

Por ejemplo, los parámetros de Agrupar por son País, Sistema Operativo, Nombre de la Aplicación y Campaña, representaré una tabla de primer nivel mostrando datos para todos los países disponibles con un botón de expansión para cada fila, al hacer clic en el botón de expansión, representaré otra tabla que contiene datos del Sistema Operativo (SO) para ese país específico y así sucesivamente...

De hecho, he identificado por qué ocurre el problema de rendimiento, podría ser porque estoy verificando ese botón específico de expandir/colapsar identificado por el siguiente objeto groupby y el parámetro isCollapsed. Debido a esa condición específica que se verifica varias veces periódicamente, el desplazamiento deja de funcionar o el navegador comienza a funcionar lentamente.

Aquí hay un video que ilustra cómo funciona y el rendimiento de la barra de desplazamiento

https://youtu.be/m1a2uxhoNqc

No puedo subir código a Plunker ni a ninguna otra herramienta en línea porque ya está integrado en una plataforma que estoy desarrollando con datos reales.

No puedo agregar código aquí debido al límite de caracteres de Stackoverflow, pero he creado un gist.

Aquí está la URL para acceder al código:

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

Me gustaría hacer que el código sea más reutilizable, lo haré una vez que se resuelva el problema de rendimiento.

Echa un vistazo a esto y avísame de mis errores para mejorar la calidad del código y los problemas de rendimiento.

Gracias.

Respuesta #1

El efecto de desplazamiento que estás viendo es razonable dado la cantidad de filas que estás renderizando (y la lógica de agrupamiento "compleja" detrás de ello).

Sugeriría usar algún tipo de componente de desplazamiento virtual como https://github.com/rintoj/ngx-virtual-scroller o el nuevo https://material.angular.io/cdk/scrolling/overview#virtual-scrolling para reutilizar los nodos del DOM y mejorar considerablemente el rendimiento