Javascript

Testes de Performance JavaScript

Conheça as várias maneiras para se fazer testes de performance em seus códigos JavaScript para melhorar a experiência de seus usuários.

há 3 anos 6 meses

Formação Desenvolvedor JavaScript
Conheça a formação em detalhes

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.

JavaScript Console - Time

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.

Google Chrome Developer Tools
Curso Google Chrome Developer Tools
Conhecer o curso

performance.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.

JavaScript - Performance.now

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.

React Native - Armazenamento e Sincronia com Firebase Firestore
Curso React Native - Armazenamento e Sincronia com Firebase Firestore
Conhecer o curso

Cuidado 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.

Autor(a) do artigo

Akira Hanashiro
Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

Todos os artigos

Artigos relacionados Ver todos