ANALYSER LE CODE SPAGHETTI D’UNE PAGE
avecYellow LabTools
QUI SUIS-JE ?
Gaël Métais
Freelance spécialisé dans la WebPerf
@gaelmetais
-Steve Souders
« 80-90% of the end-user response time is spent on
the frontend. Start there. »
OÙ SE SITUE LA LENTEUR ?
• Réseau
• Exécution des scripts
LORSQUE LE CACHE EST
CHAUD
• Réseau
• Exécution des scripts
« Ah oui, tout de même… »
-vous
Chargement d’une page - Chrome DevTools
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
223...
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
634...
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
135...
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
155...
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
232...
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
388...
EXÉCUTION DES SCRIPTS
Code JS
EXÉCUTION DES SCRIPTS
Code JS DOM
EXÉCUTION DES SCRIPTS
Code JS DOM
Lecture
Modification
Binding
Recherche
EXÉCUTION DES SCRIPTS
Code JS DOM
Lecture
Modification
Binding
Repaint
Reflow
Recherche
EXÉCUTION DES SCRIPTS
Code JS DOM
Lecture
Binding
Buffer d’écriture
Repaint
Reflow
Recherche
PERFECT = zéro modification du DOM au chargement
Du code spaghetti
Du code mort ou inutilisé
Quand j’audit des sites je trouve plutôt ceci :
$(‘#xmas2004').snow()
Des plug...
http://yellowlab.tools
• Complexité de la
page
• Respect des bonnes
pratiques
• Problèmes de
performance
SOUS LE CAPOT
Front
AngularJS
Serveur
NodeJS
PhantomJS + Phantomas
Présentation du profiler
• Sous-fonctions de jQuery
• Les warnings
• Résultats des requêtes
• Backtrace
Quel est le meilleur moment pour exécuter le JS ?
• Lot 1 : code ultra prioritaire
• Lot 2 : modifications du DOM au dessus de la ligne de
flottaison
• Lot 3 : bindings + des...
Différence avec les profilers des navigateurs
- lisibilité
- détail des éléments
du DOM concernés
- profiling jQuery
- mesur...
Devoirs à la maison
• Recherchez des patterns qui se répètent et optimisez-les
• Groupez les écritures du DOM ensemble
• R...
OPEN SOURCE
Pour que l’outil vive et s’améliore…
• Contribuez !
• Signalez les bugs
• Parlez-en autour de vous
• Ajoutez une ★ sur Git...
MERCI !
http://yellowlab.tools
twitter : @gaelmetais
YLT paris js - mars 2015
YLT paris js - mars 2015
YLT paris js - mars 2015
YLT paris js - mars 2015
Prochain SlideShare
Chargement dans…5
×

YLT paris js - mars 2015

453 vues

Publié le

Présentation de l'outil http://yellowlab.tools

Pourquoi le JavaScript peut-il être si lent ?
Comment l'accélérer en diminuant le nombre d'accès au DOM ?
Comment utiliser Yellow Lab Tools pour analyser le code JS et trouver des axes d'optimisaiton ?

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
453
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

YLT paris js - mars 2015

  1. 1. ANALYSER LE CODE SPAGHETTI D’UNE PAGE avecYellow LabTools
  2. 2. QUI SUIS-JE ? Gaël Métais Freelance spécialisé dans la WebPerf @gaelmetais
  3. 3. -Steve Souders « 80-90% of the end-user response time is spent on the frontend. Start there. »
  4. 4. OÙ SE SITUE LA LENTEUR ? • Réseau • Exécution des scripts
  5. 5. LORSQUE LE CACHE EST CHAUD • Réseau • Exécution des scripts
  6. 6. « Ah oui, tout de même… » -vous Chargement d’une page - Chrome DevTools
  7. 7. COMBIEN ? ParisJS.org Fnac.com PriceMinister.com LeMonde.fr LeFigaro.fr NYTimes.com Temps d’exécution JS au chargement 223ms
  8. 8. COMBIEN ? ParisJS.org Fnac.com PriceMinister.com LeMonde.fr LeFigaro.fr NYTimes.com Temps d’exécution JS au chargement 634ms
  9. 9. COMBIEN ? ParisJS.org Fnac.com PriceMinister.com LeMonde.fr LeFigaro.fr NYTimes.com Temps d’exécution JS au chargement 1351ms
  10. 10. COMBIEN ? ParisJS.org Fnac.com PriceMinister.com LeMonde.fr LeFigaro.fr NYTimes.com Temps d’exécution JS au chargement 1554ms
  11. 11. COMBIEN ? ParisJS.org Fnac.com PriceMinister.com LeMonde.fr LeFigaro.fr NYTimes.com Temps d’exécution JS au chargement 2327ms
  12. 12. COMBIEN ? ParisJS.org Fnac.com PriceMinister.com LeMonde.fr LeFigaro.fr NYTimes.com Temps d’exécution JS au chargement 3882ms (sur un ordinateur puissant)
  13. 13. EXÉCUTION DES SCRIPTS Code JS
  14. 14. EXÉCUTION DES SCRIPTS Code JS DOM
  15. 15. EXÉCUTION DES SCRIPTS Code JS DOM Lecture Modification Binding Recherche
  16. 16. EXÉCUTION DES SCRIPTS Code JS DOM Lecture Modification Binding Repaint Reflow Recherche
  17. 17. EXÉCUTION DES SCRIPTS Code JS DOM Lecture Binding Buffer d’écriture Repaint Reflow Recherche
  18. 18. PERFECT = zéro modification du DOM au chargement
  19. 19. Du code spaghetti Du code mort ou inutilisé Quand j’audit des sites je trouve plutôt ceci : $(‘#xmas2004').snow() Des plugins jQuery « magiques » jquery.remue-ciel-et-terre.js Les scripts du marketing
  20. 20. http://yellowlab.tools
  21. 21. • Complexité de la page • Respect des bonnes pratiques • Problèmes de performance
  22. 22. SOUS LE CAPOT Front AngularJS Serveur NodeJS PhantomJS + Phantomas
  23. 23. Présentation du profiler • Sous-fonctions de jQuery • Les warnings • Résultats des requêtes • Backtrace
  24. 24. Quel est le meilleur moment pour exécuter le JS ?
  25. 25. • Lot 1 : code ultra prioritaire • Lot 2 : modifications du DOM au dessus de la ligne de flottaison • Lot 3 : bindings + dessous de la ligne de flottaison • Lot 4 : scripts de tracking, publicité… Quel est le meilleur moment pour exécuter le JS ? 1 2 3 4
  26. 26. Différence avec les profilers des navigateurs - lisibilité - détail des éléments du DOM concernés - profiling jQuery - mesure précise du temps - fonctions lourdes
  27. 27. Devoirs à la maison • Recherchez des patterns qui se répètent et optimisez-les • Groupez les écritures du DOM ensemble • Repérez les appels jQuery qui font beaucoup de sous- requêtes • En particulier show, hide, fadeIn, fadeOut (trop de magie) • Surveillez ce que font vos plugins jQuery et les scripts tiers
  28. 28. OPEN SOURCE
  29. 29. Pour que l’outil vive et s’améliore… • Contribuez ! • Signalez les bugs • Parlez-en autour de vous • Ajoutez une ★ sur GitHub
  30. 30. MERCI ! http://yellowlab.tools twitter : @gaelmetais

×