Testes de Performance JavaScript \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 07 Horas 

 47 Min 

 02 Seg 

   Tempo restante da oferta: 07 47 02 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Testes de Performance JavaScript  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/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.

 [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/teste-de-performance-javascript.png)  

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](https://www.treinaweb.com.br/blog/javascript-comandos-do-console/ "console do JavaScript") possui vários métodos. A fim de calcular o tempo de uma operação, temos o método [time()](https://developer.mozilla.org/en-US/docs/Web/API/Console/time "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 😂

```javascript
console.time('meu timer');
minhaFuncao();
console.timeEnd('meu timer');

```

 [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript)

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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/javascript-console-time.png)

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](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/chrome-developer-tools.svg)   Curso Google Chrome Developer Tools Conhecer o curso ](https://www.treinaweb.com.br/curso/google-chrome-developer-tools)

## performance.now()

A [API](https://www.treinaweb.com.br/blog/o-que-e-uma-api/ "API") `performance` possui o método [now()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now "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.

```javascript
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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/javascript-performance-now.png)

## Ferramentas Online

Também existem ferramentas online para esses testes de performance. Um exemplo é o [https://jsben.ch/](https://jsben.ch/ "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.

[  ![Acessibilidade -  Desenvolvendo sites acessíveis](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/acessibilidade-web.svg)   Curso Acessibilidade - Desenvolvendo sites acessíveis Conhecer o curso ](https://www.treinaweb.com.br/curso/acessibilidade-desenvolvendo-sites-acessiveis)

## 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](https://www.treinaweb.com.br/blog/o-que-e-debounce-e-qual-sua-importancia-para-a-performance/ "Debounce") ou deixar as operações [assíncronas](https://www.treinaweb.com.br/blog/usando-o-async-await-do-javascript/ "assíncronas") já vai resolver.

- [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript)
- [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end)
- [ #chrome ](https://www.treinaweb.com.br/blog/tag/chrome)
- [ #Performance ](https://www.treinaweb.com.br/blog/tag/performance)
- [ #teste ](https://www.treinaweb.com.br/blog/tag/teste)
- [ #dev tools ](https://www.treinaweb.com.br/blog/tag/dev-tools)

Autor

 ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm)

## 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](https://www.treinaweb.com.br/blog/autor/akira-hanashiro)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

 [Ver cursos](https://www.treinaweb.com.br/cursos)   

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     6 anos atrás

    ##  [ JavaScript - Comandos do Console ](https://www.treinaweb.com.br/blog/javascript-comandos-do-console) 

     Conheça os comandos do console do navegador e domine essa ferramenta para melhorar seus testes ou caça aos bugs do seu JavaScript!

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/02/06152024/js-engine-400x280.png)  [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 

     9 anos atrás

    ##  [ JavaScript Game Engines ](https://www.treinaweb.com.br/blog/javascript-game-engines) 

     Conheça as principais Game Engines para JavaScript.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     9 anos atrás

    ##  [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) 

     Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/27155937/js-symbol-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     7 anos atrás

    ##  [ JavaScript: você sabe o que são e por que usar Symbols? ](https://www.treinaweb.com.br/blog/javascript-voce-sabe-o-que-sao-e-por-que-usar-symbols) 

     Descubra a utilidade dos Symbols no JavaScript, novo tipo primitivo introduzido no ES2015.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/ANGULAR-400x280.png)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     7 anos atrás

    ##  [ O que é o Angular e para que serve? ](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve) 

     Frameworks SPA atualmente são um padrão de mercado quando falamos sobre desenvolvimento front-end. Neste artigo, vamos abordar o Angular, um dos mais populares.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/firebase-1-400x280.png)  [ Computação em nuvem ](https://www.treinaweb.com.br/blog/categoria/computacao-em-nuvem) 

     10 anos atrás

    ##  [ Firebase: descubra no que esta plataforma pode te ajudar ](https://www.treinaweb.com.br/blog/firebase-descubra-no-que-esta-plataforma-pode-te-ajudar) 

     O Firebase é uma plataforma do Google que contém um conjunto de ferramentas e infraestrutura para ajudar no desenvolvimento web e mobile.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/16065017/front-back-ou-fullstack-400x280.png)  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 

     8 anos atrás

    ##  [ Devo começar como Front-End, Back-End ou Full Stack? ](https://www.treinaweb.com.br/blog/devo-comecar-como-front-end-back-end-ou-full-stack) 

     Devo começar minha carreira como desenvolvedor Front-End, Back-End ou FullStack?

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png)  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 

     8 anos atrás

    ##  [ Introdução à programação assíncrona em PHP usando o ReactPHP ](https://www.treinaweb.com.br/blog/introducao-a-programacao-assincrona-em-php-usando-o-reactphp) 

     Uma introdução à programação assíncrona com PHP e uso básico dos componentes do ReactPHP.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/06104639/TW-ENTREVISTAS-FABIO-400x280.png)  [ Desenvolvimento Web ](https://www.treinaweb.com.br/blog/categoria/entrevistas-desenvolvimento-web) 

     8 anos atrás

    ##  [ TW Entrevista 08: Fabio Costa ](https://www.treinaweb.com.br/blog/tw-entrevista-08-fabio-costa) 

     Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Fabio Costa, desenvolvedor que já trabalhou na Globo.com, no Facebook e agora está na GoDaddy.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/05/12101840/debounce-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     9 anos atrás

    ##  [ O que é Debounce e qual sua importância para a performance? ](https://www.treinaweb.com.br/blog/o-que-e-debounce-e-qual-sua-importancia-para-a-performance) 

     Veja como a técnica de Debounce pode te ajudar a cuidar da performance da sua aplicação.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/06121421/html-pdf-php-lambda-400x280.png)  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 

     7 anos atrás

    ##  [ Função para converter HTML para PDF usando PHP e wkhtmltopdf no AWS Lambda ](https://www.treinaweb.com.br/blog/funcao-para-converter-html-para-pdf-usando-php-e-wkhtmltopdf-no-aws-lambda) 

     Veja nesse artigo como subir uma função para o AWS Lambda para converter HTML para PDF usando wkhtmltopdf e o PHP como linguagem base.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/02014536/APACHE-JMETER-400x280.png)  [ Testes e Projetos ](https://www.treinaweb.com.br/blog/categoria/testes-e-projetos) 

     7 anos atrás

    ##  [ O que é JMeter? ](https://www.treinaweb.com.br/blog/o-que-e-jmeter) 

     Confira neste artigo a ferramenta JMeter e o que são os testes de performance.

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **07h 47min 02s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

     [                ](https://www.treinaweb.com.br)

 Escola online de programação, tecnologia e IA.

- [  ](https://www.facebook.com/TreinaWeb/)
- [  ](https://www.instagram.com/treinaweb/)
- [  ](https://www.youtube.com/user/TreinaWeb)
- [  ](https://twitter.com/treinaweb)
- [  ](https://www.linkedin.com/company/treinaweb)
- [  ](https://github.com/treinaweb)

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## Cursos

- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200   © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58