mozilla
Vos résultats de recherche

    Profileur JavaScript

    Le Profileur JavaScript est très pratique pour trouver les points noirs dans un code JavaScript. Le Profileur prend périodiquement des échantillons de la pile d'appel JavaScript et compile des statistiques de ces échantillons.

    Pour lancer le Profileur, il faut sélectionner "Performances" dans le menu "Développement" (qui est un sous menu du menu "Outils" sous Mac OS X).

    Les Outils de développements s'ouvrent alors, avec le Profileur sélectionné.

    Profileur à échantillon

    Le Profileur JavaScript est un profileur à échantillons. Cela veut dire qu'il échantillonne périodiquement l'état du moteur JavaScript, et enregistre la pile du code qui s'exécute au moment où l'échantillon a été pris. Statistiquement, le nombre d'échantillons dans lequel on exécute une fonction en particulier correspond au temps que le navigateur passe à l'exécuter. Il est alors possible de trouver les points noirs de votre code.

    Par exemple, considérons un programme comme celui-ci :

    function doSomething() {
      var x = getTheValue();
      x = x + 1;                   // -> sample A
      logTheValue(x);
    }
    
    function getTheValue() {
      return 5;
    }
    
    function logTheValue(x) {
     console.log(x);               // -> sample B, sample C
    }
    
    doSomething();

    Supposons que l'on fasse tourner ce programme avec le Profileur activé et que dans le laps de temps ou il tourne le Profileur prend trois échantillons, comme indiqué ci-dessous.

    Les échantillons proviennent tous de l'intérieur de doSomething(), mais les deux derniers viennent de l'intérieur de la fonction logTheValue() appelé par doSomething(). Le profil consisterait donc de trois traces de pile comme ceci :

    Exemple A: doSomething()
    Exemple B: doSomething() > logTheValue()
    Exemple C: doSomething() > logTheValue()

    Évidement, il n'y a alors pas assez de données pour révéler quoi que ce soit, mais avec beaucoup plus d'échantillons il est possible de conclure que logTheValue() est le point noir du code.

    Créer un profil

    Cliquez sur le bouton en forme de chronomètre du Profileur pour commencer à enregistrer des échantillons. Quand le Profileur enregistre, le bouton en forme de chronomètre sera en surbrillance. Cliquer de nouveau sur le bouton arrêtera l'enregistrement et sauvegardera le nouveau profil :

    Une fois que le Profileur est stoppé, le nouveau profil s'ouvrira automatiquement :

    Ce panneau est divisé en deux parties:

    • La partie de gauche liste tous les profils capturés et permet de les charger. Juste au-dessus il y a deux boutons : le bouton chronomètre qui permet d'enregistrer de nouveaux profils, et le bouton "Importer..." qui permet d'importer des profils. Quand le profil est sélectionné, il est possible de sauvegarder son contenu dans un fichier JSON en cliquant sur le bouton sauvegarder.
    • Le panneau de droite montre le profil actuellement chargé.

    Analyser un profil

    Le profil est divisé en deux parties :

    Frise chronologique du profil

    La frise chronologique du profil qui occupe la partie haute du profil affiché :

    L'axe horizontal est l'axe du temps, et le vertical celui de la taille de la pile d'appel de l'échantillon. La pile d'appel représente le nombre de fonctions actives au moment de l'échantillonnage.

    Les échantillons rouges dans le graphique indiquent que le navigateur ne répondait pas, et que l'utilisateur voyait une pause dans l'animation et le responsive. Si à profil à des échantillons rouges, vous devriez considérer de casser ce code en plusieurs évènements et penser à utiliser le requestAnimationFrame et les Workers.

    Il est possible d'examiner une portion spécifique en cliquant et ce en se déplaçant à l'intérieur de la frise chronologique :

    Un nouvel onglet apparait alors au-dessus de la frise chronologique appelé "Échantillon [AAA, BBB]". Cliquer sur cet onglet zoom sur la partie, et les détails en dessous concernent cette partie de la frise :


    Détails du profil

    Les détails du profil occupent la partie basse du profil affiché :

    Lorsque l'on ouvre un nouvel échantillon, son panneau contient une seule ligne nommée "(total)", comme indiqué dans la capture d'écran ci-dessus. Cliquer sur la flèche à côté de "(total)" affichera une liste de toutes les fonctions haut niveau qui apparaissent dans un échantillon.

    La colonne nommée "Temps brut" montre le nombre total d'échantillons dans lesquels cette fonction est apparue1, suivi par le pourcentage de tous les échantillons du profil dans lequel cette fonction est apparue. La première ligne ci-dessus montre qu'il y eu 2021 échantillons dans tout le profil et la seconde ligne montre que 1914 ou 94,7% des échantillons étaient dans la fonction detectImage(.

    La colonne nommée "Net" affiche le nombre d'échantillons dans lequel l'échantillon a été pris tout en exécutant cette fonction même, et non une fonction qu'il appelait. Dans exemple ci-dessus, doSomething()aurait un Temps brut de 3 (echantillons A, B, and C), mais une valeur net de 1 (échantillon A).

    La troisième colonne donne le nom de la fonction ainsi que le nom du fichier et le numéro de ligne (pour les fonctions locales) ou le nom de base et le nom de domaine (pour les fonctions externes). Les fonctions en gris sont des fonctions du navigateur, les fonctions en noir sont des fonctions qui représentent du code JavaScript chargé dans la page. Survoler une ligne avec sa souris, affichera une flèche à droite de l'identifiant de la fonction : cliquer sur cette flèche amène à la source de la fonction.

    Étendre l'arbre de la pile.

    Dans une ligne donnée, s’il y a eu des échantillons pris en étant dans une fonction appelée par cette fonction (ce qui est le cas si le Temps brut est plus important que le net) alors une flèche apparait sur la gauche du nom de la fonction, permettant d'étendre l'arbre de la pile.

    Dans l'example ci-dessus, l'arbre de la pile pleinement entendue ressemblerait à ceci :

    Running Time Self  
    3            100% 1 doSomething()
    2              67% 2 logTheValue()

    Un exemple plus réaliste : dans la capture d'écran ci-dessous, on peut voir qu'a la seconde ligne 1914 échantillons ont été pris dans  detectImage(). Mais tous ont été pris dans des fonctions appelées par detectImage() (le temps net zéro). Il est alors possible d'étendre l'arbre de la pile pour savoir quelles fonctions étaient réellement actives quand la plupart des échantillons ont été pris :

    Cela révèle que 6 échantillons ont été pris en exécutant detectAtScale(),12 en exécutant getRect() et ainsi de suite.

    Notes

    1. Si la fonction est appelée plusieurs fois depuis différentes sources, elle sera représentée plusieurs fois dans le Profileur. Ainsi les fonctions génériques comme forEach apparaitront plusieurs fois dans l'arbre de la pile.

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, maximelore
    Dernière mise à jour par : maximelore,