9 maneras de mejorar el rendimiento de AngularJS
1. Herramienta Batarang para los observadores de referencia
Batarang es una gran herramienta de desarrollo del equipo de Angular que reduce sus esfuerzos de depuración. Aunque tiene muchas características nuevas, algunas de ellas lo ayudan a perfilar y rastrear el rendimiento de su rendimiento de AngularJS. Además, el árbol de vigilancia determina qué ámbitos no se destruyen, como parece ser si hay algún aumento en la memoria.
- ¿Cómo se hacen los sitios web como Google+ y Facebook?
- ¿Dónde puedo alojar mi sitio web por menos de $ 100 / año?
- ¿Cómo creo una página de inicio de sesión?
- Cómo aprender WordPress fácilmente
- ¿Qué son los lenguajes de programación o desarrollo web nuevos y actuales?
2. Uso de JavaScript nativo o Lodash
Lodash aumenta el rendimiento de su aplicación simplemente reescribiendo parte de la lógica básica en lugar de confiar en los métodos incorporados de AngularJS. Si Lodash no está incluido en su aplicación, entonces probablemente deba volver a escribir todo en JavaScript nativo.
3. Perfilador de herramientas de desarrollo de Chrome para identificar cuellos de botella de rendimiento
Esta es una herramienta útil que le brinda la opción de seleccionar qué tipo de perfil desea crear. La línea de tiempo de asignación de registros, la instantánea de captura de montón y el perfil de asignación de registros se utilizan para la creación de perfiles de memoria. Después de esta optimización de rendimiento, su aplicación se procesará completamente en menos de dos segundos y los usuarios pueden interactuar libremente con ella en ese momento.
4. Minimizar los vigilantes
AngularJS gira completamente en torno a su ciclo de digestión. Cada vez que se activa un ciclo de resumen, recorre cada enlace para detectar cambios en el modelo. La cantidad de tiempo necesario en cada ciclo de digestión puede reducirse reduciendo el número de observadores. También reduce las huellas de la memoria de la aplicación.
5. ng-if es mejor que ng-show
La directiva ng-show alterna la propiedad de visualización CSS en un elemento en particular, mientras que la directiva ng-if realidad elimina el elemento del DOM y lo vuelve a crear si es necesario. Además, la directiva ng-switch es una alternativa al ng-if con los mismos beneficios de rendimiento.
6. No uses ng-repeat
Esta es la mayor ganancia para cualquier aplicación si no está usando la directiva ng-repeat , por lo que es aconsejable evitar ng-repeat y construir el HTML usando JavaScript. Para las aplicaciones de vocalización, el uso de ng-if resulta en la adición de observadores innecesarios. El uso de la directiva ng-bind-html es una mejor solución para deshacerse de este problema.
7. Use $ watchCollection (incluye el tercer parámetro)
Usar $watch con dos parámetros es bueno, pero usar $watch con tres parámetros, es decir, $watch('value',function(){},true) , hace que Angular realice una verificación profunda (para verificar cada propiedad del objeto). Pero esto podría ser costoso. Por lo tanto, para resolver este problema de rendimiento, Angular proporciona $watchCollection('value', function(){}) que actúa casi de manera similar $ watch con el tercer parámetro, excepto que solo verifica la primera capa de propiedades del objeto a bajo costo.
8. Use console.time para problemas de depuración
Si su aplicación tiene problemas con la depuración y afecta el rendimiento de Angular, use console.time , que es una gran API.
9. Debounce ng-model
Puede cancelar la entrada con ng-model . Por ejemplo, para eliminar la entrada de búsqueda como GOOGLE , debe usar ng-model-options=”{debounce:250}” . Esto hace que el ciclo de resumen no se active más de una vez cada 250 ms debido a los cambios en este modelo de entrada.
El tiempo de desarrollo es muy importante hoy en día, por lo que necesita un marco integral como AngularJS para ejecutar su negocio rápidamente de forma inmediata.
Biografía del autor: Alex Patel está trabajando en ValueCoder, una empresa de desarrollo de Angular.JS.
