jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas HTML

Gratis Constructor de estrategia de carga de script

Genera etiquetas script con la estrategia correcta — normal, defer, async o type module.

Cargando herramienta...

Qué es Constructor de estrategia de carga de script?

Como se carga un script afecta el rendimiento de la pagina y el orden de ejecucion de los scripts. Un script normal bloquea el analisis HTML. defer descarga en paralelo y ejecuta despues del analisis HTML. async descarga en paralelo y ejecuta tan pronto como esta listo. Los scripts type='module' se difieren por defecto. Elegir la estrategia correcta depende de si el script es critico, depende de otros scripts o es independiente.

Respuesta rápida

Elija una estrategia de carga de scripts segun cuando deba ejecutarse el script. Use defer para scripts que necesiten el DOM completo pero puedan descargar en paralelo. Use async para scripts independentes como analitica. Use type='module' para codigo de modulo ES moderno.

Last updated: 2026-05-25

Limitaciones

  • Defer preserva el orden de ejecucion de los scripts; async no. Elija segun si el orden de los scripts es importante.
  • Los scripts async se ejecutan tan pronto como terminan de descargarse, lo que puede bloquear la renderizacion si el script es grande.
  • Los scripts type='module' se difieren por defecto y no necesitan un atributo defer adicional.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Seleccione el tipo de script que coincida con su caso de uso.
  2. Ingrese la URL del script.
  3. La herramienta recomienda el mejor atributo de carga.
  4. Copie la etiqueta script con los atributos correctos.

Para qué puedes usarla

  • Agregar un paquete de aplicacion diferido que se ejecute despues de que la pagina se analice.
  • Incluir un script de analitica asincrono que se cargue independentemente.
  • Configurar un script de modulo para un punto de entrada de Vite o Astro.

Casos de uso

Ejemplos prácticos

Ejemplo

Script de analitica con async

Un script de analitica usa async para cargarse sin bloquear la pagina.

Ejemplo

Paquete de aplicacion con defer

Un paquete de aplicacion usa defer para mantener el orden de ejecucion sin bloquear el analisis HTML.

Errores comunes

  • Usar async para scripts que dependen de elementos del DOM u otros scripts.
  • Usar defer para scripts que deben ejecutarse inmediatamente independientemente del estado del analisis.
  • Usar type='module' para scripts que no son modulos ES.

Verificación

  1. Abra el panel Network de Chrome DevTools y revise las columnas Initiator y Waterfall para confirmar cuando cada script comienza a cargarse y ejecutarse.
  2. Pruebe el tiempo de renderizacion e interactividad de la pagina con diferentes estrategias usando el panel Performance.

Comparación

async vs defer vs type="module"

Aspectasyncdefertype="module"
Execution timingExecutes as soon as the script finishes downloading, before DOMContentLoadedExecutes after HTML parsing is complete, just before DOMContentLoadedExecutes after HTML parsing is complete, same as defer behavior
Script order guaranteeNo. Scripts execute in the order they finish downloading.Yes. Scripts execute in the order they appear in the HTML.Yes. Scripts execute in the order they appear, same as defer.
Blocks HTML parsingDoes not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.
Use casesIndependent scripts such as analytics, A/B testing, or social widgetsScripts that need the full DOM such as app bundles that query or modify the pageModern ES module code where import/export syntax is used
Default behavior without attributeWithout any attribute, the script blocks HTML parsing until it downloads and executesN/Atype="module" scripts are deferred by default and do not need an explicit defer attribute

Async downloads in parallel and runs on completion. Defer downloads in parallel but waits for the HTML to finish parsing. Module scripts are deferred by default and support ES module dependency graphs.

FAQ

Preguntas sobre Constructor de estrategia de carga de script

Cual es la diferencia entre defer y async?

defer descarga en paralelo y espera a que termine el analisis HTML antes de ejecutar, preservando el orden de los scripts. async descarga en paralelo y ejecuta inmediatamente cuando esta listo, ignorando el orden.

Type='module' necesita defer?

No. Los scripts de modulo se difieren por defecto y no necesitan un atributo defer explicito.

Donde deberia colocar la etiqueta script en el documento HTML?

La mejor practica moderna es colocar las etiquetas script en el head con defer o type='module'. Ambos descargan en paralelo con el analisis HTML y ejecutan despues de que el DOM esta listo. Colocar scripts al final del body era una solucion alternativa para navegadores antiguos.

Defer funciona en scripts en linea?

No. El atributo defer solo funciona en scripts externos con un atributo src. Los scripts en linea se ejecutan inmediatamente durante el analisis HTML. Si necesita que un script en linea se ejecute despues de que el DOM este listo, use el event listener DOMContentLoaded o coloque el script al final del body.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también