Performance Timing dans Chrome DevTools

Dans cet article, nous montrons comment utiliser console.time et performance.mark pour surveiller les temps et les processus dans Chrome DevTools, ainsi que la comparaison des deux fonctionnalités.

Lorsque vous utilisez la console, il est très utile pour surveiller et prendre des mesures pour nos processus. Il existe plusieurs façons de prendre ces mesures. Cependant, dans cet article, nous verrons comment console.time et performance.mark comparent.

Console.time

Console.time est utilisé pour démarrer une minuterie afin de suivre la durée d’une opération particulière. Lors de la planification du minuteur, nous attribuons à celui-ci un nom unique d'identification, car plusieurs minuteries peuvent être exécutées simultanément sur la même page. Nous pouvons mettre fin à l'opération de synchronisation en appelant console.timeEnd () et en transmettant le nom unique du temporisateur. Cela arrêtera le chronomètre et affichera le temps, en millisecondes, écoulé depuis le démarrage du chronomètre.

Syntaxe
La syntaxe est relativement compréhensible et facile à utiliser. Vous commencez avec la méthode console.time () pour indiquer que vous essayez de démarrer une minuterie pour une opération particulière. Il faut un seul paramètre label qui spécifie l'opération à chronométrer.

 console .  heure  ( label )  ; 

Paramètre
Console.log utilise un seul paramètre label qui sert simplement de nom pour décrire l’opération à chronométrer. Nous transmettons également l'étiquette lorsque nous appelons console.timeEnd () pour spécifier le temporisateur auquel nous terminons, puis nous imprimons la valeur du temporisateur sur la console.

 console .  heure  ( "firstTest" ) 

Usage
Supposons, par exemple, que nous souhaitons mesurer la durée d'un processus d'itération particulier dans notre application. Nous définirons une minuterie qui démarrera au moment où cette fonction sera appelée et s'exécutera jusqu'à la fin du processus d'itération. Ce scénario que nous avons créé peut être illustré comme suit:

 console .  époque  ( "itérationTime" ) ; 
 pour   ( i  =   0 ;  i  <  10 ;  i  ++ )   {
     ] // du code 
} 
console .  timeEnd  ( "iterationTime" ) ; 

Ici, nous avons lancé la minuterie iterationTime juste avant le processus d'itération. Ensuite, nous avons défini l'itération et terminé le chronomètre. Voyons maintenant comment cela fonctionne dans la console:

Ici, le temps nécessaire pour exécuter le processus d’itération est de à 0.01416015625ms . Pour être certain que notre minuterie fonctionne efficacement et que nous obtenons les bonnes valeurs, ajoutons un peu de code au processus d’itération et voyons si le processus prend plus de temps à s’exécuter ou non. Nous actualiserons notre itération comme suit:

  function   Itération  ()  {
        console .  heure  ( "iterationTime" ) ; 
         pour   ( i  =   0  ;  i  <  10 ;  i  ++ )   {
           // du code 
          console .  log  ( i  =  i  +  2 ) 
        } 
         retour  console .  timeEnd  ( "iterationTime" ) ; 
    } 
    console .  log  ( Itération  ()  ; 

De par sa conception, cela devrait prendre beaucoup plus de temps que le processus précédent. Parce que nous effectuons plus de tâches ici, cela devrait prendre plus de temps. Voyons si le minuteur prend en charge notre affirmation sur la console:

Comme nous nous y attendions, le processus s'est terminé à 1.14990234375ms par rapport à la précédente itération de 0.01416015625ms .

Enfin, voyons comment le minuteur fonctionne dans un processus d'addition. Supposons, par exemple, que nous voulions passer deux nombres à une fonction et renvoyer leur somme, le minuteur devrait nous dire exactement combien de temps le processus prendra.

 console .  heure  ( "additionTime" ) 
     fonction   Ajouter  ( a  b  )  {
       retournez  a  +  b
    } 
    console .  log  ( Ajouter  ( 2  3 ) ) ; 
    console .  timeEnd  ( "additionTime" ) 

Maintenant, lorsque nous essayons ceci dans la console, nous devrions obtenir le additionTime imprimé avec le code correct values:

C'est l'une des nombreuses façons dont nous pouvons utiliser la console pour contrôler des moments spécifiques dans notre base de code afin de déterminer les performances et les exigences temporelles de certains éléments de code. 19659112] Performance.mark

