El Atributo DEFER

Se utiliza en la etiqueta script para controlar cómo se carga y ejecuta un archivo JavaScript externo.

El atributo defer en HTML se utiliza en la etiqueta <script> para controlar cómo se carga y ejecuta un archivo JavaScript externo. Su objetivo principal es optimizar el rendimiento de una página web al evitar el bloqueo del análisis del HTML mientras se descarga el script. Aquí un tutorial detallado:

¿Qué hace defer?

  • Descarga asíncrona: El navegador descarga el script en segundo plano sin detener la construcción del DOM.

  • Ejecución diferida: El script se ejecuta después de que el HTML esté completamente parseado, en el orden en que aparecen en el documento.

  • No bloqueante: Permite que el contenido de la página se muestre antes de ejecutar el script.

Sintaxis Básica

<script src="tu-script.js" defer></script>

  • Solo aplica a scripts externos (con src).

  • No tiene valor (defer es un atributo booleano).

Comparación con async

Atributo Descarga Ejecución Orden
Sin atributo Bloquea el HTML Inmediata (detiene el HTML) En orden de aparición
async En paralelo Inmediata al terminar la descarga Aleatorio
defer En paralelo Tras parsear todo el HTML En orden de aparición

Casos de Uso Prácticos

Ejemplo 1: Scripts que dependen del DOM

Si tu script necesita manipular elementos HTML (ej: un carrusel de imágenes), usa defer para asegurar que el DOM esté listo:

<!DOCTYPE html>
<html>
<head>
  <script src="carrusel.js" defer></script> <!-- Se ejecuta después del DOM -->
</head>
<body>
  <div class="carrusel">...</div>
</body>
</html>

Ejemplo 2: Múltiples scripts en orden

Los scripts con defer se ejecutan en el orden de aparición:

<script src="jquery.js" defer></script>
<script src="plugin.js" defer></script> <!-- Ejecuta primero jquery.js, luego plugin.js -->

Beneficios Clave

  • Mejor rendimiento: La página se muestra más rápido al evitar bloqueos.

  • Orden predecible: Útil para scripts que dependen de otros (ej: librerías como jQuery y plugins).

  • Compatibilidad con eventos del DOM: Ejecuta scripts antes del evento DOMContentLoaded.

Errores Comunes

Error 1: Usar defer en scripts sin src

<!-- Incorrecto -->
<script defer>
  console.log("¡Hola!"); // No funciona, defer solo aplica a scripts externos
</script>

Error 2: Mezclar async y defer

<!-- Incorrecto: Comportamiento impredecible -->
<script src="script.js" async defer></script>

¿Cuándo NO usar defer?

  • Scripts críticos: Si un script debe ejecutarse inmediatamente (ej: analíticas que miden el tiempo de carga).

  • Scripts que modifican el DOM de forma urgente: Aunque en la mayoría de casos defer es seguro.

Soporte en Navegadores

  • Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan defer.

  • IE9+: Compatible, pero con posibles inconsistencias en el orden de ejecución.

Buenas Prácticas

  • Prioriza defer sobre async cuando el orden de ejecución importe.

  • Evita scripts bloqueantes: Usa defer o async siempre que sea posible.

  • Prueba en múltiples navegadores: Verifica que el orden de ejecución se mantenga.

Conclusión

El atributo defer es esencial para optimizar la carga de páginas web, especialmente en proyectos con múltiples scripts. Al usarlo correctamente, garantizas una experiencia de usuario más rápida y consistente.