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.