Performance.mark, tout comme console.time, est utilisé pour créer un horodatage pour un processus particulier dans la chronologie des performances. Pour ce faire, il crée un horodatage pour chaque moment significatif du début à la fin du processus.

Syntaxe
La syntaxe n'est pas très différente de celle de console.time. Vous commencez par la méthode performance.mark () pour indiquer que vous essayez de créer une nouvelle marque pour l'opération. Il faut un seul paramètre nom qui est un DOMString représentant le nom de la marque.

 exécution .  marque  ( nom ) [19659011]; 

Arguments
Performance.mark utilise un seul argument nom qui sert simplement à décrire la nouvelle marque. Le même argument est transmis à la marque pour qu’il finisse avec la marque:

 représentation .  marque  ( "firstTest" ) ; 

Usage
Reproduisons les exemples d'utilisation que nous avons appliqués dans la méthode console.time afin de déterminer correctement leur fonctionnement. Utilisons maintenant performance.mark () pour mesurer la durée de notre processus d'itération précédent comme ceci:

  function   Itération  ( )  {19659011]  
       pour   ( i  =   0 ;  i  <  10 ;  i  ++ [19659011])   {
         // du code 
        console .  log  ( i  =  i  +  2 ) 
      } 
    } 
    représentation .  marque  ( 'Iteration Start' ) 
     Itération  () 
    représentation .  marque  ( 'Iteration End' ) 
    performance .  mesure  (
         "Itération" 
         "Début de itération" 
         "Itération fin" 
    ) 
     var  values ​​ =  performances .  getEntriesByName  ( "Itération" ) ; 
     var  de mesure  =  mesures  [ 0 ] ; 
    console .  log  ( "temps intermédiaire"  mesure .  durée  +  "ms" ) [ms] 19659043] Maintenant, lorsque nous essayons ceci dans la console, nous devrions obtenir le  iterationTime  imprimé sur la console comme suit: 

  
 Aussi, si nous voulions ajouter deux nombres et renvoyer une valeur Comme nous l'avons fait avec la méthode console.time, nous pouvons simplement mettre à jour notre dernier exemple comme suit: 
  function   Ajouter  ( a  b  )  { 
      retournez  a  +  b
    } 
    console .  log  ( Ajouter  ( 2  3 ) ) 
    représentation .  marque  ( "Ajouter début" ) 
     Ajouter  ( 2  3 ) 
    représentation .  marque  ( 'Add End' ) 
    performance .  mesure  (
         'Ajouter' 
         'Ajouter le début' 
         'Ajouter la fin' 
    ) 
       var  values ​​ =  performances .  getEntriesByName  ( "Ajouter" ) ; 
       var  mesure  =  mesures  [ 0 ] ; 
      console .  log  ( "additionTime"  mesure .  durée  +  "ms" ) [ms19659043] L'exécuter dans la console nous donnera maintenant une durée différente puisqu'il faudra un temps relativement long pour ajouter et renvoyer la valeur: 

  
 Conclusion 
 Dans cet article, nous avons examiné la syntaxe et la description de console.time et de performance.mark pour vous donner une meilleure compréhension de ce qu’elles sont et de la façon de les utiliser. Nous avons également démontré que quelques cas d'utilisation vous permettraient de mieux comprendre les cas d'utilisation. Il y a beaucoup plus à connaître à leur sujet que ce qui est décrit dans cet article, alors n'hésitez pas à en apprendre plus par vous-même et n'hésitez pas à nous contacter chaque fois que vous avez besoin d'aide. 
 Pour plus d'informations sur la création d'un excellent Web Applications: 
Vous voulez en savoir plus sur la création d'excellentes interfaces utilisateur? Découvrez  Kendo UI  - notre bibliothèque de composants d'interface utilisateur complète, qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux programmateurs et cadrans.