Para que servem os atributos async e defer
Os atributos defer e async são usados na tag script do HTML para controlar o carregamento e a execução de scripts externos. Eles podem melhorar o desempenho e a experiência do usuário, mas também podem causar alguns problemas se não forem usados corretamente. Neste post, vamos explicar o que são esses atributos, como funcionam e quando usá-los.
O que são os atributos defer e async?
Os atributos defer e async são booleanos, ou seja, não precisam de um valor. Basta colocá-los na tag script para ativá-los. Eles só têm efeito se o script tiver o atributo src, que indica o endereço do arquivo externo.
O atributo defer indica que o script deve ser carregado em paralelo com o HTML, mas só deve ser executado depois que o HTML for completamente parseado. Isso significa que o script não bloqueia o renderização da página, mas também respeita a ordem dos scripts no documento. Por exemplo:
Nesse caso, os scripts 1 e 2 serão carregados ao mesmo tempo que o HTML, mas só serão executados depois que o HTML terminar de ser parseado. Além disso, o script 1 será executado antes do script 2, mesmo que ele demore mais para ser carregado.
O atributo async indica que o script deve ser carregado em paralelo com o HTML, mas pode ser executado assim que estiver disponível. Isso significa que o script não bloqueia a renderização da página, mas também não respeita a ordem dos scripts no documento. Por exemplo:
Nesse caso, os scripts 1 e 2 serão carregados ao mesmo tempo que o HTML, mas podem ser executados em qualquer ordem, dependendo de qual deles terminar de ser carregado primeiro. Isso pode causar problemas se os scripts dependerem uns dos outros ou de elementos do HTML.
Quando usar os atributos defer e async?
Os atributos defer e async são úteis para melhorar o desempenho e a experiência do usuário, pois permitem que o navegador carregue e execute os scripts sem bloquear a renderização da página. No entanto, eles também podem causar problemas se os scripts não forem independentes ou se alterarem o conteúdo do HTML.
Em geral, recomenda-se usar o atributo defer para scripts que não dependem de outros scripts ou de elementos do HTML, mas que precisam ser executados na ordem em que aparecem no documento. Por exemplo, scripts que inicializam componentes da interface ou que registram eventos.
Já o atributo async é recomendado para scripts que não dependem de outros scripts ou de elementos do HTML, mas que podem ser executados em qualquer ordem sem causar problemas. Por exemplo, scripts que fazem análises ou rastreamento.
Se os scripts dependerem de outros scripts ou de elementos do HTML, é melhor não usar nenhum dos dois atributos e colocar os scripts no final do corpo do documento. Assim, eles serão carregados e executados depois que o HTML for completamente parseado. Por exemplo, scripts que manipulam o DOM ou que usam bibliotecas externas.
