Make it Better, Do it Faster!

10 astuces pour améliorer les performancesde son application AngularJS

26/05/14

Euh… mais t’es qui toi exactement ?

Jonathan MeissManager équipe front-end chez Meetic

@JohnMeiss

Mon appli rame quand je veux afficher une longue liste via ngRepeat

Problème #1

4

<ul> <li ng-repeat="item in items | startFrom:currentPage*20 | limitTo:20"> {{item.name}} </li> </ul>

Astuce #1 : limitTo (pagination)

« Réduire le nombre d’éléments à afficher dans une listepermet de réduire le temps de rendering. »

5

<ul infinite-scroll="addMoreItems()"> <li ng-repeat="item in items"> {{item.name}} </li></ul>

Astuce #2 : ngInfiniteScroll

« Charger uniquement les premiers éléments d’une listepermet de réduire le temps de rendering. »

http://binarymuse.github.io/ngInfiniteScroll<>

6

<ul> <li bindonce ng-repeat="item in items" bo-text="item.name"></li> </ul>

Astuce #3 : Bindonce

« Passé les 2000 watchers, la page peut commencer à ramer.Avec bindonce, cette liste n’a plus qu’un seul watcher ! »

https://github.com/Pasvaz/bindonce<>

7

<ul> <li ng-repeat="item in filteredItems()">{{item.name}}</li> </ul>

Astuce #4 : pas de fonction inline !« Besoin de filtrer la liste dans un contrôleur ?

N’utilisez pas une fonction pour récupérer la liste filtrée ! »

ngRepeat évalue l’expression à chaque $digest,ce qui est fait très fréquemment.

<ul> <li ng-repeat="item in items">{{item.name}}</li> </ul>

<li ng-repeat="item in items"> {{item.name | myHeavyFilter}} </li>

Astuce #5 : utiliser track by (>= 1.2)Mise à jour d’une liste :

Angular supprime et recrée chaque élément dans le DOM

Mise à jour d’une liste :Angular fait un diff des deux listes et ne créé / supprime que les éléments non 

identiques.

<li ng-repeat="item in items track by item.id"> {{item.name | myHeavyFilter}} </li>

Mon appli rame quand j’utilise ngIf ou ngShow

Problème #2

10

<div ng-click="toggle = !toggle">Click</div> <div ng-if="toggle" ng-repeat="item in oldItems">{{item.name}}</div> <div ng-if="!toggle" ng-repeat="item in newItems">{{item.name}}</div>

Astuce #6 : bien utiliser ngShow

« ngShow rend l’élément dans le DOMmême si il n’est pas visible. »

<div ng-click="toggle = !toggle">Click</div> <div ng-show="toggle" ng-repeat="item in oldItems">{{item.name}}</div> <div ng-show="!toggle" ng-repeat="item in newItems">{{item.name}}</div>

11

<li ng-repeat="item in items" ng-click="expand = !expand"> {{item.name}} <span ng-show="expand">{{item.description}}</span> </li>

Astuce #7 : bien utiliser ngIf

« Contrairement à ngShow,ngIf empêche le rendering de l’élément dans le DOM »

<li ng-repeat="item in items" ng-click="expand = !expand"> {{item.name}} <span ng-if="expand">{{item.description}}</span> </li>

Et si on optimisait aussi les requêtes ?

13

$resource('/users', {}, { query: { method: ’GET’, cache: true, isArray: true } });

Astuce #8 : cache HTTP

« Activer le cache HTTP, permet de mettre en cache la requêteEt ainsi accélérer le prochain affichage de la page »

14

Astuce #9 : $q.all()

« $q.all() permet de paralléliser les promisespuis de traiter chacun des résultats en même temps,

tout en choisissant l’ordre de traitement des réponses. »

Qu’est-ce qu’une application « performante » ??

Mais au fait…

Ce qui est important,ce ne sont pas les millisecondespassées à afficher une page mais

C’est La Performance Utilisateur

17

.when('/accounts', { templateUrl: 'views/accounts/index.html’, resolve: { accountList: ['apiV1', function (apiV1) { return apiV1.accountList().$promise; }] } });

Astuce #10 : resolve

ngRouter attend que toutes les dépendances appelées dans resolve soient résolues avant d’instancier le contrôleur puis

changer de route.

Est-ce que ça veut dire que je dois utiliser resolve pour chaque route ?

Application synchrone!

Page bloquée = utilisateur mécontent

Pas toujours nécessaire (données cachées)

Page blanche

Surtout pas !

!

!

!

Tout est une question de perception

Montrez à votre utilisateur qu’une action est en cours……ce bon vieux spinner (HttpInterceptor est votre ami)

Tout est une question de perception

Mais ne le mettez pas à chaque fois non plus ! …l’utilisateur considère une action comme étant instantanée si elle prend moins de 100ms

Tout est une question de perceptionLa technique de « l’apéro »……donnez-lui quelque chose à grignoter pendant que l’application est en train de mijoter

Et pour aller plus loin… ?

24

Astuce #troll : pour les vues complexes, utilisez…

Optimizing AngularJS: 1200ms to 35ms

https://github.com/scalyr/angular<>

Et un grand merci à mon collègue @jorisCalabreseà qui j’ai salement pompé ces magnifiques picto dessinés à la main !

Merci.

@JohnMeiss

Est-ce qu’on vous a dit qu’on recrutedes ninjas dev front-end ?

27

Ressources

• http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/

• http://stackoverflow.com/questions/15643467/how-to-speed-up-an-angularjs-application

• http://blog.stackfull.com/2013/02/angularjs-virtual-scrolling-part-1/