getPerformance

Recolhe as métricas de desempenho da página: resolução de DNS, conexão TCP, carregamento de recursos e demais indicadores.

API

getPerformance

Retorna

Argumento	Descrição	Tipo
`BasicType \| undefined`	O objeto com as métricas de desempenho	`BasicType \| undefined`

BasicType

Propriedade	Descrição	Tipo
`dnsSearch`	Tempo de resolução de DNS (ms)	`number`
`tcpConnect`	Tempo de conexão TCP (ms)	`number`
`sslConnect`	Tempo da conexão segura SSL (ms)	`number`
`request`	TTFB: tempo da requisição de rede (ms)	`number`
`response`	Tempo de transferência dos dados (ms)	`number`
`parseDomTree`	Tempo de análise do DOM (ms)	`number`
`resource`	Tempo de carregamento dos recursos (ms)	`number`
`domReady`	Tempo até o DOM Ready (ms)	`number`
`httpHead`	Tamanho dos cabeçalhos HTTP (bytes)	`number`
`interactive`	Tempo até dar para interagir (ms)	`number`
`complete`	Tempo até a página carregar por inteiro (ms)	`number`
`redirect`	Número de redirecionamentos	`number`
`redirectTime`	Tempo dos redirecionamentos (ms)	`number`
`duration`	Tempo total das requisições de recursos (ms)	`number`
`fp`	Tempo até a primeira pintura (tela branca, ms)	`number \| undefined`
`fcp`	Tempo até a primeira pintura com conteúdo (fim da primeira tela, ms)	`number \| undefined`

Parâmetros

Sem parâmetros

Exemplo

Uso básico

import { getPerformance } from 'ranuts';

const perf = getPerformance();
if (perf) {
  console.log('Resolução de DNS:', perf.dnsSearch, 'ms');
  console.log('Conexão TCP:', perf.tcpConnect, 'ms');
  console.log('Primeira tela:', perf.fcp, 'ms');
}

Medição de desempenho

import { getPerformance } from 'ranuts';

window.addEventListener('load', () => {
  const perf = getPerformance();
  if (perf) {
    // Enviar os dados de desempenho ao servidor
    sendToServer({
      dns: perf.dnsSearch,
      tcp: perf.tcpConnect,
      request: perf.request,
      fcp: perf.fcp,
    });
  }
});

Análise do desempenho

import { getPerformance } from 'ranuts';

function analyzePerformance() {
  const perf = getPerformance();
  if (!perf) return;

  console.log('=== Análise do desempenho ===');
  console.log('Resolução de DNS:', perf.dnsSearch, 'ms');
  console.log('Conexão TCP:', perf.tcpConnect, 'ms');
  console.log('Aperto de mão SSL:', perf.sslConnect, 'ms');
  console.log('Resposta à requisição:', perf.request, 'ms');
  console.log('Transferência de dados:', perf.response, 'ms');
  console.log('Análise do DOM:', perf.parseDomTree, 'ms');
  console.log('Carregamento de recursos:', perf.resource, 'ms');
  console.log('Primeira pintura:', perf.fp, 'ms');
  console.log('Primeira pintura com conteúdo:', perf.fcp, 'ms');
}

Notas

Suporte dos navegadores: é preciso que o navegador tenha a Performance API, o que todos os modernos têm.
No servidor: devolve undefined em ambientes de servidor (sem objeto window).
Quando chamar: convém fazê-lo depois que a página terminar de carregar (evento load), para ter os dados completos.
Unidades: todos os tempos vão em milissegundos e os tamanhos em bytes.
Quando usar: é comum para acompanhar, analisar e afinar o desempenho.