Fast Apps and Sites with JavaScript (4-313)

Session animée par Gaurav Seth

Session sur comment faire ou améliorer les perfs de nos codes JavaScript.

Les démos présentées sont disponibles ici :

http://aka.ms/fastjs

http://aka.ms/fasterjs

On attire notre attention sur le fait que le browser est en single thread donc pour atteindre 60fps, les traitements doivent prendre moins de 16ms sinon on a du flickering. JavaScript est très flexible et permet toujours plusieurs façons très différentes de faire quelque chose, donc il faut être vigilant car certains mauvais usages ont des impacts importants sur les perfs.

Le premier point abordé est de faire attention aux allocations d’objet. L’allocation elle même n’est pas très couteuse mais elle implique de la garbage collection. Si on doit manipuler beaucoup d’objets, on peut par exemple faire des pools d’objets.

JavaScript permet de faire des objets avec des propriétés dynamiques, mais les interpréteurs infèrent des types. Il est préférable d’initialiser toutes les propriétés des objets, même celles qui ne sont pas utilisées. Le moteur peut ainsi optimiser le type. L’utilisation du mot clé delete, ou l’ajout de propriétés à la volée, ou le fait de changer le type d’une propriété empêchent aussi le moteur d’optimiser le type. L’utilisation des accesseurs sur les propriétés est également plus lent. De la même façon, il est préférable d’avoir un format homogène sur les données stockées dans les tableaux. L’idéal est d’utiliser les array typées (Float64Array). Pour itérer sur les tableaux, le plus efficace est une boucle for, a condition de ne pas faire un .length dans le for (faire une variable).

En JavaScript les nombres sont par défaut des double en 64bits. Le moteur peut améliorer les perfs si il peut être sûr de pouvoir stocker une variable sous la forme d’un nombre entier.
Le dernier point est de prendre garde aux appels au DOM. Il est souvent préférable de créer une variable intermédiaire (sur la propriété style par exemple).

Guillaume Leborgne

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s