CUÁNDO USAR SCRIPT ASYNC Y DEFER | DIFERENCIAS

Vamos a cuestionar una cosa muy simple:
¿Qué es mejor usar script async o defer?

Recordando qué pasa con <script>

A la hora de cargar un script de la forma estándar de toda la vida, lo que pasará es que el navegador irá cargando y renderizando nuestro sitio HTML.
Luego hará una pausa para descargar y ejecutar el recurso solicitado y después seguirá renderizando la página.
Eso está muy mal, porque el usuario no tiene ganas de esperar siete horas ni siete segundos para que se cargue la página y todos los scripts que hay de por medio.

Cómo cargar scripts sin interrumpir el renderizado

Tenemos dos alternativas: async y defer.

Async

Añadiendo el atributo async a la etiqueta script, lo que hará el navegador es descargar el recurso y pausar el renderizado solo cuando el recurso haya sido descargado por completo.
Super inteligente.
Curiosidad: async viene de asíncrono, una forma elegante de decir “cuando pueda ser, sin prisas”.

Defer

Usando el atributo defer en la etiqueta script estaremos ordenando al navegador a renderizar todo el asunto antes de ponerse a ejecutar el script solo cuando el renderizado del HTML esté terminado.

Diferencias entre async y defer

Pues básicamente ya te las he explicado pero mira estas imágenes que representa el orden de renderizado HTML, descarga del script y ejecución del script.
Representamos:

• En verde el “parseo” o renderizado HTML.
• En gris la pausa de renderizado.
• En azul la descarga del recurso.
• En rojo la ejecución del script.

Vamos a ver cómo es en cada caso:
Con <script>:

Con <script async>:

Con <script defer>:

Bien.

Cuándo usar async o defer

Lo más normal es que quieras usar el atributo async.
El defer se usa solo cuando un script depende de otro y es importante el orden en el que se ejecutan.
Espero que te haya sido útil esta información, si necesitas más mira estos recursos para desarrolladores web.