Performance du Javascript : Comment vérifier ce qui ralentit la page ?

Question

J'ai une page qui est très lente, non pas au niveau du chargement, mais au niveau de la réactivité de la saisie dans les champs du formulaire sur la page.

Il n'y a pas d'ajax sur la page - cela n'a rien à voir avec le transport du réseau.

Quelles sont les bonnes stratégies pour découvrir où se trouvent les goulets d'étranglement du code ? Je n'ai rien trouvé dans les outils de développement de chrome pour me dire où se trouvent les goulots d'étranglement.

Answer 1

Webkit dispose d'une option "profil". Ouvrez les outils de développement (ctrl+shift+i) et cliquez sur "Profils". De là, vous pouvez voir un bouton d'enregistrement (le cercle) en bas. Cliquez dessus et utilisez votre page comme vous le feriez normalement. Cliquez à nouveau sur ce bouton pour arrêter et inspecter les chronologies de vos appels de fonction !

Il est également possible d'évaluer les fonctions individuellement à l'aide de la fonction de benchmarking :

console.time( "Some label" );
console.timeEnd( "Some label" );

Answer 2

Il me semble que vous avez un événement qui se déclenche à chaque fois que vous appuyez sur une touche de votre champ de saisie. Ce que vous pouvez faire :

1. Si le profileur de Chrome ne répond pas à vos besoins, essayez FireBug ou le profileur d'IE9 qui est tout à fait décent. Dans IE9, vous pouvez voir combien de temps CPU a été passé sur chaque appel de fonction.
2. Retirez temporairement les gestionnaires des champs, un par un, et observez tout changement dans les performances.

Tenez-moi au courant !