¿Qué diferencias hay entre defer y async?

didacticode.com/que-diferencias-hay-entre-defer-y-async/

Hay dos atributos que nos permiten decidir el momento de carga de nuestros scripts. Son los atributos

defer
y
async
, y se indican en la propia etiqueta de
<script>
de nuestra página web.
¡Vamos a verlos!

Defer
El atributo

defer
es un atributo booleano que indica que el script se ejecuta cuando la página ha terminado de analizarse.
Es muy importante tener en cuenta que solamente se puede utilizar en scripts externos, es decir, en los
que indicamos la ruta a través del atributo

scr
.
<script src="script.js" defer></script>

Async
El atributo

async
tiene muchas similitudes con el atributo
defer
. También es booleano, y solamente se puede utilizar en scripts externos.
La diferencia fundamental con respecto al anterior es que el script se carga en paralelo al análisis de la
página y se ejecuta tan pronto como esté disponible, de manera que si el script está descargado por
completo, el análisis de la página se interrumpe, se ejecuta el script y luego continúa el resto de la
página.

<script src="script.js" async></script>

1/2
Modos de ejecutar un script externo
Podemos encontrarnos varios modos de ejecutar un script externo:

Si en la etiqueta
<script>
aparece el atributo
async
, la secuencia de comandos se ejecuta mientras la página está analizando, es decir, de manera
asíncrona.
Si en la etiqueta <script> aparece el atributo
defer
, el script se ejecuta cuando la página ha terminado de analizarse.
Si no hay ninguno de los dos, el script se ejecuta inmediatamente, antes de que el navegador
analice la página.

Y para verlo de una manera super gráfica os dejo este gráfico de la web
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html que no tiene desperdicio:

Fuente: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

2/2