Simulador de carga de scripts (async vs defer)
Visualiza en una línea de tiempo cómo async y defer afectan al parseo del HTML y a la ejecución del script
Una herramienta visual para entender de un vistazo por qué tus scripts frenan la carga de la página. Mueve los deslizadores y observa en la línea de tiempo cómo se solapan el parseo del HTML, la descarga y la ejecución del script, y en qué momento exacto se produce el bloqueo.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Arrastra los deslizadores para fijar el tiempo de parseo del HTML, el de descarga del script y el de ejecución.
- Comprueba la diferencia que supone colocar un script normal dentro del head o al final del body.
- Compara en tiempo real cómo cambia el gráfico de bloqueo del parseo con cada una de las tres opciones: Standard, Async y Defer.
Preguntas frecuentes
- ¿Cuál es la diferencia de fondo entre async y defer?
- Los dos descargan el script en paralelo al parseo del HTML. La diferencia está en cuándo se ejecuta: async lo hace en cuanto termina la descarga, interrumpiendo el parseo; defer espera a que el HTML esté completamente parseado antes de ejecutarlo.
- ¿Qué uso si varios scripts deben ejecutarse en orden?
- Con async el orden depende de cuál termine de descargarse antes, así que es peligroso si hay dependencias entre ellos. defer garantiza que se ejecuten en el mismo orden en que aparecen las etiquetas en el HTML, por eso es el recomendado cuando una librería depende de otra.
- ¿En qué se diferencia un script cargado con type='module' de las opciones async/defer?
- Los navegadores tratan los scripts de módulo como diferidos por defecto: no bloquean el análisis del documento y su ejecución espera a que termine de analizarse, igual que con el atributo defer. Si además añades el atributo async, el script de módulo pasará a ejecutarse en cuanto termine de descargarse, igual que un script async normal.