Philippe Didiergeorges Aka Philess

//Build/ 2012: Retour sur “Building high performing javascript for Modern Engines”

Cette session traitait d’optimisation de performance en javascript, dans le cadre de développement de jeux. Depuis les outils d’analyse, en passant par les bonnes pratiques de développement et avec un rapide saut au sein même de la logique interne des moteurs javascript des navigateurs cette session était un excellent condensé d’information pour les développeurs curieux du sujet.

Les deux speakers présents ont basés leurs session sur l’exemple de BubbleMark (www.bubblemark.com/dhtml.htm) Voici donc ce qu’il fallait en retenir.

Tooling pour profiler votre code js:

• Windows performance analyzer pour une analyse globale des performances

• jsPerf (jsperf.com): pour les micro-benchmark
• jsPerf est un service permettant de tester le performances de petits morceaux de code javascript et de générer des benchmarks pour tout un ensemble de navigateurs du marché. Cela va permettre de comparer les performance entre différentes manière d’effectuer une opération pour faire ses choix.
• jsPerf permet de tester du code intégrant des librairies telles que jQuery, node.js, mootools, doj, etc…
• de grand acteur du javascript tels que jQuery et mootols ont adopté jsPerf
• Attention: jsPerf ne permet pas de randomiser ses scénarios de test ni de tester des opération asynchrones

Eviter toute opération inutile

• Utiliser GetAnimationFrame pour caler l’exécution de la boucle de jeu sur le rafraichissement de l’image. Il est inutile de recalculer 100 fois par secondes la position de nos éléments à l’écran si le navigateur ne rafraichit son animation que 60 fois par secondes.
• Reduire au maximum les accès au DOM. Par exemple l’exécution de la ligne suivante va exécuter 6 appels consécutifs pour atteindre son élément cible:

Document.body.box.getElementById("toto").style.left= “10px”;

On comprend donc l’intérêt de limiter ce types d’opérations. Dans le cas ou l’on souhaites modifier plusieurs propriétés de cet élément il est préférable d’enregistrer l’élément cible du DOM dans une variable afin d’y accéder directement par la suite.

• Utiliser des variables pour stocker les valeurs utilisée plusieurs fois en cache: comme pour le cas des éléments du DOM, cela peut s’appliquer à tout type de valeur qui sera appelé de nombreuses fois. Par exemple pour le calcul d’angles, une bonne pratique sera de stocker la valeur de pi dans une variable plutôt que de faire appel à chaque fois à Math.PI.
• Charger les  variables de type numérique avec la méthode ParseInt() pour typer l’objet à sa création. En effet, sans cela, l’objet créé sera de type string et chaque opération arithmétique l’utilisant va exécuter au préalable une opération de conversion de String vers Number. (jusqu’à 30% du temps CPU sur un jeu!!)

Créer des objets rapides (Fast Access):

Certaines pratiques permette d’assurer un accès rapide à nos objets et leurs propriétés. Cette technique est appelée Fast property access. Les choses à savoir sont:

• La suppression est très lente dans un objet JS (tab, properties) => mieux vaut charger la valeur de l’objet à une valeur nulle (qui va permettre de l’identifier comme n’étant pas à traiter)
• Il est important de comprendre la structure des objets en javascript:
• Il s’agit de “sacs de propriétés”. On peut ajouter et supprimer des propriétés au fil de l'eau, ils (les objets) sont utilisés comme des dictionnaires, et il est possible d'enumerer leurs propriétés.
• Ajout d'une propriété = création d'un nouvel objet.
• Il est donc conseillé de créer un seul type d’objet comprenant de base toutes les propriétés possibles (afin d’éviter l’ajout dynamique de propriétés modifiant la structure du modèle) avec une valeur par défaut pour que le moteur JS n’ai pas à réimplémenter un nouveau modèle et mais utilise directement celui contenu en cache interne.
• Ne pas utiliser les getter et setter!! Ce sont des property bags très lents et très dur à optimiser!
• Utilisation du cache "inline" (définition de nos propriétés par défaut dans le proto) => le moteur js connait d'avance le type des prop

Garbage Collection

Les causes pouvant entrainer un remplissage exessif de la garbage collection:

• Javascript est un language Très flexible et permissif et se base sur un typage dynamique.

• Pour une operaiton appelée sur un objet, la heap  binaire va tester tout les cas possibles en tentant de trouver le type des var pour choisir quelle operation faire. Cela va entrainer la création d’un objet par type possible pour tester tous les cas de figure. => remplissage rapide de la garbage collection

• Utilisation de float: Préférez les integer autant que possible car bien plus performants
• Quand les floats sont inévitables, ensez bien à typer vos variables en type Number

Une meilleure gestion des tableaux:

• Pensez à utiliser les tableau typés: remplacer Array par Float64Array, UInt32Array,etc…
• Essayez autant que possible de spécifier la taille de votre tableau à sa création plutot que d’utiliser la méthode push
• Pre-allouez les éléments de votre tableau => définir toutes les valeurs à 0 pour instancier le bon type de que de faire des push
• Parcourir vos tableaux plus efficacement. Il sera toujours plus performant de parcourir un tableau avec un for(int i=0; i<tab.length; i++) qu’avec un for(item in tab) ou un tab.forEach