performance timeline
1.0.0
La spécification PerformanceTimeline définit les façons dont les développeurs Web peuvent mesurer des aspects spécifiques de leurs applications Web afin de les rendre plus rapides. Il introduit deux façons principales d'obtenir ces mesures: via des méthodes Getter à partir de l'interface de performance et via l'interface PerformanceObserver. Ce dernier est le moyen recommandé de réduire l'impact des performances de l'interrogation de ces mesures.
Un objet PerformanceEntry peut héberger des données de performances d'une certaine métrique. A PerformanceEntry a 4 attributs: name , entryType , startTime et duration . Cette spécification ne définit pas les objets de performance de béton. Des exemples de spécifications qui définissent les nouveaux types d'objets en béton de performance sont le synchronisation de la peinture, le synchronisation des utilisateurs, le calendrier des ressources et le calendrier de navigation.
L'interface de performance est augmentée avec trois nouvelles méthodes qui peuvent renvoyer une liste d'objets PerformanceEntry:
getEntries() : Renvoie toutes les entrées disponibles pour l'objet de performance.getEntriesByType(type) : Renvoie toutes les entrées disponibles pour l'objet Performance dont entryType correspond à Type .getEntriesByName(name, type) : renvoie toutes les entrées disponibles pour l'objet de performance dont name correspond au nom . Si le type de paramètre en option est spécifié, il ne renvoie que les entrées dont le type de type entryType correspond. L'exemple suivant montre comment getEntriesByName() pourrait être utilisé pour obtenir les premières informations de peinture:
// Returns the FirstContentfulPaint entry, or null if it does not exist.
function getFirstContentfulPaint ( ) {
// We want the entry whose name is "first-contentful-paint" and whose entryType is "paint".
// The getter methods all return arrays of entries.
const list = performance . getEntriesByName ( "first-contentful-paint" , "paint" ) ;
// If we found the entry, then our list should actually be of length 1,
// so return the first entry in the list.
if ( list . length > 0 )
return list [ 0 ] ;
// Otherwise, the entry is not there, so return null.
else
return null ;
} Un objet PerformanceObserver peut être informé de nouveaux objets PerformanceEntry, selon leur valeur entryType . Le constructeur de l'objet doit recevoir un rappel, qui sera exécuté chaque fois que l'agent utilisateur envoie de nouvelles entrées dont la valeur entryType correspond à l'un de ceux observés par l'observateur. Ce rappel n'est pas exécuté une fois par performance ni immédiatement après la création d'une performance. Au lieu de cela, les entrées sont «en file d'attente» sur PerformanceObserver, et l'agent utilisateur peut exécuter le rappel plus tard. Lorsque le rappel est exécuté, toutes les entrées en file d'attente sont transmises à la fonction et la file d'attente pour le PerformanceObserver est réinitialisée. Le PerformanceObserver n'observe rien: la méthode observe() doit être appelée pour spécifier quel type d'objets de performance est observé. La méthode observe() peut être appelée avec un tableau «EntryTypes» ou avec une seule chaîne «type», comme détaillé ci-dessous. Ces modes ne peuvent pas être mélangés ou une exception sera lancée.
Le rappel transmis à PerformanceObserver lors de la construction est une PerformanceObserverCallback . Il s'agit d'un rappel vide avec les paramètres suivants:
entries : un objet PerformanceObserverEntryList contenant la liste des entrées envoyées dans le rappel.observer : L'objet PerformanceObserver qui reçoit les entrées ci-dessus.hasDroppedEntries : Un boolean indiquant si observer observe actuellement un entryType pour lequel au moins une entrée a été perdue en raison du tampon correspondant. Voir la section du drapeau tamponné. supportedEntryTypes Le statique PerformanceObserver.supportedEntryTypes renvoie un tableau des valeurs entryType que l'agent utilisateur prend en charge, triés dans un ordre alphabétique. Il peut être utilisé pour détecter le support pour des types spécifiques.
observe(entryTypes) Dans ce cas, le PerformanceObserver peut spécifier diverses valeurs entryTypes avec un seul appel à observe() . Cependant, aucun paramètre supplémentaire n'est autorisé dans ce cas. Les appels observe() multiples remplaceront les types d'objets observés. Exemple d'un appel: observer.observe({entryTypes: ['resource', 'navigation']}) .
observe(type) Dans ce cas, le PerformanceObserver ne peut spécifier qu'un seul type par appel à la méthode observe() . Des paramètres supplémentaires sont autorisés dans ce cas. Les appels observe() multiples s'empileront, à moins qu'un appel à l'observateur du même type ait été effectué dans le passé, auquel cas il remplacera. Exemple d'un appel: observer.observe({type: "mark"}) .
buffered Un paramètre qui peut être utilisé avec observe(type) est défini dans cette spécification: l'indicateur buffered , qui est non défini par défaut. Lorsque ce drapeau est défini, l'agent utilisateur dépasse les enregistre qu'il a mis en mémoire tampon avant la création de PerformanceObserver, et donc ils sont reçus dans le premier rappel après que cet appel observe() se produit. Cela permet aux développeurs Web d'enregistrer des performances Oobservers lorsqu'il est pratique de le faire sans manquer les entrées envoyées tôt pendant le chargement de la page. Exemple d'un appel utilisant ce drapeau: observer.observe({type: "measure", buffered: true}) .
Chaque entryType a des caractéristiques spéciales autour de la mise en mémoire tampon, décrite dans le registre. En particulier, notez qu'il existe des limites au nombre d'entrées de chaque type tamponné. Lorsque le tampon d'un entryType devient plein, aucune nouvelle entrée n'est tamponnée. Une performanceObserver peut demander si une entrée a été abandonnée (non tamponnée) en raison du tampon complet via le paramètre hasDroppedEntry de son rappel.
disconnect()Cette méthode peut être appelée lorsque le PerformanceObserver ne doit plus être informé des entrées.
takeRecords() Cette méthode renvoie une liste des entrées qui ont été en file d'attente pour le PerformanceObserver, mais pour laquelle le rappel n'a pas encore été exécuté. La file d'attente des entrées est également vidé pour le PerformanceObserver. Il peut être utilisé en tandem avec disconnect() pour s'assurer que toutes les entrées jusqu'à un point spécifique sont traitées.
L'exemple suivant enregistre toutes les entrées de synchronisation de la synchronisation des utilisateurs en utilisant un serveur de performance qui observe les marques et les mesures.
// Helper to log a single entry.
function logEntry ( entry => {
const objDict = {
"entry type" : , entry . entryType ,
"name" : entry . name ,
"start time" : , entry . startTime ,
"duration" : entry . duration
} ;
console . log ( objDict ) ;
} ) ;
const userTimingObserver = new PerformanceObserver ( list => {
list . getEntries ( ) . forEach ( entry => {
logEntry ( entry ) ;
} ) ;
} ) ;
// Call to log all previous and future User Timing entries.
function logUserTiming ( ) {
if ( ! PerformanceObserver . supportedEntryTypes . includes ( "mark" ) ) {
console . log ( "Marks are not observable" ) ;
} else {
userTimingObserver . observe ( { type : "mark" , buffered : true } ) ;
}
if ( ! PerformanceObserver . supportedEntryTypes . includes ( "measure" ) ) {
console . log ( "Measures are not observable" ) ;
} else {
userTimingObserver . observe ( { type : "measure" , buffered : true } ) ;
}
}
// Call to stop logging entries.
function stopLoggingUserTiming ( ) {
userTimingObserver . disconnect ( ) ;
}
// Call to force logging queued entries immediately.
function flushLog ( ) {
userTimingObserver . takeRecords ( ) . forEach ( entry => {
logEntry ( entry ) ;
} ) ;
}
