Diferença entre 'async' e 'defer' em JS!

Async e defer são os atributos (opcionais) para a tradicional tag <script> em HTML.

<head>
<!-- other head things -->
  <script async src="">
  <script defer src="">
<head/>

Limpando o básico!

1. A tag Script em HTML é usada para incorporar um arquivo JavaScript externo. Ele pode até conter instruções de script se não apontar para nenhum arquivo js.
2. Geralmente usado logo antes do final da tag do corpo. Pode ser colocado dentro da cabeça também. A colocação na cabeça ou antes da extremidade do corpo desempenha diferentes funções.
3. Ao carregar uma página da web, 2 coisas importantes acontecem dentro do navegador - análise de HTML e carregamento de scripts.
4. O carregamento de scripts inclui o download do script do servidor e a parte de execução.

1. Baixe arquivos de script em segundo plano enquanto a análise de HTML está ocorrendo.
2. Após o download, ele pausa a análise do HTML e executa o script. Depois que a execução é concluída, a análise restante ocorre.
3. Os arquivos de script são executados sem ordem.
4. Elimina o efeito de bloqueio de renderização do JS durante o download (não interrompe/pausa a análise de HTML).

1. Baixe arquivos de script em segundo plano enquanto a análise de HTML está ocorrendo.
2. Não pausa a análise de HTML mesmo após o download e é executado após a conclusão da análise de HTML.
3. Os arquivos de script são executados em ordem.
4. Elimina o efeito de bloqueio de renderização do JS durante o download (não interrompe/pausa a análise de HTML).
5. Semelhante à tag de script convencional no corpo, mas o uso de defer permite que ela se mova para o cabeçalho, resultando no carregamento antecipado de scripts posteriores.

Observação: não deve usar 'async' e 'defer' no mesmo script, pois pode causar um comportamento indesejado entre navegadores.

O que usar quando?

Assíncrono:

• Melhor para recursos de alta prioridade que improvisam o carregamento antecipado da página, pois a execução é feita logo após o download dos scripts.
• Deve ser usado para arquivos independentes importantes que não estão interligados com outros scripts e auxiliam no carregamento antecipado.

• Pode ser usado para os recursos que não são importantes e são para uso posterior. Isso ocorre porque a execução de scripts adiados ocorre no último após o HTML ser totalmente analisado.

Conecte-se comigo em: LinkedIn , GitHub