Les applications Web progressives permettent aux développeurs de créer une nouvelle classe d'applications qui offrent des expériences utilisateur fiables et performantes. Toutefois, pour s'assurer qu'une application Web atteint ses objectifs de performances souhaités, les développeurs doivent avoir accès à des données de mesure des performances haute résolution. La spécification de chronologie des performances du W3C définit une telle interface pour que les navigateurs puissent fournir un accès programmatique aux données de chronométrage de bas 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 ;
- l'évaluation des performances intégrée aux IDE et à d'autres 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 le temps de navigation, le temps de la ressource et le temps de l'utilisateur. La dernière nouveauté est l'interface observateur de performances, qui est essentiellement une interface de streaming permettant de collecter des informations de synchronisation de bas niveau de manière asynchrone, comme le fait le navigateur. Cette nouvelle interface présente un certain nombre d'avantages essentiels par rapport aux méthodes précédentes d'accès à la chronologie:
- Aujourd'hui, les applications doivent interroger et comparer régulièrement 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.
- Il n'est pas soumis aux limites de tampon (la plupart des tampons sont définis sur 150 éléments par défaut) et évite les conditions de course entre différents consommateurs qui peuvent vouloir modifier le tampon.
- Les notifications de l'observateur de performances sont envoyées de manière asynchrone, et le navigateur peut les distribuer pendant les périodes d'inactivité pour éviter de concurrencer le travail de rendu critique.
À partir de Chrome 52, l'interface de l'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 une balise de script qui définit du code JavaScript:
- Nous instancions un nouvel objet
PerformanceObserveret transmettons une fonction de gestionnaire d'événements au constructeur de l'objet. 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 formatées 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 transmises à un outil de visualisation interactif. - Nous nous inscrivons aux types d'événements de synchronisation qui nous intéressent via la méthode
observe()et appelons la méthodemark()pour marquer l'instant auquel nous nous sommes inscrits, que nous considérerons comme le début de nos intervalles de synchronisation. - 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 de synchronisation du moment où le bouton a été cliqué.
Dans le corps de la page, nous définissons un bouton, attribuons notre gestionnaire de clics à l'événement onclick, et nous sommes prêts à partir.
Maintenant, si nous chargeons la page et ouvrons le panneau des outils pour les développeurs Chrome pour afficher la console JavaScript, une mesure des performances est effectuée chaque fois que nous cliquons sur le bouton. Et comme nous nous sommes enregistrés pour observer ces mesures, elles sont transmises à notre gestionnaire d'événements de manière asynchrone, sans avoir à interroger la chronologie, qui affiche les mesures dans la console au fur et à mesure qu'elles se produisent:
La valeur start représente le code temporel de début des événements de type mark (dont cette application n'en a qu'un seul). Les événements de type measure n'ont pas de temps de début intrinsèque. Ils représentent des mesures de temps prises par rapport au dernier événement mark. Par conséquent, les valeurs de durée affichées ici représentent le temps écoulé entre l'appel de mark(), qui sert de point de départ d'intervalle commun, et plusieurs appels ultérieurs à measure().
Comme vous pouvez le constater, cette API est assez simple et permet de collecter des données de performances filtrées, 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.