JavaScript Defer vs Async

Hoy por hoy la mayoría de las páginas HTML que se construyen incluyen diversos framework JavaScript que han evolucionado con el tiempo. Sin embargo hasta ahora la forma de usar la etiqueta "script" no ha variado. A partir de HTML5 están disponibles dos nuevos atributos para cargar los scripts: "async" y "defer". Ambos aportan flexibilidad al código que se construya.

JavaScript clásico

Cuando se carga el JavaScript de forma natural, pueden existir problemas de rendimiento ya que el documento HTML se parsea hasta que se encuentra la etiqueta de script. En ese punto todo se detiene y el navegador se encarga de descargar el script y ejecutar lo que corresponda.

Realizada dicha operación el parseo de HTML seguirá su curso. Esto en algunas situaciones hace que el usuario perciba lentitud al cargarse la página. El script actúa de forma bloqueadora.

JavaScript defer

Si se carga la librería de JavaScript usando el atributo defer la situación cambia.

<script defer src="milibreria.js">

El navegador podrá seguir parseando y presentando partes de la página mientras se descarga el fichero de JavaScript.

Esto dará una sensación de mayor velocidad al usuario. El script se ejecutará una vez finalizada la carga de la página.

JavaScript async

Async como su nombre indica implica que la carga del script será totalmente asíncrona.

<script async src="milibreria">

Esto permite que el navegador cargue y ejecute el script en paralelo, sin esperar que la página termine de cargar.

Esto nos puede ayudar en algunas ocasiones pero hay que gestionarlo con cuidado ya que ni siquiera el DOM estará disponible.

En GenBeta Dev:JavaScript Objetos y literales