Olá Web Developers! Há momentos em que precisamos que um determinado código tenha um melhor desempenho. Certamente você já deve ter visto vários códigos diferentes fazendo a mesma coisa. Então vem a dúvida: no código que preciso criar, qual será mais rápido? E então vamos precisar fazer testes de performance.
Vamos conhecer algumas maneiras mais simples para se fazer isso.
console.time()
O console do JavaScript possui vários métodos. A fim de calcular o tempo de uma operação, temos o método time(). Precisamos passar para ele um nome que servirá de identificador único para o nosso timer. Após a execução do que queremos calcular usamos o método timeEnd(), com a finalidade de encerrar o timer criado.
Em uma mesma página você pode ter até 10.000 timers. Então pode ficar tranquilo que não vai faltar 😂
console.time('meu timer');
minhaFuncao();
console.timeEnd('meu timer');
Como resultado teremos o nome do timer impresso seguido do tempo, em milissegundos, que a operação levou para ser concluída.
Já que o console do navegador fica responsável por calcular o tempo por um simples nome, é muito útil caso você queira indicar o início da contagem em um arquivo e quer finalizar em outro.
Curso Google Chrome Developer Tools
Conhecer o cursoperformance.now()
A API performance possui o método now(), com o intuito de retornar o tempo que se passou desde que o documento foi criado. Portanto, ele também pode ser usado para fazer testes de performance.
const inicio = performance.now();
minhaFuncao();
const fim = performance.now();
console.log(`A operação levou ${fim - inicio} milissegundos`);
Conseguimos o tempo de execução da mesma forma. Porém, como o performance.now() nos retorna o tempo que se passou desde que o documento foi criado, a diferença entre início e fim fica por nossa conta.
Ferramentas Online
Também existem ferramentas online para esses testes de performance. Um exemplo é o https://jsben.ch/. Ele possui dois campos para se colocar códigos. Basta colocar os dois códigos que você quer comparar e mandar executar. Como resultado teremos uma indicação de qual foi o código mais rápido.
Curso HTML5 + CSS3 - Fundamentos
Conhecer o cursoCuidado ao querer fazer testes de performance
Por mais que seja importante cuidar da sua aplicação para dar a melhor experiência possível ao usuário, evite ficar focando em micro-otimizações. Coisas como querer melhorar um looping com poucos elementos são desnecessárias.
Foque em coisas que exijam realmente muitos cálculos e que possam fazer a aplicação engasgar em dispositivos com hardwares mais simples. Isso se aplica normalmente a animações, jogos e outras coisas que possam precisar de várias execuções custosas em um período muito curto.
Se acaso sua aplicação não se encaixe nisso mas ainda apresenta alguns comportamentos que precisam ser melhorados, provavelmente utilizar a técnica de Debounce ou deixar as operações assíncronas já vai resolver.
