¿Qué hacen los atributos async y defer en las etiquetas «script»?

Los atributos async y defer se utilizan en las etiquetas <script> que enlazan a archivos JavaScript externos (<script src="ruta/al/script.js">) y sirven para controlar cómo y cuándo se descargan y ejecutan dichos scripts, con el objetivo principal de mejorar el rendimiento de carga de la página y la experiencia del usuario.

Comportamiento por Defecto de los Scripts (sin async ni defer)

Para entender la utilidad de async y defer, primero veamos qué ocurre sin ellos:

1. El navegador comienza a analizar (parsear) el código HTML de tu página de arriba abajo.
2. Cuando encuentra una etiqueta <script src="..."></script>: a. Detiene el análisis del HTML. b. Descarga el archivo JavaScript desde la red. c. Una vez descargado, ejecuta el script JavaScript. d. Solo después de que el script ha terminado de ejecutarse, el navegador reanuda el análisis del HTML. Este comportamiento se conoce como «bloqueo del parser» («parser-blocking»). Si el script es grande o la conexión de red es lenta, la página puede tardar mucho en mostrarse completamente, ya que el navegador está esperando.

Atributo async

El atributo async (asíncrono) modifica este comportamiento de la siguiente manera:

• Descarga Asíncrona: El navegador descarga el archivo JavaScript de forma asíncrona, es decir, en paralelo, mientras continúa analizando el resto del HTML. El análisis del HTML no se detiene durante la descarga del script.
• Ejecución Inmediata (y Bloqueante): Tan pronto como el script async se descarga por completo, el análisis del HTML se pausa y el script se ejecuta inmediatamente.
• Sin Orden Garantizado: Si tienes varios scripts con el atributo async, no hay garantía del orden en que se ejecutarán. Se ejecutarán en el orden en que terminen de descargarse, no necesariamente en el orden en que aparecen en el HTML.
• Uso: Ideal para scripts independientes que no dependen de otros scripts para su ejecución ni necesitan modificar el DOM tan pronto como se cargan (por ejemplo, scripts de analíticas, publicidad, o algunos widgets de redes sociales).

Ejemplo:

HTML

<script async src="scripts/analiticas.js"></script>
<script async src="scripts/publicidad.js"></script>
Lenguaje del código: PHP (php)

Atributo defer

El atributo defer (diferido) también modifica el comportamiento de carga y ejecución:

• Descarga Asíncrona: Al igual que async, el navegador descarga el archivo JavaScript de forma asíncrona, sin bloquear el análisis del HTML.
• Ejecución Diferida (Después del Análisis del HTML): La ejecución del script se difiere (pospone) hasta que el navegador haya terminado de analizar completamente todo el documento HTML (es decir, justo antes de que se dispare el evento DOMContentLoaded).
• Orden de Ejecución Garantizado: Si tienes varios scripts con el atributo defer, se ejecutarán en el orden en que aparecen en el documento HTML. Esto es muy útil si un script depende de otro.
• Acceso Completo al DOM: Dado que los scripts defer se ejecutan después de que todo el HTML ha sido analizado, pueden acceder y manipular de forma segura cualquier elemento del DOM.
• Uso: Es una excelente opción para la mayoría de los scripts que no son críticos para el primer renderizado de la página y que pueden necesitar interactuar con el DOM completo. Muchos desarrolladores lo consideran una opción más segura y predecible que async para la mayoría de los casos de uso.

Ejemplo:

HTML

<script defer src="scripts/libreria-jquery.js"></script>
<script defer src="scripts/mi-script-que-usa-jquery.js"></script>
Lenguaje del código: PHP (php)

Diferencias Clave en Resumen

Importante:

• async y defer son atributos booleanos; no necesitan un valor (simplemente <script async src="...">).
• Solo tienen efecto en scripts externos (los que usan el atributo src). No afectan a los scripts en línea (código JavaScript escrito directamente entre las etiquetas <script>...</script>).

Elegir entre async, defer, o ninguno, dependerá de las necesidades específicas de cada script: si es independiente, si necesita acceder al DOM inmediatamente, si depende de otros scripts, y lo crítico que es para la carga inicial de la página. Usarlos correctamente es una técnica clave para la optimización del rendimiento web.