Après plusieurs projets phonegap/cordova, et surtout « Synchronised« , le plus lourd en terme de contenus/animations/effets visuels, je vous présente une liste de techniques d’optimisations pour que vos applis restent fluides.

Cette liste peut s’appliquer à tout projet sur mobile/tablette, vu que les projets phonegap ne sont pas moins que des webapp encapsulés dans les moteurs natifs iOS/Android/Windows Phone/etc..

Ces optimisations font suite à l’excellent article de Jonathan Vallet sur les performances des applications Phonegap, même si certaines informations se recoupent.

1 – jQuery est trop lent!

Les manipulations du DOM,  en recherche, création ou modification d’éléments, à l’aide de jQuery sont à proscrire! Préférez du javascript vanilla, ou à la limite des librairies « light » comme Zepto.js ou xui.js

2 – Animations et transitions CSS3

Toutes les animations et transitions doivent être réalisées en CSS3, finit la méthode animate de jQuery! Evitez d’inclure vos transitions CSS dans vos codes javascript, sauf pour les animations dynamiques. Il suffit d’une simple classe sur un élément pour déclencher l’animation.

3 – Accélération matérielle

Tous les éléments animés doivent avoir la propriété CSS « -webkit-transform: translate3d(0,0,0); » ou alors « -webkit-transform: translateZ(0); ». Ces propriétés activent l’accélération matérielle sur l’élément ciblé, c’est désormais le processeur graphique qui va gérer l’affichage de l’élément.

4 – Test sur Device

Pour bien évaluer les performances, testez le plus souvent possible sur votre iphone/ipad plutôt que sur le simulateur iOS. Les performances du simulateur sont celles de votre mac, pas celles d’un vrai device.

5 – Show/Hide

Dans les nombreux cas où l’on doit afficher un élément, si le « display: none / display: block » n’est pas très réactif,  le fait de déplacer l’élément en dehors du viewport peut améliorer grandement les performances d’affichage, exemple:

.show {
    -webkit-transform: -translate3d(0,0,0);
}
.hide {
    -webkit-transform: -translate3d(0,9999px,0);
}

 6 – Accélerer la compilation de Cordova

A chaque modification dans votre dossier /www, au lieu de builder votre application à l’aide de la commande   cordova build ios  , essayer la commande « prepare » : cordova prepare ios , qui est beaucoup plus rapide.

La commande « build » est nécessaire pour créer une ipa, la commande « prepare » compile juste les modifications html/css/js.

7 – Propriétés CSS à éviter

Dans la mesure du possible, évitez de surcharger l’affichage avec des propriétés CSS tels que:

• text-shadow
• box-shadow
• border-radius

Ces propriétés sont assez lourdes à prendre en compte pour le processeur, surtout si vous en avez beaucoup.

8 – Dégradés

Dans la lignée des propriétés CSS à éviter, préférez un background-image plutôt qu’un dégradés CSS3: l’affichage du dégradé sera de meilleure qualité toute en allégeant le rendu.

9 – Touch events

Toujours dans le mesure du possible, évitez de binder des éléments sur l’événement « click ». Utilisez plutôt les événements tels que « touchstart », « touchend » ou « touchmove ».

Si vous avez vraiment besoin de l’événement « click », ajoutez la librairie fastclick.js, qui supprime le délai de 300ms entre le « mousedown » et « mouseup ».

10 – Généralités de dev

Comme dans tout projet web, et pas uniquement dans le cas de Cordova/Phonegap, je rappelle l’importance de certains procédés indispensables:

• concaténez et minifiez tous vos fichiers js et css.
• optimisez vos images.