AngularJS Javascript

¿Cómo aumentar la performance de AngularJS?

El framework de desarrollo AngularJS ha tenido varias quejas con respecto a la performance de las aplicaciones desarrolladas con él. A continuación veremos algunos tips para mejorar la velocidad y el consumo de memoria con solo hacer algunos cambios ligeros o solo agregando un par de líneas.

1. Data Binding

Uno de los grandes problemas de AngularJS es el 2-way data binding innecesario, es decir tener un watcher que está continuamente escuchando por cambios. Si no necesitamos de esta funcionalidad, podemos aplicar lo siguiente para evitar ese consumo indeseado

Angular 1.2

app.directive('bindOnce', function($scope, $timeout) {
    return {
        scope: true,
        link: function( $scope ) {
            $timeout(function() {
                $scope.$destroy();
            }, 0);
        }
    }
});

Y luego en nuestro código directamente llamamos a esa directiva

<div class="my-class" bind-once>{{myValue}}</div>
<div class="other-class" ng-bind="anotherValue" bind-once></div>

Angular 1.3

<div class="my-class">{{::myValue}}</div>

En Angular 1.3 ya se dieron cuenta de este problema e implementaron la funcionalidad de los dobles dos puntos (::).

2. DebugInfo

Otra mejora que se puede realizar, sin importar la versión de Angular, es la de deshabilitar el debugInfo dentro del $compileProvider. Solo deberían modificar el sitio de desarrollo, que en este caso usé mysite.dev y listo.

app.config(function($compileProvider) {
  if (!location.host.match(/mysite.dev/)) {
    $compileProvider.debugInfoEnabled(false);
  }
});

3. ng-repeat

Otra mejora significativa está en el uso de ng-repeat seguido de track, algo como

<ul class="my-list" ng-repeat="user in users track by $index">
  <li>{{::user.name}}</li>
</ul>

Agregar el track by a un ng-repeat incrementa notablemente la velocidad dentro del loop en los elementos de una colección, sin importar si usan o no el $index.

4. $watchCollection vs. $watch

El uso de $watchCollection en vez de $watch es más performante ya que el segundo realiza, con un tercer parámetro, la comprobación de los objetos en todos los niveles mientras que el primero no.

$scope.$watchCollection("collection", function( newValue, oldValue ) {
  console.log(newValue, oldValue);
});

5. ng-if vs. ng-show

Si vamos a realizar comprobaciones en el DOM en donde sacamos código en base a diferentes variables, es mejor usar ng-if ya que directamente elimina el DOM mientras que ng-show solo muestra u oculta el contenido, pero el código sigue estando haciendo nuestra app más pesada.

Para poder comprobar si hemos mejorado o no nuestra aplicación, podemos usar la extensión Batarang en Chrome o directamente definir timers usando console

console.time("procesoVentas");
$timeout(function(){
    console.timeEnd("procesoVentas");
}, 500);

// Resultado por consola $: procesoVentas: 500.611ms

Con todos estos tips, tu aplicación debería estar funcionando mucho más rápido que antes 🙂

¿Alguna sugerencia para mejorar la perfomance?

Comentarios

About the author

Juanma

Una mente curiosa que quiere aprender todo. Amante de la fotografía, la programación, la lógica, los viajes y el gin-tonic. Un nerd más de Ing. en Sistemas, pero del grupo con onda según ella, con un blog que habla sobre nada y todo a la vez.

Recomendados

Aviso

Todo el contenido publicado en este sitio es sólo para fines informativos. El propietario de este sitio no se hace cargo en cuanto a la exactitud o integridad de la información en este sitio o sobre los links externos publicados en el mismo.