Los atributos async y defer
Cargue scripts sin bloquear el análisis del HTML
Los atributos async y defer es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Comportamiento predeterminado de script
Un <script src="..."> normal, sin async ni defer, bloquea el análisis del HTML mientras se descarga y se ejecuta. El renderizado de todo lo que está debajo del script se pausa; por eso tradicionalmente los scripts se colocaban al final de <body>.
async descarga en paralelo
<script async src="..."> descarga el script en paralelo con el análisis del HTML y lo ejecuta en cuanto llega. La ejecución sigue pausando el análisis del HTML, pero solo brevemente: el script no bloquea la descarga de otros recursos.
El orden de ejecución de async es impredecible
Dos scripts async se ejecutan en el orden en que terminan de descargarse. Nunca use async para scripts que dependan unos de otros (jQuery antes que un plugin de jQuery), porque la dependencia podría ejecutarse antes de que el requisito previo esté disponible.
defer espera al HTML
<script defer src="..."> se descarga en paralelo, como async, pero su ejecución se retrasa hasta que el HTML se ha analizado por completo, justo antes del evento DOMContentLoaded. El script nunca bloquea el análisis.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer conserva el orden
Varios scripts defer se ejecutan en el orden en que se declaran, igual que los scripts normales colocados al final de body. Esto hace que defer sea la opción adecuada para scripts dependientes: las utilidades se cargan antes que los consumidores sin necesidad de orquestación manual.
Elegir entre async y defer
Use async para fragmentos independientes de terceros (analítica, anuncios) que no interactúen con el DOM ni tengan dependencias. Use defer para el código de su propia aplicación que necesite el DOM y dependa de otros scripts.
Los módulos se difieren de forma predeterminada
<script type="module"> se comporta automáticamente como defer: se descarga en paralelo, se ejecuta después del análisis y conserva el orden. Añadir defer a un módulo está permitido, pero es redundante; añadir async hace que vuelva a comportarse como async.
Los scripts insertados ignoran async y defer
async y defer solo se aplican a scripts externos (con src). Una etiqueta <script> insertada se ejecuta inmediatamente independientemente de los atributos, por lo que estos se ignoran silenciosamente en <script>console.log(1)</script>.
La ubicación es menos importante
Con defer (o con módulos), las etiquetas <script> pueden estar en <head> sin bloquear el análisis; además, colocarlas allí permite que el navegador las descubra y empiece a descargarlas antes que si estuvieran al final de <body>.
<head>
<script defer src="app.js"></script>
</head>Combinar con preload
Para scripts sensibles a la latencia, combine <link rel="preload" as="script" href="..."> en head con un <script> diferido más abajo. La precarga inicia la descarga inmediatamente, mientras que defer garantiza que el orden de ejecución siga siendo correcto.
Error habitual
Marcar un script como async sin comprobar que no tenga ninguna dependencia es la causa más habitual de las condiciones de carrera del tipo «funciona en mi máquina, falla en producción». Si tiene dudas, prefiera defer: es permisivo, mientras que async no perdona los errores.
Comprobación de conocimientos
¿Cuál es la diferencia entre async y defer para dos scripts cuando el segundo depende del primero?
Resumen
async y defer descargan los scripts en paralelo con el análisis del HTML. async se ejecuta inmediatamente al llegar, en un orden impredecible; úselo para fragmentos independientes de terceros. defer se ejecuta después del análisis y en el orden de declaración; úselo para código de aplicación con dependencias. Los módulos utilizan defer de forma predeterminada.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Los atributos async y defer» es gratis?
Sí — el texto completo de «Los atributos async y defer» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Los atributos async y defer»?
Cargue scripts sin bloquear el análisis del HTML Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Los atributos async y defer»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Los atributos async y defer
- Preload, prefetch y preconnect
- Carga diferida de imágenes: loading=lazy
- Sugerencias de recursos: modulepreload