Utilisation de Performance Timeline

La norme Performance Timeline définit des extensions de l'interface Performance pour prendre en charge les mesures de latence côté client au sein des applications.

La norme comprend également des interfaces qui permettent à une application d'être notifiée lorsque des événements de performance spécifiques se produisent. Ensemble, ces interfaces peuvent être utilisées pour aider à identifier les goulots d'étranglement des performances d'une application.

Extensions de Performance

Performance Timeline étend l'objet Performance avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'enregistrements des performances (métriques), selon les critères de filtrage spécifiés. L'exemple suivant montre l'utilisation de ces méthodes getEntries(), getEntriesByName() et getEntriesByType().

function log(s) {
  let o = document.getElementsByTagName("output")[0];
  o.innerHTML += s + " <br>";
}
function do_work(n) {
  for (let i=0 ; i < n; i++) {
      let m = Math.random();
  }
}
function print_perf_entry(pe) {
  log("..name: " + pe.name +
      "; entryType: " + pe.entryType +
      "; startTime: " + pe.startTime +
      "; duration: " + pe.duration);
}
function print_PerformanceEntries() {
  if (performance.mark === undefined) {
    log("... performance.mark Not supported");
    return;
  }

  // Crée quelques entrées de performance via les méthodes mark() et measure()
  performance.mark("Begin");
  do_work(50000);
  performance.mark("End");
  do_work(50000);
  performance.measure("Measure1", "Begin", "End");

  // Utilise getEntries() pour itérer toutes les entrées.
  let p = performance.getEntries();
  for (let i=0; i < p.length; i++) {
    log("Toutes les entrées [" + i + "]");
    print_perf_entry(p[i]);
  }

  // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques.
  p = performance.getEntries({name : "Measure1", entryType:   "measure"});
  for (let i=0; i < p.length; i++) {
    log("Begin et Measure [" + i + "]");
    print_perf_entry(p[i]);
  }

  // Utilisez getEntriesByType() pour obtenir toutes les entrées "mark".
  p = performance.getEntriesByType("mark");
  for (let i=0; i < p.length; i++) {
    log ("Mark seulement [" + i + "]");
    print_perf_entry(p[i]);
  }

  // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
  p = performance.getEntriesByName("Begin", "mark");
  for (let i=0; i < p.length; i++) {
    log ("Begin et Mark [" + i + "]");
    print_perf_entry(p[i]);
  }
}

L'interface PerformanceEntry

L'interface PerformanceEntry encapsule une seule entrée de performance, c'est-à-dire une seule métrique de performance. Cette interface possède quatre propriétés et un sérialiseur JSON : (toJSON(). L'exemple suivant montre l'utilisation de ces propriétés.

function print_PerformanceEntry(ev) {
  let properties = ["name", "entryType", "startTime", "duration"];

  // Crée quelques entrées de performance
  performance.mark("Start");
  do_work(50000);
  performance.mark("Stop");
  performance.measure("measure-1");

  let p = performance.getEntries();
  for (let i=0; i < p.length; i++) {
    log("PerfEntry[" + i + "]");
    for (let =0; j < properties.length; j++) {
      // check each property in window.performance
      let supported = properties[j] in p[i];
      if (supported) {
        let pe = p[i];
        log("... " + properties[j] + " = " + pe[properties[j]]);
      } else {
        log("... " + properties[j] + " = N'est pas pris en charge");
      }
    }
  }
}

Cette interface comprend également une méthode toJSON() qui renvoie la sérialisation de l'objet PerformanceEntry. Les exemples suivants montrent l'utilisation de cette méthode.

function PerfEntry_toJSON() {

  // Crée quelques entrées de performance
  performance.mark("mark-1");
  performance.mark("mark-2");
  performance.measure("meas-1", "mark-1", "mark-2");

  let peList = performance.getEntries();
  let pe = peList[0];

  if (pe.toJSON === undefined) {
    log("PerformanceEntry.toJSON() n'est PAS pris en charge");
    return;
  }

  // Imprime l'objet PerformanceEntry
  let json = pe.toJSON();
  let s = JSON.stringify(json);
  log("PerformanceEntry.toJSON = " + s);
}

Observateurs de performance

Experimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Les interfaces Performance Observer permettent à une application d'enregistrer un observateur pour des types d'événements de performance spécifiques, et lorsqu'un de ces types d'événements est enregistré, l'application est notifiée de l'événement via la fonction de rappel de l'observateur qui a été spécifiée au moment, où l'observateur a été créé. Lorsque l'observateur (rappel ou « callback ») est invoqué, les paramètres du rappel incluent une liste d'entrées de l'observateur de performance qui contient uniquement des entrées de performance observées. C'est-à-dire que la liste ne contient que des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode observe() de l'observateur a été invoquée.

L'exemple suivant montre comment enregistrer deux observateurs : le premier s'enregistre pour plusieurs types d'événements et le second ne s'enregistre que pour un seul type d'événement.

function PerformanceObservers() {
  // Crée un observateur pour tous les types d'événements de performance
  let observe_all = new PerformanceObserver(function(list, obs) {
    let perfEntries;

    // Imprime toutes les entrées
    perfEntries = list.getEntries();
    for (let i=0; i < perfEntries.length; i++) {
      print_perf_entry(perfEntries[i]);
    }

    // Imprime les entrées nommées "Begin" avec le type "mark".
    perfEntries = list.getEntriesByName("Begin", "mark");
    for (let i=0; i < perfEntries.length; i++) {
      print_perf_entry(perfEntries[i]);
    }

    // Imprime les entrées avec le type "mark".
    perfEntries = list.getEntriesByType("mark");
    for (let i=0; i < perfEntries.length; i++) {
      print_perf_entry(perfEntries[i]);
    }
  });
  // inscrit tous les types d'événements liés aux performances
  observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});

  // Crée un observateur pour le seul type d'événement "mark".
  let observe_mark = new PerformanceObserver(function(list, obs) {
    let perfEntries = list.getEntries();
    // Ne devrait avoir que des entrées de type "mark".
    for (let i=0; i < perfEntries.length; i++) {
      print_perf_entry(perfEntries[i]);
    }
  });
  // inscrit uniquement l'événement "mark".
  observe_mark.observe({entryTypes: ['mark']});
}
function print_perf_entry(pe) {
  log("name: " + pe.name +
      "; entryType: " + pe.entryType +
      "; startTime: " + pe.startTime +
      "; duration: " + pe.duration);
}

L'interface liste des entrées de l'observateur de performance possède les trois mêmes méthodes getEntries*() que l'interface Performance et ces méthodes sont utilisées pour récupérer les entrées de performance observées dans le rappel de l'observateur. Ces méthodes ont été utilisées dans l'exemple cité ci-dessus.

Spécifications

{{Specifications}}

Voir aussi