performance timeline
1.0.0
La especificación de performitimine define las formas en que los desarrolladores web pueden medir aspectos específicos de sus aplicaciones web para hacerlas más rápido. Introduce dos formas principales de obtener estas mediciones: a través de los métodos de Getter desde la interfaz de rendimiento y a través de la interfaz PerformanceObServer. Esta última es la forma recomendada de reducir el impacto del rendimiento de la consulta de estas mediciones.
Un objeto RendencyEntry puede alojar datos de rendimiento de una determinada métrica. Un rendimiento tiene 4 atributos: name , entryType , startTime y duration . Esta especificación no define los objetos de Increto RendencyEntry. Ejemplos de especificaciones que definen nuevos tipos concretos de objetos de rendimiento de rendimiento son el tiempo de pintura, el tiempo del usuario, el tiempo de recursos y el tiempo de navegación.
La interfaz de rendimiento se aumenta con tres nuevos métodos que pueden devolver una lista de objetos de rendimiento:
getEntries() : devuelve todas las entradas disponibles para el objeto de rendimiento.getEntriesByType(type) : devuelve todas las entradas disponibles para el objeto de rendimiento cuyo tipo de coincidencia entryType .getEntriesByName(name, type) : devuelve todas las entradas disponibles al objeto de rendimiento cuyo name coincide con el nombre . Si se especifica el tipo de parámetro opcional, solo devuelve entradas cuyo tipo de coincidencia entryType . El siguiente ejemplo muestra cómo getEntriesByName() podría usarse para obtener la primera información de pintura:
// 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 objeto PerformanceObServer puede notificarse de nuevos objetos de rendimiento de rendimiento, de acuerdo con su valor entryType . El constructor del objeto debe recibir una devolución de llamada, que se ejecutará cada vez que el agente de usuario envíe nuevas entradas cuyo valor entryType coincida con uno de los que observa el observador. Esta devolución de llamada no se ejecuta una vez por rendimiento de rendimiento ni inmediatamente después de la creación de un entorno de rendimiento. En cambio, las entradas están 'en cola' en el rendimiento de la rentabilidad, y el agente de usuarios puede ejecutar la devolución de llamada más tarde. Cuando se ejecuta la devolución de llamada, todas las entradas en cola se pasan a la función y se restablece la cola para el servidor de rendimiento. Inicialmente, el servidor de performance no observa nada: el método observe() debe llamarse para especificar qué tipo de objetos de Información de Informe se deben observar. El método observe() se puede llamar con una matriz de 'EntryTypes' o con una sola cadena 'tipo', como se detalla a continuación. Esos modos no se pueden mezclar, o se lanzará una excepción.
La devolución de llamada pasada a PerformanceObserver tras la construcción es un PerformanceObserverCallback . Es una devolución de llamada nula con los siguientes parámetros:
entries : un objeto PerformanceObserverEntryList que contiene la lista de entradas que se envían en la devolución de llamada.observer : el objeto PerformanceObserver que recibe las entradas anteriores.hasDroppedEntries : un boolean que indica si observer está observando actualmente un entryType para el cual se ha perdido al menos una entrada debido a que el búfer correspondiente está lleno. Consulte la sección de la bandera amortiguada. supportedEntryTypes El PerformanceObserver.supportedEntryTypes estáticoBServer. SupportedEntryTypes devuelve una matriz de los valores de entryType que el agente de usuario admite, ordenado en orden alfabético. Se puede utilizar para detectar soporte para tipos específicos.
observe(entryTypes) En este caso, el performanceObServer puede especificar varios valores entryTypes con una sola llamada para observe() . Sin embargo, no se permiten parámetros adicionales en este caso. Múltiples llamadas observe() anularán los tipos de objetos que se observan. Ejemplo de una llamada: observer.observe({entryTypes: ['resource', 'navigation']}) .
observe(type) En este caso, el servidor de rendimiento solo puede especificar un solo tipo por llamada al método observe() . Se permiten parámetros adicionales en este caso. Múltiples llamadas observe() se acumularán, a menos que se haya realizado una llamada al observador del mismo type en el pasado, en cuyo caso anulará. Ejemplo de una llamada: observer.observe({type: "mark"}) .
buffered Un parámetro que se puede usar con observe(type) se define en esta especificación: el indicador buffered , que no es establecido de forma predeterminada. Cuando se establece esta bandera, el agente de usuarios envía registros que ha amortiguado antes de la creación de The ExtendingObServer y, por lo tanto, se reciben en la primera devolución de llamada después de que se produce esta llamada observe() . Esto permite a los desarrolladores web registrar el rendimiento de los usuarios de rendimiento cuando es conveniente hacerlo sin perder las entradas enviadas al principio durante la carga de la página. Ejemplo de una llamada usando esta bandera: observer.observe({type: "measure", buffered: true}) .
Cada entryType tiene características especiales sobre el almacenamiento en búfer, descrito en el registro. En particular, tenga en cuenta que hay límites para los números de entradas de cada tipo que se amortiguan. Cuando el búfer de un entryType se llena, no se amortiguan nuevas entradas. Un rendimiento de rendimiento puede consultar si se eliminó una entrada (no se amortiguó) debido a que el búfer está lleno a través del parámetro hasDroppedEntry de su devolución de llamada.
disconnect()Este método se puede llamar cuando el servidor de rendimiento ya no debe ser notificado de las entradas.
takeRecords() Este método devuelve una lista de entradas que se han colocado en cola para el rendimiento de la propiedad, pero para la cual la devolución de llamada aún no se ha ejecutado. La cola de las entradas también se vacía para el rendimiento de los servidores. Se puede usar en conjunto con disconnect() para garantizar que se procesen todas las entradas hasta un punto específico en el tiempo.
El siguiente ejemplo registra todas las entradas de sincronización de recursos utilizando un servidor de rendimiento que los observadores marcan y miden.
// 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 ) ;
} ) ;
}
