Explorer l’API de performance Web sous-utilisée | de Christophe Hamerling | décembre 2022

Une API pour rendre l’analyse des performances Web beaucoup plus simple

Cet article fait partie d’une série d’articles traitant de la sous-utilisation API de performances Web.

Dans ce premier article, je vais vous présenter cette puissante API accessible à tous les développeurs Web sans rien d’autre à installer.

Dans les prochains articles, nous entrerons plus dans les détails, en essayant d’illustrer avec des exemples plus concrets et pourquoi pas aller plus loin dans la création de code et de composants réutilisables et prêts pour la production.

En tant que développeur frontend, vous avez probablement déjà fait cela pour obtenir le temps passé sur une partie de votre code :

const start = Date.now()
// do something...
const diff = Date.now() - start

Eh bien, cela fonctionne… mais c’est assez limité. Si vous voulez vraiment mesurer des « choses », vous devez probablement commencer à utiliser le performance API, qui peut refactoriser le code précédent pour :

const start = performance.now()
// do something
const diff = performance.now() - start

Ecrit comme ça, ça ne changera pas grand chose. C’est encore assez basique et n’ajoute pas de valeur à votre code.

La différence entre les deux approches est que Date.now() renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970 00:00:00 UTC tandis que performance.now() renvoie le nombre de millisecondes, avec les microsecondes en fraction depuis l’origine du temps (l’heure d’origine est une heure standard qui est considérée comme le début de la durée de vie du document en cours).

Il n’y a pas grand-chose à utiliser l’un ou l’autre dans le cas ci-dessus, mais lors du débogage, il est plus lisible d’obtenir des millisecondes pour l’origine de la page au lieu du nombre de millisecondes depuis le 1er janvier 1970. (Dites-moi si vous pouvez traiter facilement le dernier sans le convertir en quelque chose de plus lisible.)

La partie intéressante de l’API Web Performance ne concerne pas now(), mais toutes les choses que vous pouvez faire et créer à l’aide d’autres fonctionnalités. Allons un peu plus loin et jouons avec le measure()fonction. Cela nous permet de faire la même chose, c’est-à-dire de gérer les décalages horaires, mais avec une approche plus flexible qui ressemble à ceci :

performance.mark('foo')
// do something
const diff = performance.measure('my_measure', 'foo')

Bien sûr, vous l’avez compris ! Vous pouvez créer un PerformanceMesure en donnant le nom de marque que vous avez créé précédemment à l’aide performance.mark(markName)et vous pouvez donc simplement utiliser la mesure de performance n’importe où dans votre code sans avoir à passer le start variable vers le bas. La diff la variable contient maintenant une PerformanceMeasure objet avec beaucoup plus d’informations que le simple diff entre deux horodatages :

Vous pouvez également créer des mesures entre deux marques en donnant des noms de marque de début et de fin :

Cela semble assez simple à utiliser, et vous pouvez ensuite l’utiliser à plusieurs endroits dans votre code pour créer une première marque quelque part, une seconde ailleurs, puis mesurer entre les marques de vos choix en connaissant leurs noms. Il est assez facile de se lancer dans le vaste monde de la performance Web.

Mieux encore, vous pouvez désormais basculer entre les outils de développement de votre navigateur et inspecter ce qui se passe dans votre application. Chaque appel que vous passez à mark() et measure() sont disponibles dans le dossier de performance, comme indiqué ci-dessous :

Voici un bonus. Vous pouvez télécharger les journaux de performances sous forme de fichier et les ouvrir ultérieurement pour une analyse plus approfondie. Toutes les marques et mesures que vous avez créées sont également disponibles ici !

Allons encore plus loin avec la merveilleuse API Performance et jouons avec observateurs de la performance!

Pouvoir créer des mesures à partir de marques est agréable, comme décrit précédemment, mais c’est un peu statique. L’utilisation d’observateurs de performances vous permet d’effectuer des analyses de performances plus complexes, comme collecter tout ce que vous marquez ou mesurez en temps réel, le traiter et l’envoyer à un autre endroit (par exemple, un service pour collecter des données de surveillance, une autre partie de l’application , etc.)

L’API est simple à utiliser : créez un observateur avec un rappel qui sera appelé dès que les nouvelles données de performance que vous avez choisies seront disponibles. Commencez l’observateur en lui disant quoi observer. Voici le code :

try {
const po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Do anything you want with the performance entry you observe
// Here we deal with marks as it is what we tell to observe below.
console.log(entry.toJSON());
}
});
po.observe({ type: 'mark', buffered: false });
} catch (e) {
// Do nothing if the browser doesn't support this API.
}

Si le « temps réel » ne vous est pas utile, vous pouvez également interroger l’API Performance et récupérer des données simplement en utilisant getEntries ou getEntriesByType.

const marks = performance
.getEntriesByType("mark")
.forEach((entry) => console.log(entry))

Voici plusieurs notes :

1. Comme vous pouvez le voir, le nom de la marque de performance n’a pas besoin d’être unique, mais ce sera bien si vous utilisez une convention de dénomination liée à votre application. Cela vous aide à éviter les collisions avec n’importe quelle bibliothèque ou framework que vous utilisez (Imaginez que tout le monde utilise ‘start’ et ‘end’. Obtenir les entrées avec le code ci-dessus et faire des calculs à partir de la liste produira probablement des choses incohérentes).
2. Gardez à l’esprit que les marques et les mesures que vous créez resteront ici jusqu’à ce que vous rechargez la page, que le tampon d’entrée soit plein ou que vous demandiez un nettoyage à l’aide de clearMarks ou clearMeasures .