Otra de las maravillas por las que tendríamos que empezar a utilizar HTML 5 en nuestros desarrollos web es el atributo async para nuestros scripts.
Cuando nuestra aplicación depende de la ejecución de ficheros externos puede suponer que su velocidad de carga se vea involucrada por su poder bloqueante, además de ver comprometida la experiencia de usuario.
Además de otras buenas prácticas que implican la reducción de estos archivos para que su contenido sea menor y por ello un tiempo inferior dedicado a su procesamiento (uniendo varios archivos en uno, ofuscando, minimizando los mismos eliminando espacios, comentarios en modo release, posicionando los mismos al final de la página, etcétera) podemos hacer uso además de este atributo.

La ejecución de un script convencional, sin atributo async, es que la página comience a ejecutarse (cargarse) y el código HTML se vea bloqueado mientras el script se esté ejecutando.

¿Qué es lo que nos permite el atributo async?

Como su propio nombre indica, podremos especificar que dicho archivo pueda ser ejecutado de manera asíncrona, sin que el código HTML se vea bloqueado por su presencia 🙂 La forma de utilizarlo sería de la siguiente manera:

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

Diferencia entre async y defer

El atributo defer (desarrollado en Internet Explorer 4 y posteriormente añadido dentro de las especificaciones de HTML 4) lleva utilizándose más tiempo y nos permite indicar que el script se ejecutará una vez se haya cargado el resto de la página. Sin embargo, async se ejecutará sin bloquear el resto de descargas que pudieran existir en paralelo, aunque el DOM no haya terminado de cargarse por completo, lo cual significa que el propio script podría estar disponible antes que la página, cosa que en ocasiones no debe suponer un inconveniente. Por lo que podríamos resumir:

• script sin atributos: se ejecutará inmediatamente, bloqueando el parseo del resto del documento. Es por ello que es muy buena práctica posicionar los mismos al final de la página, con el objetivo de que no bloqueemos el resto de los elementos que quedan por cargar.
• script y defer: se ejecutará una vez que el resto del documento haya sido parseado.
• script y async: se ejecutará mientras el resto del documento termina de parsearse, de manera asíncrona.

Defer se asigna de forma similar que el atributo async:

<script defer src="script.js"></script>

¿Cómo podemos detectar si async está soportado?

La forma de poder conocer si este atributo se tendrá en cuenta o no por nuestro navegador es a través de la siguiente consulta:

if (typeof script.async == "undefined") {
    //not supported
}

Por otro lado, os facilito la información recogida por canIuse sobre este atributo. Otra página digna de ver es HTML 5 Async Scripts en IE Test Drive.

Espero que haya sido de utilidad.

¡Saludos!