As métricas e os indicadores de tempo de uso são dois recursos relacionados ao desempenho disponíveis na maioria dos navegadores modernos. Eles podem ser usados para coletar dados sobre como sua página da web ou aplicativo é usado pelos usuários, o que pode ajudar a otimizar o desempenho do seu site.
As marcas de tempo do usuário são usadas para marcar pontos específicos no seu código, que podem então ser medidos pelo User Timing. Isso pode ajudar a identificar onde ocorrem gargalos no seu código. Por exemplo, você pode usar uma marca de tempo do usuário para marcar o início de um JavaScript e, em seguida, usar uma medida de tempo do usuário para ver quanto tempo levou para esse arquivo carregar.
As métricas de tempo do usuário medem o intervalo de tempo entre duas marcações de tempo do usuário. Isso pode ajudar a medir o desempenho de trechos de código específicos. Por exemplo, você pode usar uma métrica de tempo do usuário para verificar quanto tempo uma determinada AJAX solicitação
Você pode ler mais sobre marcas e medidas de tempo do usuário no site da W3C.
O que são marcas de tempo do usuário?
Essas duas métricas, marcas e medidas de tempo do usuário, são métricas de desempenho que podem ser usadas para identificar problemas e otimizar aplicações web. As marcas de tempo do usuário podem medir o tempo entre dois eventos ou o tempo necessário para concluir um evento. As medidas de tempo do usuário podem medir a duração do evento ou o número de eventos que ocorrem em um determinado período.
Como adicionar marcas de tempo do usuário?
Adicionar indicadores e métricas de tempo de usuário é uma ótima maneira de obter insights sobre o desempenho das suas páginas web. O tempo de usuário permite rastrear quanto tempo determinados eventos levam para ocorrer nas suas páginas, como quando um usuário clica em um botão ou link.
Para adicionar marcas de tempo e compassos definidos pelo usuário, você precisará primeiro criar um novo arquivo JavaScript. Em seguida, inclua o seguinte código no seu arquivo:
var startTime = Date.now();
função fazerAlgo() {
var endTime = Date.now();
var timeTaken = endTime – startTime;
console.log('A função doSomething levou ' + timeTaken + 'ms para ser executada.');
}
O código acima permite rastrear quanto tempo a função `do Something` leva para ser executada. Você também pode usar essa técnica para rastrear outros eventos na sua página. Para isso, substitua o nome da função no código acima pelo nome do evento que você deseja rastrear.
Dicas para marcar o tempo no seu código
1. Quando você quiser medir o tempo que leva para algo acontecer no seu código, você pode usar o `performance.now()` . Isso lhe dará um registro de data e hora preciso, com precisão de milésimos de milissegundo.
2. Você também pode usar o método Date.now() se não precisar de tanta precisão.
3. Se você quiser medir quanto tempo algo leva em unidades específicas (por exemplo, segundos, minutos, etc.), você pode usar os métodos performance.mark() e performance.measure().
4. Por fim, se você quiser obter detalhes sobre o que está acontecendo em seu código e quanto tempo cada parte dele levou para ser executada, você pode usar os métodos mark() e measure() da API User Timing.
Conclusão
A API User Timing é uma ótima maneira de obter insights sobre como seus usuários interagem com seus aplicativos web. Usando marcadores e métricas, você pode rastrear eventos específicos e informações de tempo para identificar possíveis gargalos ou problemas. Além disso, a API User Timing pode ser usada para coletar dados de desempenho que podem ser utilizados para melhorar a experiência geral do usuário.
