Atributo async de HTML
El atributo async es un atributo boolean que indica que el script se ejecutará de forma asíncrona. Aprende en qué elemento se puede usar.
El atributo async es un atributo boolean que se usa en el elemento <script>. Le indica al navegador que descargue un script externo sin pausar el análisis del HTML y que ejecute ese script en cuanto termine la descarga.
Solo funciona con scripts externos, por lo que debe combinarse con el atributo src. Añadir async a un script en línea (aquel con JavaScript escrito directamente entre las etiquetas) no tiene efecto: el navegador lo ignora.
Por qué importa async
Normalmente, cuando el navegador encuentra una etiqueta <script src="..."> simple, detiene el análisis del HTML, descarga el archivo, lo ejecuta y solo entonces continúa construyendo la página. En una conexión lenta, esto bloquea el renderizado y hace que la página se sienta lenta.
async elimina la descarga de la ruta crítica: el navegador sigue analizando y construyendo la página mientras el script se obtiene en segundo plano. El resultado es una carga de scripts más rápida y sin bloqueos.
async vs defer vs ninguno
Un script externo puede cargarse de tres maneras. La diferencia está en cuándo se descarga y cuándo se ejecuta en relación con el análisis del HTML.
| Comportamiento | Descarga | Ejecución | ¿Orden preservado? |
|---|---|---|---|
| Ninguno (por defecto) | Bloquea el análisis | Inmediatamente, antes de continuar el análisis | Sí |
async | En paralelo, sin bloqueos | En cuanto el archivo esté listo (puede interrumpir el análisis) | No |
defer | En paralelo, sin bloqueos | Tras completar el análisis, antes de DOMContentLoaded | Sí |
<!-- Blocks parsing until downloaded and run -->
<script src="example.js"></script>
<!-- Downloads in parallel, runs the moment it arrives -->
<script src="example.js" async></script>
<!-- Downloads in parallel, runs after the HTML is fully parsed -->
<script src="example.js" defer></script>Puntos clave:
- Usa
asyncpara scripts independientes que no dependen de la página ni de otros scripts (analíticas, etiquetas de anuncios, rastreadores). - Usa
defercuando el script necesite el DOM completo, o cuando varios scripts deban ejecutarse en un orden fijo. - Un
<script type="module">está diferido por defecto, por lo que no es necesario añadirledefer; añadirasynca un módulo hace que se ejecute en cuanto se cargue.
El orden no está garantizado con async
Con async, los scripts se ejecutan en el orden en que terminan de descargarse, no en el orden en que aparecen en el HTML. Esto rompe cualquier script que dependa de otro.
<!-- BAD: jquery.js may finish AFTER app.js, so $ is undefined when app.js runs -->
<script src="jquery.js" async></script>
<script src="app.js" async></script>Si el segundo script depende del primero, usa defer en su lugar: los scripts diferidos siempre se ejecutan de arriba hacia abajo:
<!-- GOOD: jquery.js is guaranteed to run before app.js -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script>Sintaxis
<script src="example.js" async></script>Ejemplo del atributo async de HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="example.js" async></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p>
A browser that doesn’t support JavaScript will display the content inside the noscript element.
</p>
<script>
document.write("My first JavaScript example!")
</script>
</body>
</html>