Utilisation de l'API Performance

Une exigence fondamentale de la performance web est une définition précise et cohérente du temps. Le type DOMHighResTimeStamp (un double) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps. En outre, il doit y avoir un moyen de créer une empreinte temporelle pour un point spécifique dans le temps ; ceci est fait avec la méthode now().

Les interfaces de performance web sont définies dans un ensemble de normes. L'interface de base de ces normes est l'interface Performance et ses méthodes et propriétés sont étendues par différentes normes. Ce guide décrit comment utiliser les interfaces Performance qui sont définies dans la norme High-Resolution Time. D'autres guides sur les performances web (répertoriés dans la section Voir aussi) décrivent comment utiliser des méthodes et propriétés supplémentaires de l'interface Performance.

Chronométrage de haute précision

Le chronométrage de haute précision est obtenu en utilisant le type DOMHighResTimeStamp pour les valeurs de temps. L'unité est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison de contraintes matérielles ou logicielles, par exemple), il peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.

L'exemple de code suivant montre l'utilisation de DOMHighResTimeStamp et de la méthode Performance.now(). La méthode now() renvoie un timestamp (de type DOMHighResTimeStamp) qui est un point discret dans le temps. En appelant cette méthode avant et après une tâche, il est possible de mesurer le temps nécessaire à l'exécution de la tâche.

function calculate_time() {
  let startTime;
  let endTime;

  startTime = performance.now();
  do_task();
  endTime = performance.now();

  return (endTime - startTime);
}

Sérialisation de l'objet Performance

La sérialisation JSON de l'objet Performance est effectuée via la méthode toJSON(). Dans l'exemple suivant, la sérialisation JSON des objets Performance, Performance.timing Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. et Performance.navigation Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. est imprimée dans l'élément object.

function print_json() {
  let json;
  let o = document.getElementsByTagName("output")[0];

  if (window.performance.toJSON === undefined) {
    json = "window.performance.toJSON() n'est PAS pris en charge";
    o.innerHTML += json + "<br>";
  } else {
    let s;
    json = window.performance.toJSON();

    // Imprimer l'objet de performance
    s = JSON.stringify(json);
    o.innerHTML = "<p>performance = " + s + "</p>";

    // Imprimer les objets performance.timing et performance.navigation
    let perf = JSON.parse(s);

    let timing = perf.timing;
    o.innerHTML += "<p>peformance.timing = " + JSON.stringify(timing) + "</p>";

    let navigation = perf.navigation;
    o.innerHTML += "<p>peformance.navigation = " + JSON.stringify(navigation) + "</p>";
  }
}

Spécifications

Les interfaces décrites dans ce document sont définies dans la norme High Resolution Time qui comporte deux niveaux :

Spécification Statut Commentaire
High Resolution Time Level 2 Recommendation Ajout de l'attribut performance sur Window et WorkerGlobalScope.
High Resolution Time Recommendation Définition initiale.

Interopérabilité

Comme le montre le tableau des Compatibilités des navigateurs de l'interface Performance, la plupart des interfaces Performance sont largement implémentées par les navigateurs de bureau.

Voir aussi