Observateur de performances : accès efficace aux données sur les performances

Marc Cohen

Les applications Web progressives permettent aux développeurs de créer une nouvelle catégorie d'applications offrant des expériences utilisateur fiables et hautes performances. Toutefois, pour s'assurer qu'une application Web atteint les objectifs de performances souhaités, les développeurs doivent accéder à des données de mesure des performances en haute résolution. La spécification W3C Performance Timeline définit une telle interface permettant aux navigateurs de fournir un accès programmatique aux données de faible niveau. Cela ouvre la voie à des cas d'utilisation intéressants:

  • analyse des performances hors connexion et personnalisée
  • des outils tiers d’analyse et de visualisation des performances
  • évaluation des performances intégrée aux IDE et outils pour les développeurs

L'accès à ce type de données temporelles est déjà disponible dans la plupart des principaux navigateurs pour la durée de navigation, la durée de navigation des ressources et le temps utilisateur. Le tout dernier ajout est l'interface d'observateur de performances, qui est essentiellement une interface de streaming permettant de collecter de manière asynchrone des informations de faible niveau lorsqu'elles sont collectées par le navigateur. Cette nouvelle interface offre un certain nombre d'avantages critiques par rapport aux méthodes précédentes pour accéder à la chronologie:

  • Aujourd'hui, les applications doivent interroger et différencier périodiquement les mesures stockées, ce qui est coûteux. Cette interface leur propose un rappel. (En d'autres termes, il n'est pas nécessaire d'interroger.) Par conséquent, les applications qui utilisent cette API peuvent être plus réactives et plus efficaces.
  • Elle n'est pas soumise aux limites de tampon (la plupart des tampons sont définis sur 150 éléments par défaut) et évite les conditions de concurrence entre différents consommateurs susceptibles de vouloir le modifier.
  • Les notifications de l'observateur de performances sont envoyées de manière asynchrone et le navigateur peut les envoyer pendant les périodes d'inactivité pour éviter de concurrencer les tâches de rendu critiques.

À partir de Chrome 52, l'interface d'observateur de performances est activée par défaut. Voyons comment l'utiliser.

<html>
<head>
    <script>
    var observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
        // Display each reported measurement on console
        if (console) {
            console.log("Name: "       + entry.name      +
                        ", Type: "     + entry.entryType +
                        ", Start: "    + entry.startTime +
                        ", Duration: " + entry.duration  + "\n");
        }
        })
    });
    observer.observe({entryTypes: ['resource', 'mark', 'measure']});
    performance.mark('registered-observer');

    function clicked(elem) {
        performance.measure('button clicked');
    }
    </script>
</head>
<body>
    <button onclick="clicked(this)">Measure</button>
</body>
</html>

Cette page simple commence par un tag de script définissant du code JavaScript:

  • Nous instancions un nouvel objet PerformanceObserver et transmettons une fonction de gestionnaire d'événements au constructeur d'objets. Le constructeur initialise l'objet de sorte que notre gestionnaire soit appelé chaque fois qu'un nouvel ensemble de données de mesure est prêt à être traité (les données de mesure étant transmises sous forme de liste d'objets). Le gestionnaire est défini ici comme une fonction anonyme qui affiche simplement les données de mesure mises en forme dans la console. Dans un scénario réel, ces données peuvent être stockées dans le cloud pour une analyse ultérieure ou redirigées vers un outil de visualisation interactif.
  • Nous enregistrons les types d'événements de durée qui nous intéressent via la méthode observe() et appelons la méthode mark() pour marquer l'instant auquel nous nous sommes inscrits. Nous prenons en compte le début de nos intervalles de temps.
  • Nous définissons un gestionnaire de clics pour un bouton défini dans le corps de la page. Ce gestionnaire de clics appelle la méthode measure() pour capturer les données temporelles relatives au moment où l'utilisateur a cliqué sur le bouton.

Dans le corps de la page, nous définissons un bouton, attribuons notre gestionnaire de clics à l'événement onclick. C'est parti !

À présent, si nous chargeons la page et que nous ouvrons le panneau "Outils pour les développeurs Chrome" afin de surveiller la console JavaScript, chaque fois que nous cliquons sur le bouton, une mesure des performances est effectuée. Comme nous avons autorisé l'observation de ces mesures, celles-ci sont transmises à notre gestionnaire d'événements de manière asynchrone, sans qu'il soit nécessaire d'interroger la chronologie, qui affiche les mesures dans la console au fur et à mesure qu'elles se produisent:

Observateur de performances.

La valeur start représente l'horodatage de début pour les événements de type mark (dont cette application n'en possède qu'un). Les événements de type measure n'ont pas d'heure de début inhérente. Ils représentent des mesures temporelles effectuées par rapport au dernier événement mark. Ainsi, les valeurs de durée affichées ici représentent le temps écoulé entre l'appel à mark(), qui sert de point de départ d'intervalle commun, et les multiples appels ultérieurs de measure().

Comme vous pouvez le voir, cette API est assez simple et permet de collecter des données sur les performances filtrées, en haute résolution et en temps réel sans interrogation, ce qui devrait ouvrir la voie à des outils de performances plus efficaces pour les applications Web.