Que es la carga asíncrona de Javascript

En este Tutoriales En Linea, no voy a hablar únicamente del atributo async, sino que voy a intentar explicar qué es esto de la carga síncrona o asíncrona de jаvascript y por qué nos tenemos que preocupar por ello.

¿Qué es la carga síncrona de jаvascript?

Cada vez que incluyes un fichero o código jаvascript en tu HTML, estás incluyendo un código que se carga de forma síncrona.

Cuando un navegador carga una página web, entre otras cosas, va recibiendo el código fuente HTML a mostrar. A medida que lo va recibiendo, lo lee y procesa. Cuando llega a un fichero jаvascript, el navegador detiene la lectura y procesamiento del HTML, hasta que el navegador descarga el fichero jаvascript y lo ejecuta. Una vez concluye este proceso, continuará la carga de la página.


Cuando el código jаvascript es escaso, tiene poca importancia, pero si estás trabajando en una webapp o una página compleja, es habitual que tengas varias librerías de jаvascript además de tu propio código, que utiliza dichas librerías… y ahí es dónde empezarían los problemas, seguro que te suenan:

Durante muchos segundos el navegador aparece cargando y la página totalmente blanca. La página va cargando “a trozos”, de forma que poco a poco y como con retardo, van apareciendo los contenidos de la página, sin formato, y paulatinamente se va reestructurando hasta que al final se ve como debe ser.

Esto ocurre porque el DOM no está disponible al 100% hasta que el navegador ha descargado y procesado el contenido del código HMTL (las etiquetas, el CSS, los jаvascript…ETC...)

¿Qué es la carga asíncrona de jаvascript?

Para solucionar los daños colaterales que tiene la carga síncrona de jаvascript, en HTML tenemos el atributo async, para indicar al navegador que el código jаvascript de esa línea, se tiene que cargar de forma asíncrona, por lo que ese código jаvascript se descargará de forma paralela, sin detener la carga de la página, y se ejecutará nada más estar disponible.

De esta forma, el código jаvascript no bloquea la carga del DOM y, por lo tanto, la página está disponible mucho antes evitando la eterna página en blanco o la carga a trozos.

Ejemplo de web con carga síncrona de jаvascript

<script type="text/jаvascript" src="js/tutorialesenlinea.js"></script>

Ejemplo de web con carga síncrona de jаvascript

<script type="text/jаvascript" src="js/tutorialesenlinea.js" async="async"></script>

Definición y uso

El atributo asíncrono es un atributo booleano. Cuando está presente, especifica que la secuencia de comandos se ejecutará de forma asíncrona tan pronto como esté disponible.

Nota: el atributo asíncrono es solo para scripts externos (y solo debe usarse si el atributo src está presente).
Nota: Hay varias formas de ejecutar un script externo:

• Si async está presente: el script se ejecuta de forma asincrónica con el resto de la página (el script se ejecutará mientras la página continúa el análisis)
• Si async no está presente y el aplazamiento está presente: el script se ejecuta cuando la página ha finalizado el análisis
• Si no está presente ni async ni diferido: el script se recupera y ejecuta inmediatamente, antes de que el navegador continúe analizando la página. Desde w3schools...

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.