Javascript Asíncrono - Mejora el tiempo de ejecución

Un problema habitual en las páginas web es el bloqueo que genera la ejecución del Javascript sobre el HTML. Esto se debe a que el navegador ejecuta todos los elementos de la web secuencialmente (si no se lo indicamos de otra manera). Esto afecta tanto a la velocidad de la carga como a la experiencia del usuario que lo está experimentando. HTML5 nos proporciona las etiquetas "async" y "defer", dos etiquetas que nos permiten flexibilizar la ejecución.

Compatibilidad de defer con los navegadores:

 

Compatibilidad de async con los navegadores:

 

Vamos a ver los diferentes tipos de ejecución. Este sería una ejecución secuencial:

 

La ejecución del HTML se corta para descargar y ejecutar el Javascript.

El uso de defer sería el siguiente:

 

Esta etiqueta nos permite recuperar el Javascript y ejecutarlo después del HTML. Lo cual ya nos ahorra la espera de recuperar el Javascript.

El uso de async sería el siguiente:

 

Esta etiqueta cortaría el proceso de ejecución del HTML para proceder solamente a la ejecución del Javascript. Esto, al igual que en la etiqueta anterior, nos ahorra tiempo de recuperación pero se ejecuta seguidamente.

Estas etiquetas nos solucionan el problema del tiempo de ejecución, y además incluyen algo a tener en cuenta, y es que, no podemos restarle importancia a la prioridad de ejecución de los Javascript, ya que podríamos ejecutar un JQuery antes de importar su librería. Esto sería una mala práctica que se soluciona dando prioridad a unos Javascript sobre otros.

La visualización de la carga de la página también cambiará. Dando lugar a una carga de la página por partes. Lo cual no es bonito a la vista del usuario ni del diseñador... Una solución a esto puede ser cargar un primera vista de la página e ir cambiándola con la ejecución de los Javascript poco a poco de forma controlada.

Realmente, estas etiquetas nos dan la ventaja de poder controlar los tiempos de ejecución de nuestra web. Pero un uso erróneo puede empeorar la apariencia y la experiencia.

Encuentra ayuda

¿Te queda alguna duda?

Hostingato ® 2022. Marca registrada.

Las cookies son importantes para ti, influyen en tu experiencia de navegación. Usamos cookies técnicas y analíticas. Puedes consultar nuestra Política de cookies. Al hacer click en "Aceptar", consientes que todas las cookies se guarden en tu dispositivo o puedes configurarlas o rechazar su uso pulsando en "Configurar".

Aceptar Configurar