No mundo do desenvolvimento web, otimizar o tempo de carregamento da página é crucial. Dois atributos poderosos da tag

O básico: como os scripts são carregados

Por padrão, quando um navegador encontra uma tag

1. Pausa a análise de HTML
2. Baixa o script
3. Executa o script
4. Retoma a análise de HTML

Esse processo pode retardar a renderização da página, especialmente para scripts grandes ou conexões lentas. Além disso, pode causar bugs se o script for executado antes de certos elementos HTML serem totalmente carregados, o que geralmente acontece se o script não for colocado corretamente no documento.

Assíncrono e adiado: uma espada de dois gumes

Assíncrono

• O que faz: Baixa o script de forma assíncrona enquanto a análise de HTML continua.
• Quando é executado: Assim que é baixado, pausando a análise de HTML.
• Quando usado: Scripts independentes que não dependem de outros scripts ou conteúdo DOM.
• Advertência: Pode ser executado fora de ordem, potencialmente quebrando dependências.

Adiar

• O que faz: Baixa o script enquanto a análise do HTML continua.
• Quando é executado: Após a conclusão da análise do HTML, mas antes do evento DOMContentLoaded.
• Quando é usado: Scripts que dependem de conteúdo DOM ou precisam ser executados em uma ordem específica.
• Advertência: pode atrasar a execução de funcionalidades críticas.

Comparando Comportamentos

Ordem de execução: assíncrona, adiada e ambas

Compreender a ordem de execução de scripts com atributos diferentes é crucial para gerenciar dependências e garantir a funcionalidade adequada. Veja como funciona:

1. Scripts regulares (sem assíncrono ou adiamento):

   • Execute na ordem em que aparecem no documento.
   • Bloqueie a análise de HTML até que eles sejam baixados e executados.

2. Scripts assíncronos:

   • Baixe em paralelo e execute assim que estiverem disponíveis.
   • Nenhuma ordem de execução garantida; eles são executados assim que são baixados.
   • Pode ser executado antes que o DOM esteja totalmente carregado.

3. Adiar scripts:

   • Baixe em paralelo, mas execute somente após a conclusão da análise do HTML.
   • Execute na ordem em que aparecem no documento.
   • Executado antes do evento DOMContentLoaded.

4. Scripts com async e defer:

   • O atributo async tem precedência nos navegadores modernos.
   • Em navegadores mais antigos que não suportam assíncrono, eles recorrem ao comportamento de adiar.

Exemplo de ordem de execução:

Possível ordem de execução:

1. 1.js (análise de blocos)
2. 3.js ou 2.js (o que for baixado primeiro)
3. 2.js ou 3.js (o que for baixado em segundo lugar)
4. 4.js
5. 5.js

Observe que 2 e 3 podem ser executados em qualquer ordem ou até mesmo antes de 1 se 1.js demorar mais para baixar.

Melhores Práticas

1. Use assíncrono para scripts independentes, como análises.
2. Use adiar para scripts que dependem do DOM ou de outros scripts.
3. Coloque scripts no com async ou defer para iniciar o download mais cedo.
4. Para scripts críticos, considere scripts embutidos no .

Suporte ao navegador

Async e defer são amplamente suportados em navegadores modernos. Para navegadores mais antigos, considere usar um carregador de scripts ou colocar scripts no final do