Curso HTML 14.2 Atributos defer y async: concepto y uso básico

Concepto general: carga de scripts en HTML

Cuando el navegador encuentra un elemento <script> sin atributos especiales, detiene la construcción del DOM, descarga el script, lo ejecuta inmediatamente y
luego reanuda el parseo de la página. Esto puede bloquear la representación visual y la interactividad. Para evitar este bloqueo y mejorar el rendimiento se introdujeron
los atributos async y defer.

Atributo async

async es un atributo booleano que indica al navegador:

• Descarga el script en paralelo al parseo del HTML.
• Cuando finaliza la descarga, interrumpe inmediatamente el parseo del documento para ejecutarlo.
• No garantiza el orden de ejecución entre varios scripts con async. Cada uno se ejecuta cuando su descarga termina.

Usos típicos:

• Carga de bibliotecas de terceros independientes (p.ej., estadísticas, publicidad).
• Scripts que no dependen de otros ni son primordiales para la interacción inicial.

Ejemplo básico de async

  <!-- Descarga concurrente, ejecución ante descarga completa, sin orden garantizado -->
  <script src='analytics.js' async></script>
  <script src='widget.js' async></script>
  <!-- Si widget.js termina antes, se ejecuta antes, aunque esté más abajo en el HTML -->
  

Atributo defer

defer también descarga en paralelo, pero difiere de async en que:

• La ejecución se retrasa hasta después de que se ha parseado todo el documento (antes del evento DOMContentLoaded).
• Mantiene el orden de ejecución: los scripts con defer se ejecutan en el mismo orden en que aparecen en el HTML.

Usos típicos:

• Bibliotecas propias de la página que dependen unas de otras.
• Scripts que manipulan el DOM y necesitan que esté completamente construido.

Ejemplo básico de defer

  <!-- Descarga concurrente, ejecución tras parse completo, orden garantizado -->
  <script src='lib1.js' defer></script>
  <script src='lib2.js' defer></script>
  <script src='app.js'  defer></script>
  <!-- Se ejecutarán lib1.js, luego lib2.js, luego app.js, justo antes de DOMContentLoaded -->
  

Comparativa práctica

Aspectos avanzados y compatibilidad

• Ambos atributos solo aplican a scripts con src. Si se usan en scripts inline, serán ignorados.
• El atributo defer siempre retrasa la ejecución hasta DOMContentLoaded, por eso es ideal para acceso al DOM.
• async no garantiza DOMContentLoaded sincronizado con la ejecución de todos los scripts; un DOMContentLoaded puede dispararse antes de que algún async restante termine.
• En navegadores antiguos (IE pre-10) defer funciona solo para <head> y puede tener inconsistencias; async fue estandarizado más tarde.

Conclusión

Emplear async y defer adecuadamente mejora drásticamente el rendimiento al evitar bloqueos innecesarios.
– Usar async para scripts independientes que no requieran orden.
– Usar defer para scripts que dependan del DOM o de otras librerías, manteniendo el orden de ejecución.

La elección correcta acelera la carga y mejora la experiencia de usuario.