5 mejoras de rendimiento angular en 2022

Jul 25 2022
Aprenda 5 formas en las que puede mejorar el rendimiento de sus aplicaciones Angular lentas y lentas.
¿Se pregunta por qué algunas partes de su aplicación Angular siguen siendo lentas? Este artículo le mostrará formas en las que puede mejorar el rendimiento de su aplicación. ¿Encuentra sus aplicaciones Angular lentas y lentas pero no tiene idea de cómo mejorarlas? Profundicemos directamente en este artículo para conocer 5 formas de mejorar el rendimiento de su aplicación.

¿Se pregunta por qué algunas partes de su aplicación Angular siguen siendo lentas? Este artículo le mostrará formas en las que puede mejorar el rendimiento de su aplicación.

¿Encuentra sus aplicaciones Angular lentas y lentas pero no tiene idea de cómo mejorarlas? Profundicemos directamente en este artículo para conocer 5 formas de mejorar el rendimiento de su aplicación.

1. ngZone

Muchos desarrolladores se perdieron este servicio que proporciona el equipo de Angular para mejorar el rendimiento de sus aplicaciones. De forma predeterminada, todas las operaciones asíncronas como setTimeout , requestAnimationFrame , etc. están dentro de la zona Angular, lo que significa que activará la detección de cambios en el componente y ralentizará el sitio web si el componente es enorme. Por lo tanto, si tiene funciones asíncronas que no requieren detección de cambios en el DOM, puede ejecutar funciones asíncronas dentro del ngZoneservicio con un método llamado runOutsideAngularfunción de devolución de llamada.

2. Componentes divididos

Si su componente consta de una sección activa (inteligente) y una sección inactiva (tonta), debería considerar refactorizarlos y dividirlos en componentes inteligentes y tontos. Por ejemplo, en el siguiente ejemplo,

Tengo una entrada y una lista de datos. La sección de entrada seguirá activando la acción del evento clave a medida que el usuario escribe y activa la verificación de detección de cambios para todo el componente, aunque no se haya hecho nada en la sección de la lista. Imagine que la lista es compleja y que la detección de cambios puede resultar costosa.

Por lo tanto, un mejor enfoque sería dividir la sección de entrada y la sección de lista en 2 componentes separados y estacionarlos bajo un componente principal. De esta manera, los eventos clave en InputComponent no afectarán ni activarán la detección de cambios en ListComponent. Puede ser un gran ahorro para el rendimiento si los datos de su lista son enormes y contienen muchos cálculos complejos.

3. onPush

Además del punto de división de componentes mencionado anteriormente, también puede ajustar la estrategia changeDetection de su componente para mejorar el rendimiento del componente. De forma predeterminada, cuando crea un componente utilizando Angular CLI , la estrategia de detección de cambios predeterminada será y OnDefaultesto hace que su DOM se actualice cada vez que haya un cambio en sus datos en ese componente. Angular verifica los cambios dentro de un árbol de componentes. Entonces, si su elemento principal o raíz tiene cambios, activará la actualización de DOM para sus componentes secundarios y nietos.

Puede actualizar su estrategia de detección de cambios de ListComponent para OnPushque Angular solo verifique y actualice DOM cada vez que lo solicite.

Inyecte ChangeDetectorRef en el constructor de su componente y llame al método markForCheck() para obligar a su componente y a los componentes secundarios debajo de él a buscar cambios y actualizar el DOM en consecuencia. Además, si hay componentes secundarios en el árbol de componentes de este componente principal/raíz que no requieren actualización de DOM independientemente de los cambios de datos (componente tonto), puede optar por separar changeDetector del componente utilizando el método detach () .

Inyectando changeDetectorRef en su componente:

Llame detachal método en el constructor para separar su componente de la detección de cambios. Este pequeño cambio le permitirá ahorrar mucho en su memoria y optimizar el ciclo de renderizado de su componente.

4. usa Pipe en lugar de métodos

El enlace de plantilla angular es increíble, puede vincular variables y también funcionar con su plantilla. Muchos de ustedes, como yo, usan una llamada de función para transformar datos, ya que es conveniente y fácil de implementar.

Ejemplo: entrada agregando elemento a una lista
Llamada de función
Implementación de tubería

Mirando el ejemplo simple anterior, uno no podrá notar ninguna diferencia. Pero, ¿sabe que la llamada a la función se invocaría en cada elemento de la lista cada vez que se agregue un elemento nuevo a la lista, pero la canalización solo se invocaría cuando cambie el valor del elemento en la lista? Por lo tanto, evite realizar llamadas a funciones en su plantilla a toda costa a menos que sepa lo que realmente está haciendo, en lugar de eso, siempre elija crear sus propias canalizaciones puras personalizadas para lidiar con la transformación de datos.

5. Use desplazamiento virtual o desplazamiento infinito o paginación para una larga lista de conjuntos de datos

¿Tiene una larga lista de elementos que necesita mostrar para su usuario administrador o clientes? ¿Su navegador tarda demasiado en procesar más de 100 elementos DOM en su aplicación web? Es hora de considerar el uso de la estrategia de desplazamiento virtual o desplazamiento infinito en su aplicación web. Ayuda de desplazamiento virtual e infinito para reutilizar y reciclar elementos DOM en el navegador para mostrar elementos que el usuario puede ver. Los elementos que están ocultos en la lista no estarán en el DOM y, por lo tanto, ayudan a ahorrar tiempo de procesamiento para su aplicación web. Estas estrategias ayudan a optimizar la cantidad de elementos DOM que desea mostrar a su usuario en una larga lista de elementos dada y no representar aquellos elementos en la lista que no están en la vista en ese punto de desplazamiento. No te aburriré con los detalles aquí.

Puede obtener más información sobre el desplazamiento virtual utilizando Angular Material o ngx-virtual-scroll . También puede obtener más información sobre el desplazamiento infinito usando ngx-infinite-scroll . Alternativamente, puede visitar este sitio web a continuación para encontrar más complementos y herramientas disponibles para optimizar su larga lista de elementos desplazables.

Bono

¿Sabe que puede instalar la extensión Angular Devtools Chrome para poder medir el rendimiento de su componente en el navegador mientras los prueba y desarrolla?

Herramientas de desarrollo angulares

Una vez que haya instalado la extensión, puede abrir su herramienta de desarrollo de Chrome y buscar Angular en la lista de pestañas de la herramienta de desarrollo de Chrome. Puede comenzar a grabar y realizar una acción en su aplicación y detener la grabación para analizar qué acción tiene una revisión de rendimiento.

Resumen

Espero que este artículo le haya dado algunas pistas sobre cómo mejorar el rendimiento de su aplicación Angular. Use los 5 puntos anteriores + la extensión Angular devtools para identificar el acaparador de rendimiento en su aplicación.

Hágame saber en los comentarios a continuación si tiene otros consejos para mejorar el rendimiento que ayudarían a optimizar las aplicaciones de Angular. Me encantaría aprender sobre eso también. ¡Salud!

Más contenido en PlainEnglish.io . Regístrese para recibir nuestro boletín semanal gratuito . Síguenos en Twitter y LinkedIn . Echa un vistazo a nuestro Discord comunitario y únete a nuestro colectivo de talentos .

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved