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

Tester 

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