Si vous devez obtenir le temps d'exécution de la fonction sur votre machine de développement locale , vous pouvez utiliser les outils de profilage de votre navigateur ou des commandes de console telles que console.time()
et console.timeEnd()
.
Tous les navigateurs modernes ont des profileurs JavaScript intégrés. Ces profileurs devraient donner la mesure la plus précise car vous n'avez pas à modifier votre code existant, ce qui pourrait affecter le temps d'exécution de la fonction.
Pour profiler votre JavaScript:
- Dans Chrome , appuyez sur F12 et sélectionnez l' onglet Profils , puis Collecter le profil CPU JavaScript .
- Dans Firefox , installez / ouvrez Firebug et cliquez sur le bouton Profil .
- Dans IE 9+ , appuyez sur F12 , cliquez sur Script ou Profiler (selon votre version d'IE).
Alternativement, sur votre machine de développement , vous pouvez ajouter une instrumentation à votre code avec console.time()
et console.timeEnd()
. Ces fonctions, prises en charge dans Firefox11 +, Chrome2 + et IE11 +, rendent compte des minuteries via lesquelles vous démarrez / arrêtez console.time()
. time()
prend comme argument un nom de temporisateur défini par l'utilisateur, timeEnd()
puis rend compte du temps d'exécution depuis le démarrage du temporisateur:
function a() {
console.time("mytimer");
... do stuff ...
var dur = console.timeEnd("myTimer"); // NOTE: dur only works in FF
}
Notez que seul Firefox renvoie le temps écoulé dans l' timeEnd()
appel. Les autres navigateurs signalent simplement le résultat à la console développeur: la valeur de retour de timeEnd()
n'est pas définie.
Si vous souhaitez obtenir le temps d'exécution de la fonction dans la nature , vous devrez instrumenter votre code. Vous avez plusieurs options. Vous pouvez simplement enregistrer les heures de début et de fin en interrogeant new Date().getTime()
:
function a() {
var start = new Date().getTime();
... do stuff ...
var end = new Date().getTime();
var dur = end - start;
}
Cependant, l' Date
objet n'a qu'une résolution en millisecondes et sera affecté par les modifications d'horloge système de tout système d'exploitation. Dans les navigateurs modernes, il existe une meilleure option.
La meilleure option est d'utiliser le temps de haute résolution , alias window.performance.now()
. now()
est meilleur que le traditionnel Date.getTime()
de deux manières importantes:
now()
est un double avec une résolution submilliseconde qui représente le nombre de millisecondes depuis le début de la navigation de la page. Il renvoie le nombre de microsecondes dans le fractionnaire (par exemple, une valeur de 1000.123 est de 1 seconde et 123 microsecondes).
now()
augmente de façon monotone. Ceci est important car il Date.getTime()
peut éventuellement avancer ou même reculer lors des appels suivants. Notamment, si l'heure système du système d'exploitation est mise à jour (par exemple la synchronisation de l'horloge atomique), Date.getTime()
est également mise à jour. now()
est garanti d'être toujours en augmentation monotone, il n'est donc pas affecté par l'heure système du système d'exploitation - ce sera toujours l'heure de l'horloge murale (en supposant que votre horloge murale n'est pas atomique ...).
now()
peut être utilisé dans presque tous les endroits qui new Date().getTime()
, + new Date
ett Date.now()
sont. L'exception est que Date
et les now()
temps ne se mélangent pas, comme Date
se base sur unix-époque (le nombre de millisecondes depuis 1970), alors que now()
le nombre de millisecondes depuis votre page de navigation a commencé (il sera beaucoup plus petit que Date
).
Voici un exemple d'utilisation now()
:
function a() {
var start = window.performance.now();
... do stuff ...
var end = window.performance.now();
var dur = end - start;
}
now()
est pris en charge dans Chrome stable, Firefox 15+ et IE10. Il existe également plusieurs polyfills disponibles.
UserTiming est une autre option pour mesurer le temps d'exécution dans la nature . UserTiming se comporte de la même manière que console.time()
et console.timeEnd()
, mais il utilise le même horodatage haute résolution que celui now()
utilisé (vous obtenez donc une horloge augmentant de façon monotone de moins d'une milliseconde) et enregistre les horodatages et les durées dans PerformanceTimeline .
UserTiming a les concepts de marques (horodatages) et de mesures (durées). Vous pouvez en définir autant que vous le souhaitez, et ils sont exposés sur PerformanceTimeline .
Pour enregistrer un horodatage, vous appelez mark(startMarkName)
. Pour obtenir la durée depuis votre première note, il vous suffit d'appeler measure(measurename, startMarkname)
. La durée est ensuite enregistrée dans PerformanceTimeline à côté de vos repères.
function a() {
window.performance.mark("start");
... do stuff ...
window.performance.measure("myfunctionduration", "start");
}
// duration is window.performance.getEntriesByName("myfunctionduration", "measure")[0];
UserTiming est disponible dans IE10 + et Chrome25 +. Il existe également un polyfill disponible (que j'ai écrit).