Cómo optimizar las listas en AngularJS

Optimizar listas largas en AngularJS es esencial. Si alguna vez has trabajado con listas o listados largos con ng-repeat, posiblemente hayas notado que el rendimiento haya disminuido. 

Esto es debido principalmente por el:

  1. gran número de watchers que se generan para una misma vista. 
  2. renderizado de todos los ítems estén o no estén visibles en la lista o listado.

 

Además, debemos añadir que según la complejidad de los ítems, afectará en mayor o menor medida. A más CSS o bindeo de expresiones por cada ítem, menor rendimiento.

Vamos a ver dos maneras distintas de optimizar nuestros listadosvirtual scroll y native bind once.

Optimizar listas con Virtual Scroll

Cuando tenemos una lista con muchos items, por ejemplo 1000, la mayoría de ellos no están visibles para el usuario, pero nuestro navegador los renderiza.

Está técnica es similar a la reutilización de celdas que utiliza iOS en su TableView. En este caso concretamente, Virtual Scroll consiste en renderizar únicamente los items dentro de un viewport que se va a visualizar para el usuario, más algunos por encima y por debajo, para que no exista retraso en la visualización al hacer scroll. Cuando se realiza scroll, automáticamente va modificando el DOM para ver los items correspondientes.

optimizar listas angularjs

Para implementar esta técnica es tan sencillo como añadir una directiva ya existente llamada sf-virtual-repeat, que la podemos descargar con bower:

A posteriori, deberemos añadir la dependencia en nuestro módulo de angular y el librería en el index.html

Por último, ya podemos utilizar Virtual Scroll en nuestro HTML para optimizar listas. Deberemos crear la clase viewport con una altura y anchura determinada.

Como podemos observar, su utilización es como ng-repeat, pero con mayores ventajas para optimizar las listas largas. Ver toda la documentación sobre esta directiva

Optimizar listas con Native Bind Once

Una nueva característica en AngularJS 1.3, es la capacidad de bindear solo una vez una expresión a una vista, sin necesidad de añadir un watcher y estar constantemente procesándola.

Esto significa que que una vez cargada la información de la variable del scope, ya no está pendiente de si cambia o no la información. De este modo conseguimos que nuestro bucle sea mucho más ligero y por tanto mayor optimización.

Comentar que esta técnica no sirve si en nuestro listado, la información de nuestros items cambian una vez cargada.

La manera de utilizar el bindonce es muy simple, tan sólo debemos añadir dos puntos delante de nuestra expresión. Aquí un ejemplo.

Internamente funciona de una manera muy simple, mientras que la expresión no esté definida, el watcher u observador permanecerá. Una vez que la expresión se defina, se quitará el watcher.

Como podemos ver su utilización es sencilla, pero de mucha utilidad.

¿Os ha parecido interesante cómo optimizar listas en AngularJS?


¿Quiéres saber como crear directivas personalizadas en AngularJS?