Embed Size (px)
Citation preview
ANALYSER LE CODE SPAGHETTI D’UNE PAGE
avec Yellow Lab Tools
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 Dev Tools
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
223ms
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
634ms
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
1351ms
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
1554ms
COMBIEN ?
ParisJS.org
Fnac.com
PriceMinister.com
LeMonde.fr
LeFigaro.fr
NYTimes.com
Temps d’exécution JS au chargement
2327ms
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)
EXÉCUTION DES SCRIPTS
Code JS
EXÉCUTION DES SCRIPTS
Code JS DOM
EXÉCUTION DES SCRIPTS
Code JS DOMLecture
Modification
Binding
Recherche
EXÉCUTION DES SCRIPTS
Code JS DOMLecture
Modification
Binding
Repaint Reflow
Recherche
EXÉCUTION DES SCRIPTS
Code JS DOMLecture
Binding
Buffer d’écriture
Repaint Reflow
Recherche
PERFECT = zéro modification du DOM au chargement
Du code spaghettiDu 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
• Complexité de la page
• Respect des bonnes pratiques
• Problèmes de performance
SOUS LE CAPOT
FrontAngularJS
ServeurNodeJS
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 + 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
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
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
OPEN SOURCE
Pour que l’outil vive et s’améliore…
• Contribuez !
• Signalez les bugs
• Parlez-en autour de vous
• Ajoutez une ★ sur GitHub
