El Atributo ASYNC

Es útil para optimizar el rendimiento de las páginas web. Al permitir la carga asíncrona de los scripts.

El atributo async se utiliza en la etiqueta <script> para cargar y ejecutar scripts de forma asíncrona, mejorando el rendimiento y la velocidad de carga de una página web. Este atributo es clave para optimizar la carga de recursos externos (como archivos JavaScript) sin bloquear el análisis del HTML. A continuación, te explicamos cómo usarlo correctamente.

¿Qué hace el atributo `async`?

Carga el script en segundo plano mientras el navegador sigue analizando el HTML.
Ejecuta el script inmediatamente después de que se descargue (sin esperar a que el HTML termine de cargarse).
No garantiza el orden de ejecución: Si hay múltiples scripts async, pueden ejecutarse en cualquier orden (el que se descargue primero).

Sintaxis básica

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

¿Cuándo usar `async`?

Ideal para scripts que no dependen del DOM o de otros scripts. Ejemplos comunes:

Analíticas web (Google Analytics, Hotjar).
Publicidad (Google AdSense).
Widgets sociales (botones de compartir).
Scripts de rendimiento (lazy loading, prefetching).

Ejemplos prácticos

Script de analíticas

<!-- Google Analytics con async -->
<script 
  async 
  src="https://www.googletagmanager.com/gtag/js?id=TU_ID"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TU_ID');
</script>

Carga de un script externo

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

Comparación: `async` vs `defer`

Atributo	Carga	Ejecución	Orden
Sin atributo	Bloquea el HTML	Inmediata (antes de renderizar)	Según aparición en el HTML
`async`	No bloqueante (paralela)	Inmediata al terminar descarga	Sin orden garantizado
`defer`	No bloqueante (paralela)	Tras analizar todo el HTML	Según aparición en el HTML

Mejores prácticas

Usa `async` para scripts independientes:

Si el script no necesita acceder al DOM ni depende de otros scripts, async es ideal.

Evita `async` en scripts críticos:

Si el script es esencial para el renderizado inicial (ej: un framework como React), usa defer o carga el script normalmente.

No uses `async` en scripts con dependencias:

Si el script A depende del script B, no uses async, ya que no se garantiza el orden de ejecución.

Combina con `nomodule` para compatibilidad:

Para navegadores antiguos que no soportan módulos ES6:

<script src="moderno.js" type="module" async></script>
<script src="legacy.js" nomodule async></script>

Errores comunes

Usar `async` en scripts que modifican el DOM:

Si el script necesita elementos HTML que aún no se han cargado, puede fallar.

<!-- Riesgo: El script podría ejecutarse antes de que exista #miElemento -->
<script src="script.js" async></script>
<div id="miElemento"></div>

Asumir orden de ejecución:

Dos scripts con async pueden ejecutarse en orden aleatorio:

<script src="a.js" async></script>
<script src="b.js" async></script> <!-- Puede ejecutarse antes que a.js -->

Compatibilidad

Navegadores modernos: Todos soportan async (Chrome, Firefox, Safari, Edge).
Internet Explorer: Soporte desde IE10+.

Ejemplo avanzado: Carga asíncrona de scripts dinámicos

Puedes añadir scripts con async mediante JavaScript:

const script = document.createElement('script');
script.src = 'mi-script.js';
script.async = true;
document.body.appendChild(script);

Conclusión

El atributo async es una herramienta poderosa para:

Mejorar el rendimiento de carga de la página.
Evitar bloqueos en el renderizado inicial.
Optimizar scripts no críticos (analíticas, publicidad).

Ejemplo final:

<!DOCTYPE html>
<html>
<head>
  <!-- Scripts no críticos cargados con async -->
  <script async src="https://widgets.example.com/social.js"></script>
  <script async src="https://www.google-analytics.com/analytics.js"></script>
</head>
<body>
  <!-- Contenido de la página -->
  <script src="script-critico.js"></script> <!-- Script crítico sin async -->
</body>
</html>

¡Usa async estratégicamente para equilibrar velocidad y funcionalidad!

¿Qué hace el atributo async?