YLT paris js - mars 2015

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

http://yellowlab.tools

• 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

MERCI !

http://yellowlab.tools

twitter : @gaelmetais