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.
