performance timeline
1.0.0
A especificação PerformAncetimeline define maneiras pelas quais os desenvolvedores da Web podem medir aspectos específicos de seus aplicativos da Web para torná -los mais rápidos. Ele apresenta duas maneiras principais de obter essas medidas: via métodos getter da interface de desempenho e através da interface PerformanceObserver. Este último é a maneira recomendada de reduzir o impacto do desempenho da consulta dessas medidas.
Um objeto de desempenho pode hospedar dados de desempenho de uma certa métrica. Um desempenho tem 4 atributos: name , entryType , startTime e duration . Esta especificação não define objetos concretos de desempenho de desempenho. Exemplos de especificações que definem novos tipos de concreto de objetos de desempenho são tempo de tinta, tempo do usuário, tempo de recursos e tempo de navegação.
A interface de desempenho é aumentada com três novos métodos que podem retornar uma lista de objetos de desempenho:
getEntries() : retorna todas as entradas disponíveis para o objeto de desempenho.getEntriesByType(type) : Retorna todas as entradas disponíveis para o objeto de desempenho cujo entryType corresponde ao tipo .getEntriesByName(name, type) : retorna todas as entradas disponíveis para o objeto de desempenho cujo name corresponde ao nome . Se o tipo de parâmetro opcional for especificado, ele retornará apenas entradas cujo entryType corresponde ao tipo . O exemplo a seguir mostra como getEntriesByName() pode ser usado para obter as primeiras informações 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 ;
} Um objeto PerformanceObserver pode notificar os novos objetos de desempenho, de acordo com o valor do entryType . O construtor do objeto deve receber um retorno de chamada, que será executado sempre que o agente do usuário estiver enviando novas entradas cujo valor entryType corresponda a um dos observados pelo observador. Esse retorno de chamada não é executado uma vez por performanceEntry nem imediatamente após a criação de um desempenho de desempenho. Em vez disso, as entradas são 'na fila' no PerformanceObserver, e o agente do usuário pode executar o retorno de chamada posteriormente. Quando o retorno de chamada é executado, todas as entradas na fila são transmitidas para a função e a fila para o performanceObserver é redefinida. O PerformanceObserver inicialmente não observa nada: o método observe() deve ser chamado para especificar que tipo de objetos de desempenho devem ser observados. O método observe() pode ser chamado com uma matriz 'EntryTypes' ou com uma única string 'tipo', conforme detalhado abaixo. Esses modos não podem ser misturados ou uma exceção será lançada.
O retorno de chamada passou para PerformanceObserver na construção é um PerformanceObserverCallback . É um retorno de chamada vazio com os seguintes parâmetros:
entries : um objeto de PerformanceObserverEntryList que contém a lista de entradas sendo despachadas no retorno de chamada.observer : o objeto PerformanceObserver que está recebendo as entradas acima.hasDroppedEntries : um boolean indicando se observer está atualmente observando um entryType para o qual pelo menos uma entrada foi perdida devido ao fato de o buffer correspondente estar cheio. Veja a seção de bandeira em buffer. supportedEntryTypes O estático PerformanceObserver.supportedEntryTypes retorna uma matriz dos valores entryType que o agente do usuário suporta, classificados em ordem alfabética. Pode ser usado para detectar suporte para tipos específicos.
observe(entryTypes) Nesse caso, o PerformanceObserver pode especificar vários valores de entryTypes com uma única chamada para observe() . No entanto, não são permitidos parâmetros adicionais neste caso. Múltiplas chamadas observe() substituirão os tipos de objetos que estão sendo observados. Exemplo de uma chamada: observer.observe({entryTypes: ['resource', 'navigation']}) .
observe(type) Nesse caso, o PerformanceObserver pode especificar apenas um único tipo por chamada para o método observe() . Parâmetros adicionais são permitidos neste caso. Várias chamadas observe() serão empilhadas, a menos que uma chamada para observador o mesmo type tenha sido feita no passado; nesse caso, será substituído. Exemplo de uma chamada: observer.observe({type: "mark"}) .
buffered Um parâmetro que pode ser usado com observe(type) é definido nesta especificação: o sinalizador buffered , que não é definido por padrão. Quando esse sinalizador é definido, o agente do usuário envia registros que ele buffer antes da criação do PerformanceObserver e, portanto, eles são recebidos no primeiro retorno de chamada após a chamada observe() . Isso permite que os desenvolvedores da Web registrem o PerformanceObServers quando é conveniente fazê -lo sem perder as entradas despachadas desde o início durante a carga da página. Exemplo de uma chamada usando este sinalizador: observer.observe({type: "measure", buffered: true}) .
Cada entryType possui características especiais em torno do buffer, descrito no registro. Em particular, observe que existem limites para o número de entradas de cada tipo que são tamponadas. Quando o buffer de um entryType fica cheio, nenhuma nova entradas é buffer. Um PerformanceObserver pode consultar se uma entrada foi descartada (não buffer) devido ao fato de o buffer estar cheio através do parâmetro hasDroppedEntry de seu retorno de chamada.
disconnect()Esse método pode ser chamado quando o PerformanceObserver não deve mais ser notificado de entradas.
takeRecords() Este método retorna uma lista de entradas que foram filmadas para o PerformanceObserver, mas para as quais o retorno de chamada ainda não foi executado. A fila de entradas também é esvaziada para o PerformanceObserver. Ele pode ser usado em conjunto com disconnect() para garantir que todas as entradas até um momento específico sejam processadas.
O exemplo a seguir registra todo o tempo do usuário, entradas de tempo de recurso usando um performanceObserver que observadores marcam e medem.
// 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 ) ;
} ) ;
}
