Diferença entre os atributos async e defer \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 04 Min 13 Seg Tempo restante da oferta: 14 04 13 [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) Diferença entre os atributos async e defer [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Diferença entre os atributos async e defer Nesse artigo vamos ver em detalhes como os atributos async e defer se comportam ao declarar seus arquivos JavaScript no HTML. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 5 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/diferenca_entre_os_atributos_async_e_defer.png) Nesse artigo vamos ver em detalhes como os atributos `async` e `defer` se comportam ao declarar seus arquivos JavaScript no `HTML`. Pois, saber onde colocar a tag `script` no `HTML` tem impacto direto no desempenho da sua página. ## Declaração de arquivos JavaScript sem atributos Basicamente são as duas formas de declarar nossos scripts, dentro da tag `head` ou ao final da tag `body`. Sabendo disso temos que escolher se queremos que os scripts carreguem antes ou depois do carregamento do HTML. Para carregar os scripts antes do conteúdo HTML precisamos a tag `script` dentro da tag `head`, pois todo documento é lido pelo navegador de cima para baixo. Logo, se quisermos que os scripts carreguem por último, devemos colocar a tag `script` ao final da tag `body`. Vamos ver cada uma dessas formas funcionam. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ### Arquivos JavaScript no head Vamos testar primeiro a tag `script` dentro da tag `head`. Em primeiro lugar, antes de iniciar qualquer carregamento da página o navegador fará o download e execução dos scripts. Consequentemente fazendo com que sua página fique mais lenta e com aquela tela em branco enquanto a carrega, dependendo do tamanho dos arquivos, esse processo pode levar algum tempo. ```html TreinaWeb ``` ![execução do arquivo no head sem atributo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/execucao_do_arquivo_no_head_sem_atributo.jpg) Veja o tempo que o usuário fica na sua página até começar a analisar o `HTML`. Esse tempo para carregar faz com que a experiência do usuário seja prejudicada. Por esse motivo não é recomendado a declaração dos scripts dentro da tag `head`. [ ![JavaScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos) ### Arquivos JavaScript no final do body A forma que todos já ouvimos é a de colocar os arquivos de JavaScript ao final da tag `body`. Além de ser o recomendado faz todo sentido, pois se queremos fazer alguma ação em um botão, por exemplo, esse mesmo botão já deverá ter sido lido pelo navegador. ```html TreinaWeb ``` Essa declaração de arquivos JavaScript é a mais comum, quando são declarados dessa forma seu carregamento será lido pelos navegadores desse jeito: ![execução do arquivo no final do body](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/execucao_do_arquivo_no_final_do_body-1.jpg) A imagem a cima é bem explicativa, quando um navegador envia uma requisição para abrir uma página, ela será lida de cima para baixo e da esquerda para direita. Porém, veja que quando o navegador chega nos seus scripts ele para até finalizar o download e executar, só após isso finaliza 100% do `HTML`. ## Declaração de arquivos JavaScript com async e defer Para não ficarmos limitados apenas a essas duas maneiras ditas anteriormente existem dois atributos que podem mudar a forma como os scripts sao carregados. Eles são o `async` e o `defer`. Vamos ver como esses atributos funcionam em detalhes. ```html ``` ## Como async funciona. Esse atributo, diferente da tag sozinha, irá fazer o download dos scripts junto da página, o que já é uma vantagem, mas ao final do download dos scripts irá parar a análise do `HTML` e executar os scripts, mesmo se seu arquivo estiver no `head` do documento, dessa forma: ```html TreinaWeb ``` ![execução do arquivo no head com async](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/execucao_do_arquivo_no_head_com_async.jpg) Veja que a análise do HTML e o download dos scprits são feitos simultaneamente, mas independente do momento que estiver a análise do documento, ao finalizar o download dos scripts ele irá parar e executa-los, após isso irá seguir com a análise do `HTML` por completo. [ ![JavaScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos) ## Como ‘defer’ funciona Já utilizando o `defer` além do download e análise simultânea, o carregamento do seu `HTML` não será interrompido em nenhum momento para a execução dos scripts. Eles são executados apenas quando o carregamento de todo o documento estiver concluído. Podendo também ser colocado no `head`, vamos ver como esse atributo se comporta no nosso gráfico. ```html TreinaWeb ``` ![execução do arquivo no head com defer](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/execucao_do_arquivo_no_head-com_defer.jpg) ### Quando utilizar esses atributos? Para resumir, como havia dito no início, tudo vai depender da sua necessidade, agora que já possui o conhecimento das diferentes maneiras de declarar a importação de scripts em arquivos HTML, você pode utiliza-los da maneira que for mais conveniente para seu projeto, já que esses atributos têm suporte para quase todos os navegadores atuais. ### Qual é o melhor? Isso vai depender muito se você irá ter apenas um arquivo ou vários para mesma página e se um arquivo depende de outro para funcionar perfeitamente. Sabemos que em grandes projetos é bem comum utilizar mais de um arquivo JavaScript na sua página. Um exemplo é o [Bootstrap](https://www.treinaweb.com.br/blog/o-que-e-bootstrap), na versão 4 ele utilizava até três arquivos JavaScript para funcionar o [Popper](https://popper.js.org/), o próprio JavaScript do Bootstrap e o [jQuery](https://jquery.com/), necessitando de uma sequência específica para funcionar, nesse caso o atributo `defer` irá te atender melhor, pois ele obedece à ordem de execução declarada inicialmente no `HTML`. Já se seu script não necessita de nenhum elemento `HTML` carregado, nem depende de nenhum outro arquivo para funcionar corretamente o `async` será bem útil, pois como o nome já sugere ele trabalha de forma assíncrona, ou seja, irá executar no momento em que for concluído download dos scripts independentemente se a página está carregada ou não. [ ![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) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #async ](https://www.treinaweb.com.br/blog/tag/async) - [ #defer ](https://www.treinaweb.com.br/blog/tag/defer) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## 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/2022/07/novos-recursos-do-ecmascript-2022-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 4 anos atrás ## [ Novos recursos do ECMAScript 2022 ](https://www.treinaweb.com.br/blog/novos-recursos-do-ecmascript-2022) Novos recursos do ECMAScript 2022 que é a décima terceira edição da especificação que vai padronizar tudo no mundo do JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/NODE-SQUELIZE-MYSQL-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Usando Sequelize ORM com Node e Express ](https://www.treinaweb.com.br/blog/usando-sequelize-orm-com-node-e-express) Vamos aprender a configurar uma aplicação com banco de dados MySQL usando Sequelize ORM com Node.js e Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/04112944/DJANGO-PROJETOS-PYCHARM-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 2 anos atrás ## [ Validação de dados em aplicações Django ](https://www.treinaweb.com.br/blog/validacao-de-dados-em-aplicacoes-django) Aprenda como trabalhar com validação de dados em aplicações Django, utilizando validações padrões e customizadas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn) Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/09160454/SGBDs-400x280.png) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 5 anos atrás ## [ O que é um SGBD? ](https://www.treinaweb.com.br/blog/o-que-e-um-sgbd) Veja neste artigo o que é um Sistema de Gerenciamento de Banco de Dados (SGBD). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/CAPA-PYTHON-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como trabalhar com data e hora no Python ](https://www.treinaweb.com.br/blog/como-trabalhar-com-data-e-hora-no-python) Como trabalhar com data e hora no Python com Datetime. No decorrer deste artigo, veremos exemplos de como utilizar o módulo datetime... Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/thymeleaf-reaproveitando-codigo-com-fragments-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Herança de Templates ](https://www.treinaweb.com.br/blog/thymeleaf-heranca-de-templates) Neste artigo veremos como implementar a herança de templates com os fragments parametrizados da template engine Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/22100127/o-que-é-json-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ O que é JSON? ](https://www.treinaweb.com.br/blog/o-que-e-json) Veja neste artigo o que é JSON. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/capa-tag-ancora-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Trabalhando com a tag âncora no HTML ](https://www.treinaweb.com.br/blog/trabalhando-com-a-tag-ancora-no-html) Nesse artigo veremos como a tag âncora (link) e seus atributos são utilizados no desenvolvimento de sites, e como ela pode nos ajudar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/ARTIGO-DART-400x280.jpg) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 4 anos atrás ## [ Guia da linguagem dart ](https://www.treinaweb.com.br/blog/guia-da-linguagem-dart) Nesse guia da linguagem Dart você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação Dart. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/16095041/OCELOT-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ Criando um API Gateway com ASP.NET Core e Ocelot ](https://www.treinaweb.com.br/blog/criando-um-api-gateway-com-asp-net-core-e-ocelot) Conheça o conceito de API Gateway e veja como criá-lo em uma aplicação ASP.NET utilizando a biblioteca Ocelot. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com FastAPI ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-fastapi) Neste artigo nós iremos aprender um pouco mais sobre o FastAPI durante o desenvolvimento de uma API com todas as operações de CRUD. 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 **14h 04min 13s** - 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