Usando async e defer em HTML: Como Funcionam e Compatibilidade Retroativa
Resumo Rápido
Tecnicamente, usar async e defer juntos em uma tag de script é justificável 😲; no entanto, como async tem precedência sobre defer, essa combinação parece sem sentido. Aqui está um exemplo de seu uso conjunto na prática:
<script src="EverSeenAScriptRunFast.js" async defer></script> <!-- `async` tem precedência, `defer` é ignorado -->Se é importante que o script seja executado após a análise completa do HTML, use apenas defer:
<script src="PatientlyWaiting.js" defer></script>Agora, vamos discutir quando e por que aplicar esses atributos.
Async e Defer: Competindo pelo Carregamento Ideal
Na estrutura do seu documento HTML, uma partida de xadrez se desenrola, onde async e defer atuam como peças de xadrez estrategicamente significativas competindo por um carregamento ótimo dos scripts.
Como funcionam async e defer
Você pode comparar o atributo async a um cavalo, que se move livremente sem estar vinculado a outras peças, permitindo que os scripts sejam carregados em paralelo com a análise do HTML, acelerando assim esse processo.
Por outro lado, defer se assemelha a um bispo, esperando seu momento e adiando a execução do script até que a análise do HTML esteja completa.
Garantindo Compatibilidade Retroativa
Async foi introduzido apenas no IE10, enquanto defer existe desde o IE 5.5. Se você se preocupa com a compatibilidade com navegadores mais antigos, escolha defer.
Conhecendo os Movimentos: Ordem de Execução dos Scripts
Scripts com defer são executados na ordem em que aparecem no documento, ao contrário de async, que pode ser executado em qualquer ordem, potencialmente interrompendo sequências de carregamento críticas.
Mudando as Regras: Combinando async e defer
Usar async e defer juntos é como jogar um cavalo e um bispo em um único movimento— a eficácia de tal jogada é questionável, uma vez que async sempre prevalecerá.
Melhorando os Movimentos: Estratégia de Carregamento de Scripts
Considere combinar arquivos, levando em conta suas interdependências e impacto na velocidade de carregamento para otimizar o desempenho. Isso ajudará você a escolher corretamente entre async e defer.
Visualização
Imagine um duelo culinário entre chefs...
Chef 1👨🍳: Começa a cozinhar a massa imediatamente (async), sem esperar a água ferver.
Chef 2👩🍳: Deixa o alho dourar (DOMContentLoaded), e então rapidamente serve a massa (defer).Se você usar async e defer ao mesmo tempo:
Chef 3👨🍳👩🍳: Joga a massa crua na água ainda fria e espera ferver. Oh não 🤷!É melhor escolher um chef: ou o Impulsivo 👨🍳 ou o Detalhista 👩🍳, para fazer uma massa perfeita! 🍝
Livro de Receitas de Programador: Como Usar async e defer
Quando async é seu Ingrediente Essencial
Async é adequado para scripts que não estão relacionados a outros, como sistemas de análise ou módulos de marketing. Esses scripts podem ser carregados e executados em paralelo, sem esperar que o documento termine de ser processado.
Quando defer Adiciona Sabor à Espera
Defer é apropriado para aqueles scripts que exigem interação com o DOM ou outros scripts, já que defer garante que a execução do script não comece até que toda a página esteja carregada, o que é relevante mesmo em versões mais antigas de navegadores.
Evitando Erros Culinários
Ao usar async e defer, é importante ter em mente os riscos potenciais:
- Prontidão do DOM:
asyncpode resultar na execução do script antes que o DOM esteja totalmente pronto. - Interdependências dos Scripts: Para evitar uma confusão na ordem de execução, prefira
defer, que preservará a sequência. - Compromisso com o Desempenho: Com
async, a página pode carregar mais rapidamente, mas a ordem de processamento pode acabar caótica.
Recursos Úteis
<script>: O elemento Script - HTML: Linguagem de Marcação de Hipertexto | MDN- O atributo async para a tag script no W3Schools
- O atributo defer para a tag script no W3Schools
- JavaScript - atributos async e defer para a tag script no Stack Overflow
- Eliminando JavaScript que bloqueia renderização nas recomendações de Page Speed Insights do Google Developers
- Carregando JavaScript de forma eficiente com defer e async por Flavio Copes