Atributo defer de HTML
El atributo defer de HTML indica que un script se ejecuta cuando la página termina de analizarse. Aprende cómo usarlo en el elemento <script>.
El atributo defer de HTML es un atributo boolean en el elemento <script> que indica al navegador que descargue el script en paralelo con el análisis del HTML, pero que espere y lo ejecute solo después de que toda la página haya terminado de analizarse — justo antes de que se dispare el evento DOMContentLoaded.
Solo funciona con scripts externos: tiene efecto únicamente cuando el atributo src está presente y se ignora en scripts en línea (un <script> cuyo JavaScript se encuentra entre las etiquetas).
Por qué existe el atributo defer
Un <script src="..."> ordinario bloquea el renderizado. Cuando el analizador lo encuentra, detiene la construcción de la página, descarga el archivo, lo ejecuta y solo entonces continúa. Si el script está en el <head>, el usuario ve una página en blanco hasta que carga.
La solución clásica era colocar las etiquetas <script> al final del <body>, para que el HTML se analizara primero. defer hace que ese truco sea innecesario: puedes mantener tus scripts en el <head> (bueno para la legibilidad y para que el navegador los descubra y descargue antes), mientras el script sigue ejecutándose solo después de que el DOM esté completamente construido. Como el DOM está garantizado como listo, los scripts diferidos pueden consultar elementos de forma segura sin envolver todo en un listener de DOMContentLoaded.
defer vs async
Tanto defer como async permiten al navegador descargar el script en segundo plano sin bloquear el análisis del HTML. La diferencia está en cuándo y en qué orden se ejecutan los scripts:
| Comportamiento | defer | async |
|---|---|---|
| Bloquea el análisis del HTML durante la descarga | No | No |
| Cuándo se ejecuta el script | Tras completar el análisis, justo antes de DOMContentLoaded | En cuanto termina de descargarse (puede interrumpir el análisis) |
| Orden de ejecución con otros scripts | Preservado — se ejecuta en el orden del documento | No garantizado — el primero en descargarse se ejecuta primero |
| DOM garantizado como listo | Sí | No |
Usa defer cuando los scripts dependen del DOM o entre sí (el orden importa). Usa async para scripts independientes y autosuficientes, como los de analíticas o etiquetas de anuncios, donde el orden no importa y quieres que cada uno se ejecute en cuanto llegue.
Si ni async ni defer están presentes, el script se obtiene y ejecuta de inmediato, bloqueando el analizador en ese punto.
En HTML 4.01 el comportamiento de defer dependía de la implementación, mientras que HTML5 lo estandarizó. En XHTML, defer debe escribirse como <script defer="defer"> porque la minimización de atributos está prohibida.
Sintaxis
<script src="example.js" defer></script>Ejemplo del atributo defer de HTML
El script de abajo se coloca en el <head>, pero como es diferido solo se ejecuta después de que el párrafo existe en el DOM — por lo que document.getElementById lo encuentra:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
defer
></script>
<noscript>Sorry, your browser doesn't support JavaScript!</noscript>
</head>
<body>
<h1>Example</h1>
<p id="demo">Waiting for the deferred script...</p>
<script defer>
// This deferred external script (jQuery) is already loaded,
// and the DOM is fully parsed, so the line below works.
document.getElementById("demo").textContent =
"jQuery version " + jQuery.fn.jquery + " ran after parsing.";
</script>
</body>
</html>Nota:
deferen el<script>en línea anterior se ignora — los scripts en línea siempre se ejecutan en su lugar. Aquí funciona solo porque es el último elemento y el script externo diferido ya ha terminado. Para garantizar que una biblioteca externa diferida esté cargada antes que tu propio código, mueve también tu código a su propio archivodeferexterno, ya que los scripts diferidos se ejecutan en el orden del documento.