Medir o desempenho do código JavaScript é essencial para otimizar aplicações web. Este artigo fornece uma abordagem clara, passo a passo, para calcular métricas de desempenho usando JavaScript.

Compreender as Metricas de Desempenho

As métricas de desempenho ajudam os desenvolvedores a identificar gargalos e melhorar a eficiência de seu código. As métricas comuns incluem tempo de execução, uso de memória e taxa de quadros.

Usando a API de desempenho

A API de Performance fornece ferramentas para medir vários aspectos da execução de código. O método performance.now() retorna uma data-horário de alta resolução, ideal para um timing preciso.

Para medir o tempo de execução, registe as datas antes e depois do bloco de código:

Exemplo:

const startTime = performance.now();

// Código a medir

const endTime = performance.now();

duração const = endTime - startTime;

Calculando outras métricas

O uso da memória pode ser verificado usando o objeto performance.memory, que fornece detalhes como o tamanho total do heap JS e o tamanho usado do heap. Note que esta API é suportada principalmente no Chrome.

Para medição da taxa de quadros, use a função requestAnimationFrame para rastrear o desempenho de renderização ao longo do tempo.

Melhores Práticas

Sempre realizar medições várias vezes para explicar a variabilidade. Use médias para obter resultados mais precisos. Evite medir durante períodos de alta atividade que podem distorcer os dados.

  • Use timers de alta resolução como performance.now().
  • Execute medições várias vezes para precisão.
  • Compare os resultados em condições consistentes.
  • Monitorar o uso da memória com performance.memory.
  • Monitorização de desempenho com requestAnimationFrame.