¿Qué 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> 

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:

¿Conocías estos dos atributos? 😉

---