Internet Explorer 9 Les outils de développement en détails - Partie 4 : Profilage Javascript
Ce billet fait partie d'une série sur les Developer Tools inclus avec Internet Explorer (et ce depuis la version 8) visant à vous aider à améliorer vos sites Web grâce à des outils d'examen de contenu, à diagnostiquer des problèmes, à améliorer les performances, et bien plus encore:
- Partie 1 - Introduction
- Partie 2 - Travailler avec HTML et CSS
- Partie 3 - Débogage de script JavaScript
- Partie 4 - Profilage de script JavaScript
- Partie 5 – Performance et analyse des échanges réseaux
Si vous ne connaissez pas les outils de développement (encore appelés F12 Tools ou encore Developer Tools), je vous recommande de commencer par lire le billet d'introduction.
Profilage de JavaScript avec Internet Explorer
Dans le dernier billet, nous avons vu de nombreuses fonctionnalités d'aide à la création de JavaScript sans bug, mais comment le rendre optimisé? Bien que le nouveau moteur Javascript "Chakra" de IE9 améliore énormément les performances, cela ne signifie pas que nous pouvons arrêter de chercher des façons d'optimiser les performances des scripts.
Démarrons les outils de développement (Touche F12 ou choisissez Outils -> Outils de développement F12) et jetons y un oeil.
Introduction au Profilage
L'onglet Profileur des outils de développement vous permet d'analyser l'exécution de JavaScript, en indiquant quelles fonctions (celles de vos scripts et les fonctions natives) sont appelées et le temps d'exécution.
Cliquez simplement sur "Démarrer le profilage", chargez une page et / ou utilisez les fonctionnalités de la page, puis cliquez sur "Terminer le profilage». Vous pouvez également utiliser la touche F5 puis Maj + F5 pour démarrer / terminer, mais c'est rarement plus simple.
Dans cet exemple, nous utilisons l'exemple "ECMAScript5 Tile Switch Game" tiré du site IETestDrive.
Lorsque la session de profilage est arrêtée, un rapport du script instrumenté est affiché, vous y trouverez par défaut :
- Fonction : Le nom de la fonction
- Compteur : Le nombre de fois que la fonction a été appelée
- Temps inclusif (ms) : Le temps passé dans la fonction plus toutes les fonctions qu'elle appelle
- Temps exclusive (ms) : Le temps passé uniquement dans la fonction
- URL (du fichier contenant la fonction)
- Numéro de la ligne
Voir le code source d'une fonction
Double-cliquez sur une ligne pour aller directement au code source de la fonction, si toutefois vous y avez accès. Vous pouvez aller voir la Partie 3 - débogage JavaScript pour plus de détails sur l'onglet Script.
Astuce: En règle générale, vous pouvez voir le code source pour les lignes dont le champ URL est renseigné. Dans notre exemple playSound(), mais pas play()ou getElementById():
Astuce: Vous pouvez également ajouter la colonne Type de fonction (que nous verrons plus loin) et rechercher les fonctions "Utilisateurs".
Cliquez sur l'onglet Profileur pour revenir à la liste.
Personnalisation et tri dans le rapport
Il y a plus de détails disponibles sur les colonnes qui sont masquées par défaut. Pour les afficher, cliquez droit dans le rapport et choisissez "Ajouter/Supprimer des colonnes":
Cela vous donnera accès à:
- Pourcentage de temps Inclusif - Pourcentage du temps total
- Pourcentage de temps Exclusif
- Temps moyen (ms)
- Temps maximum (ms)
- Temps minimum (ms)
- Type de fonction - Utilisateur, DOM, Intégré
Le menu du clic droit permet également de trier les lignes par les colonnes affichées, mais vous trouverez probablement plus simple de cliquer directement sur les en-têtes des colonnes pour basculer entre le tri ascendant et descendant.
Type d'affichage du rapport
Il y a deux options disponibles pour la visualisation des données du rapport de profilage: Fonctions et Arborescence des appels.
Affichage par fonctions
Par défaut, les rapports sont présentés en affichage par fonctions. Le contenu est affiché au niveau des fonctions (une ligne par fonction) et permet de voir facilement les appels les plus fréquents et les appels les plus chronophages.
Affichage par arborescence des appels
L'affichage par arborescence des appels affiche les mêmes données (chaque ligne est encore une fonction spécifique), mais organisées en une hiérarchie appelant / appelé. D'une la fonction racine, développez pour voir les fonctions qui ont été appelés (et développez à leur tour ces fonctions).
- Astuce: Contrairement à l'afficher par fonctions, la même fonction peut apparaître à plusieurs endroits, dans le cas où elle a été appelée par les différentes parties de l'application. Dans l'image ci-dessus, playSound() apparaît sous endPieceFlip() et aussi sous startPieceFlip()..
Le tri en affichage par Arborescence des appels fonctionne au niveau du groupe, chaque sous-groupe est trié individuellement.
Rechercher dans les rapports
Comme dans les autres écrans des outils de développement, vous pouvez utiliser la zone de recherche pour trouver des fonctions Javascript par leur nom :
Si une correspondance est trouvée, utilisez les boutons Suivant et Précédent 
Comparer des Rapports
Lorsque vous créez des sessions de profilage, vous pouvez voir que le rapport est enregistré dans le menu déroulant à droite :
Utilisez ce menu déroulant pour basculer entre les sessions de profilage. Ils ne sont conservés que pendant la durée de vie de la fenêtre.
Pour enregistrer les données pour une utilisation ultérieure, ou effectuer une analyse plus approfondie, cliquez sur le bouton "Exporter des données" 
- Astuce: Vous pouvez copier des éléments (délimités par des tabulations) directement à partir du rapport. Sélectionnez les données via un simple clic ou Ctrl + clic (pour les sélections multiples), ou encore CTRL + A (pour tout sélectionner), puis CTRL + C ou clic droit et choisissez "Copier" pour ajouter des données au presse papier.
Une fois dans Excel, vous pouvez décider comment vous allez gérer vos données de rapport. Vous pouvez construire un référentiel des données de performance de vos script que vous alimenterai au fil de vos développement, créer des graphiques, ou même détecter les changements et les tendances de session en session.
Conseils pour optimiser les performances
Maintenant que vous savez comment fonctionne le profileur, que devriez-vous recherchez? Il s'agit là d'un vaste sujet, objet de livres, des présentations et des articles, mais voici quelques idées pour vous aider à y réfléchir:
- Trouvez les goulots d'étranglement - Evident, mais difficile à maîtriser. Passez du temps là où il y a le plus à gagner. Effectuez un profilage, puis triez les données sur le temps exclusif pour avoir une vision générale et synthétique. Plus vous lirez des articles et des livres sur les optimisations JavaScript et suivrez les nouveautés en JavaScript (par exemple, les nouvelles possibilités ECMAScript 5), meilleur vous serez à trouver des optimisations.
- Trop grand nombre d'appels - Appeler de nombreuses fois une fonction n'est pas nécessairement un problème, mais c'est un bon endroit pour commencer à chercher. Pouvez-vous refactoriser le code pour traiter une série d'appels en même temps? Déplacer les conditions au plus tôt pour limiter l'exécution de code (une bonne utilisation de l'arborescence des appels)? Faire des requêtes asynchrones?
- Des appels répétés - Un fonction est très souvent appelée avec les mêmes paramètres? Certaines valeurs sont recalculées très souvent? Ils peuvent être de bons candidats pour une mise en cache ou pour une externalisation et une centralisation des calculs (côté serveur ou côté client).
- Utilisez des données réalistes - Certaines problèmes ne se manifestent que dans les scénarios de production. Testez avec des données et des conditions réalistes ... avant que vos utilisateurs ne le fassent (par exemple tester un analyseur de document avec un simple "Hello Wold !" n'est pas suffisant).
Encore une fois, Il ne s'agit là que de quelques pistes, de nombreux livres et articles peuvent vous aider. Pour plus de détails, regardez la session du Mix11 de Jason Weber "50 astuces pour rendre vos sites Web HTML5 plus rapide".
A Suivre : Partie 5 - Performance et analyse des échanges réseaux
L'exécution du Javascript n'est qu'une partie de la performance d'un site. La façon dont vous utilisez (ou n'utilisez pas) le réseau est un autre facteur de performance important.
Dans le prochain article, nous allons jeter un oeil à la fonction de réseau qui a été ajoutée aux outils de développement pour Internet Explorer 9.
Ce billet est une adaptation du post de Chris Bowen (Principal Developer Evangelist for Microsoft) : Internet Explorer 9 Developer Tools Deep Dive – Part 4: Profiling Javascript