No desenvolvimento web moderno, scripts desempenham um papel crucial na melhoria da funcionalidade e interatividade de uma página web. No entanto, scripts também podem retardar o carregamento e a renderização de uma página. Para otimizar o desempenho das páginas da web e melhorar a experiência do usuário, a tag HTML <script> fornece dois atributos importantes: defer e async. Esses atributos controlam como os scripts são carregados e executados em uma página web.
Principais Pontos
- O atributo defer atrasa a execução de um script até que o documento HTML tenha sido analisado. Scripts com o atributo defer são baixados e executados na ordem em que aparecem no documento, permitindo que o navegador continue a analisar e construir o DOM.
- O atributo async, por outro lado, permite que o script seja executado assim que estiver disponível. Scripts com o atributo async são baixados e executados independentemente de outros scripts e da construção do DOM.
- O atributo defer é adequado para scripts que dependem do DOM ou da ordem de execução de outros scripts, enquanto o atributo async é preferido para scripts independentes que podem ser executados em qualquer ordem.
- Ambos os atributos defer e async são opcionais. Se nenhum dos atributos estiver presente, ou se a tag <script> não tiver um atributo src, o script será baixado e executado de forma síncrona, bloqueando a análise do documento HTML.
O que significam defer e async?
Os atributos defer e async na tag HTML <script> são utilizados para controlar o carregamento e a execução de scripts em uma página web. O atributo defer permite que um script seja baixado em segundo plano enquanto o documento HTML está sendo analisado e, em seguida, seja executado após o documento ter sido completamente analisado. Por outro lado, o atributo async permite que um script seja baixado e executado independentemente de outros scripts e da construção do DOM. A escolha entre defer e async depende da dependência do script em relação ao DOM e da ordem desejada de execução.
Um Guia Passo a Passo para Utilizar os Atributos defer e async
Para utilizar efetivamente os atributos defer e async na tag <script>, siga estes passos:
Um Guia Passo a Passo para Utilizar os Atributos defer e async
Para utilizar efetivamente os atributos defer e async na tag <script>, siga estes passos:
- Identifique os scripts em sua página web que podem ser carregados de forma assíncrona ou adiada para melhorar o desempenho.
- Determine a dependência do script em relação ao DOM e a ordem desejada de execução. Se o script depender da disponibilidade do DOM ou da ordem de execução de outros scripts, considere o uso do atributo defer. Se o script for independente e a ordem de execução não for relevante, considere o uso do atributo async.
- Adicione o atributo defer ou async à tag <script>:
- Para carregamento adiado do script, adicione o atributo defer:
<script src="script.js" defer></script>
Para carregamento assíncrono do script, adicione o atributo async:
<script src="script.js" async></script>
- Salve as alterações e teste sua página web em diferentes navegadores para garantir compatibilidade.
Para quem são os atributos defer e async?
Os atributos defer e async na tag HTML <script> são destinados a desenvolvedores web e designers que desejam otimizar o carregamento e o desempenho de suas páginas web. Esses atributos podem ser especialmente úteis em cenários nos quais scripts precisam ser carregados e executados sem bloquear a renderização da página, ou quando a ordem de execução do script é crucial.
Desenvolvedores web que possuem um bom entendimento de como os scripts podem impactar o desempenho e têm controle sobre a ordem de execução dos scripts serão os que mais se beneficiarão ao usar os atributos defer e async.
Agora que entendemos os conceitos básicos dos atributos defer e async, vamos aprofundar-nos em seus comportamentos e implicações.
Entendendo o Atributo defer
O atributo defer permite que um script seja executado após o documento HTML ter sido completamente analisado. Scripts com o atributo defer são baixados em segundo plano enquanto o navegador continua a analisar e construir o DOM.
É importante observar que o atributo defer se aplica apenas a scripts externos que possuem um atributo src. Scripts internos e scripts sem um atributo src são sempre executados de forma síncrona e não são afetados pelo atributo defer.
A Ordem de Execução de Scripts com defer
Scripts com o atributo defer são executados na ordem em que aparecem no documento. Isso significa que se você tiver vários scripts com o atributo defer, eles serão executados na mesma ordem em que são definidos no HTML.
Considere o exemplo a seguir:
<script src="script1.js" defer></script> <script src="script2.js" defer></script>
Neste caso, script1.js será executado antes de script2.js, pois aparece primeiro no documento.
Adiando Scripts e Dependência do DOM
Um dos principais casos de uso para o atributo defer é quando um script depende da disponibilidade do DOM. Ao adiar a execução do script, você garante que o DOM tenha sido completamente construído antes que o script seja executado.
Por exemplo, se o seu script manipula ou interage com elementos na página usando o método document.getElementById(), é importante garantir que o DOM esteja pronto antes de executar o script. O atributo defer pode ajudar a alcançar esse objetivo.
Compatibilidade com Navegadores para o defer
O atributo defer é suportado em todos os navegadores modernos e no IE9+. No entanto, é importante observar que o comportamento do defer pode variar entre os navegadores, principalmente no que diz respeito à ordem de execução dos scripts adiados.
Em alguns navegadores, como Chrome e Firefox, a ordem relativa dos scripts adiados é mantida, garantindo que os scripts sejam executados na ordem em que aparecem no documento. No entanto, em outros navegadores, como Safari, a ordem de execução pode não ser preservada, o que pode resultar em problemas potenciais se os scripts tiverem dependências entre si.
Recomenda-se testar suas páginas da web com scripts adiados em vários navegadores para garantir um comportamento consistente.
Compreendendo o Atributo async
O atributo async permite que scripts sejam baixados e executados de forma assíncrona, sem bloquear a análise e a renderização do documento HTML. Scripts com o atributo async são executados assim que estão disponíveis, independentemente de o DOM ter sido completamente construído.
Assim como o atributo defer, o atributo async se aplica apenas a scripts externos com um atributo src.
A Ordem de Execução de Scripts com async
Ao contrário do atributo defer, scripts com o atributo async não preservam a ordem relativa de execução. Isso significa que se você tiver vários scripts com o atributo async, eles podem ser executados em qualquer ordem assim que estiverem disponíveis.
Por exemplo:
<script src="script1.js" async></script> <script src="script2.js" async></script>
Neste caso, script1.js e script2.js podem ser executados em qualquer ordem, dependendo do download e da disponibilidade. Esse comportamento permite que os scripts sejam carregados e executados independentemente, melhorando a paralelização e potencialmente reduzindo o tempo total de carregamento.
Implicações para Scripts com Dependências
O atributo async é mais adequado para scripts independentes que não têm dependências de outros scripts ou do DOM. Se seus scripts têm dependências ou requerem que o DOM esteja totalmente construído, é recomendável usar o atributo defer.
Ao usar o atributo async, é importante garantir que os scripts não dependam uns dos outros ou da disponibilidade do DOM. Se os scripts tiverem dependências, é possível que sejam executados antes que as dependências necessárias estejam disponíveis, o que pode resultar em erros ou problemas inesperados.
Compatibilidade com Navegadores para async
O atributo async é suportado em todos os navegadores modernos e no IE10+. No entanto, semelhante ao atributo defer, o comportamento do async pode variar entre os navegadores, principalmente no que diz respeito à ordem de execução de scripts carregados de forma assíncrona.
É importante testar suas páginas da web com scripts carregados de forma assíncrona em vários navegadores para garantir um comportamento consistente.
Conclusão
Neste artigo, exploramos os atributos defer e async na tag HTML <script> e seu impacto no carregamento e execução de scripts em uma página web. Ao usar esses atributos, os desenvolvedores web podem aprimorar o desempenho de suas páginas controlando o comportamento de carregamento dos scripts.
O atributo defer permite que os scripts sejam executados após o documento HTML ter sido analisado, preservando a ordem relativa de execução e permitindo que o navegador continue a analisar e construir o DOM. Este atributo é especialmente útil quando os scripts têm dependências do DOM ou de outros scripts.
O atributo async, por outro lado, permite que os scripts sejam carregados e executados independentemente de outros scripts e da construção do DOM. Este atributo é adequado para scripts independentes que não têm dependências do DOM ou de outros scripts. No entanto, é importante considerar possíveis problemas quando os scripts têm dependências ou exigem que o DOM esteja totalmente construído.
Para garantir compatibilidade entre navegadores e um comportamento consistente, é recomendável testar páginas da web com scripts adiados e carregados de forma assíncrona em vários navegadores.
Ao entender e utilizar efetivamente os atributos defer e async, os desenvolvedores web podem otimizar o carregamento e a execução de scripts, resultando em páginas da web mais rápidas e eficientes.
Lembre-se de testar e otimizar regularmente seus scripts para obter o melhor desempenho e proporcionar a melhor experiência possível ao usuário.
Agora que você tem um melhor entendimento dos atributos defer e async na tag <script>, vá em frente e aplique esse conhecimento aos seus próprios projetos de desenvolvimento web!
Sugestão de Cursos
Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.
Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.
As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.
Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.
Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.
O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.