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 ?

1. ANALYSER LE CODE SPAGHETTI D’UNE PAGE
avecYellow LabTools

2. QUI SUIS-JE ?
Gaël Métais
Freelance spécialisé dans la WebPerf
@gaelmetais

3. -Steve Souders
« 80-90% of the end-user response time is spent on
the frontend. Start there. »

4. OÙ SE SITUE LA LENTEUR ?
• Réseau
• Exécution des scripts

5. LORSQUE LE CACHE EST
CHAUD
• Réseau
• Exécution des scripts

6. « Ah oui, tout de même… »
-vous
Chargement d’une page - Chrome DevTools

7. COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
223ms

8. COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
634ms

9. COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
1351ms

10. COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
1554ms

11. COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
2327ms

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. EXÉCUTION DES SCRIPTS
Code JS

14. EXÉCUTION DES SCRIPTS
Code JS DOM

15. EXÉCUTION DES SCRIPTS
Code JS DOM
Lecture
Modification
Binding
Recherche

16. EXÉCUTION DES SCRIPTS
Code JS DOM
Lecture
Modification
Binding
Repaint
Reflow
Recherche

17. EXÉCUTION DES SCRIPTS
Code JS DOM
Lecture
Binding
Buffer d’écriture
Repaint
Reflow
Recherche

18. PERFECT = zéro modification du DOM au chargement

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. http://yellowlab.tools

22. • Complexité de la
page
• Respect des bonnes
pratiques
• Problèmes de
performance

23. SOUS LE CAPOT
Front
AngularJS
Serveur
NodeJS
PhantomJS + Phantomas

27. Présentation du profiler
• Sous-fonctions de jQuery
• Les warnings
• Résultats des requêtes
• Backtrace

28. Quel est le meilleur moment pour exécuter le JS ?

29. • 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

30. 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

31. 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

32. OPEN SOURCE

33. Pour que l’outil vive et s’améliore…
• Contribuez !
• Signalez les bugs
• Parlez-en autour de vous
• Ajoutez une ★ sur GitHub

34. MERCI !
http://yellowlab.tools
twitter : @gaelmetais