31 lines
2.2 KiB
Plaintext
31 lines
2.2 KiB
Plaintext
---
|
|
title: 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 `async` deve 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 atributo `defer` deve ser usado para scripts que dependem de / é dependente de outro script.
|
|
- Os atributos `async` e `defer` são ignorados para scripts que não têm o atributo `src`.
|
|
- `<script>`s com `defer` ou `async` que contêm `document.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".
|
|
|
|
## Referências
|
|
|
|
- [`<script>`: O elemento Script | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
|
|
- [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
|