La performance en JavaScript
#85183
Les boucles
map

map2

Comparaison

Conclusions
- Toujours pré-calculer la condition d'arret lorsque c'est possible
- Peu d'écart et beaucoup d'optimisations faites par le désoptimisateur
- Peut faire la différence sur des applications qui boucles souvent sur un tableau
Les tableaux
fromZeroTo

Range

Comparaison

Conclusions
- Si l'on connait la taille du tableau, utiliser le constructeur
- Appeler une fonction/méthode (push) est plus lent que de viser un index directement
- Essayer quand c'est possible d'aider l'interpréteur
Opérateur de décomposition
concatenate

concatenate2

Comparaison

Conclusions
- concat ne peut pas fonctionner avec des types différents (donc moins d'assertion)
- spread est capable de travailler avec n'importe quel type (donc plus d'assertion et de travail)
- Le spread operator c'est beau mais c'est à utiliser avec parcimonie !
La mémoization
fibonacci

fibonacci2

fibonacci2 (closure)

Comparaison

Conclusions
- transparence référentielle
- Récursion, souvent les mêmes paramètres
- React.memo
Auto-boxing
Non, ça ne veut pas dire se frapper soi-même calmez-vous
getLength

getLength2

Comparaison

Conclusion
- L'auto-boxing c'est le fait de pouvoir accéder à des méthodes sur des primitives
- Parfois, la meilleure optimisation c'est de ne pas optimiser
- Évitez d'utiliser les constructeurs (sauf cas spéciaux)
Promesses parallélisées
jsonplaceholder

jsonplaceholder2

Comparaison

Attention ! Les tests sont très longs...
Conclusion
- Identifier et paralléliser quand on le peut
- link[rel="preload"]
- blablaSync en Node.js : NOPE!!!
R. Dahl

"I added promises to Node in June 2009 but foolishly removed them in February 2010. Promises are the necessary abstraction for async/await. It's possible unified usage of promises in Node would have sped the delivery of the eventual standardization and async/await. Today Node's many async APIs are aging baldly due to this."

Tree shaking
import

import2

Comparaison

Conclusions
- Diminution de la taille du bundle de 85.61% (donc moins de bytes à télécharger/parser)
- Utiliser les librairies ECMAScript 2015+ et les imports nommés lorsque c'est possible
- Bundlephobia
- Utiliser ESLint pour vous assurer de bien utiliser tous vos imports
Boucles
Oui, encore...
sum

sum2

sum3

sum4

While

Comparaison

Conclusion
- For in peut récupérer des propriétés d'un objet
- For/While les plus rapides car aucune assertion faite
- ForEach sexy mais pas rapide

Conclusion
Merci
merci de nous avoir écouté, nous allons maintenant passer aux questions !


#85183
La performance en JavaScript
By Amin Nairi
La performance en JavaScript
- 154