Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`
tags <script> são usadas para incluir JavaScript em uma página da web. Os atributos async e defer são usados para mudar como/quando o carregamento e a execução do script acontecem.
Simples <script>
Para tags normais <script> sem qualquer async ou defer, quando forem encontrados, a análise do HTML é bloqueada, o script é buscado e executado imediatamente. A análise do HTML é retomada após a execução do script.
<script async>
No <script async>, o script será buscado em paralelo à análise do HTML e será executado assim que estiver disponível (potencialmente antes da conclusão da análise do HTML) e não será necessariamente executado na ordem em que aparece no documento HTML. Use async quando o script é independente de quaisquer outros scripts na página, por exemplo, analytics.
<script defer>
No <script defer>, o script será buscado em paralelo à análise HTML e executado quando o documento tiver sido totalmente analisado, mas antes de disparar DOMContentLoaded. Se houver múltiplos, cada script adiado é executado na ordem em que eles apareceram no documento HTML.
Se um script depende de um DOM totalmente analisado, o atributo defer será útil para garantir que o HTML seja totalmente analisado antes de ser executado.
Notas
- Geralmente, o atributo
asyncdeve ser usado para scripts que não são críticos para a renderização inicial da página e não dependem um do outro. enquanto o atributodeferdeve ser usado para scripts que dependem de / é dependente de outro script. - Os atributos
asyncedefersão ignorados para scripts que não têm o atributosrc. <script>s comdeferouasyncque contêmdocument.write()serão ignorados com uma mensagem como "Uma chamada para o documento.write() de um script externo carregado de forma assíncrona foi ignorada".