En el mundo del desarrollo web, optimizar los tiempos de carga de las páginas es crucial. Dos poderosos atributos de la etiqueta

Conceptos básicos: cómo se cargan los scripts

De forma predeterminada, cuando un navegador encuentra una etiqueta

1. Pausa el análisis de HTML
2. Descarga el script
3. Ejecuta el script
4. Reanuda el análisis de HTML

Este proceso puede ralentizar la representación de páginas, especialmente para scripts grandes o conexiones lentas. Además, puede generar errores si el script se ejecuta antes de que ciertos elementos HTML estén completamente cargados, lo que suele ocurrir si el script no se coloca correctamente en el documento.

Async y Defer: un arma de doble filo

asíncrono

• Qué hace: Descarga el script de forma asincrónica mientras continúa el análisis de HTML.
• Cuando se ejecuta: Tan pronto como se descarga, se pausa el análisis de HTML.
• Cuando se usa: Scripts independientes que no dependen de otros scripts o contenido DOM.
• Advertencia: Puede ejecutarse fuera de orden, lo que podría romper las dependencias.

Aplazar

• Qué hace: Descarga el script mientras continúa el análisis de HTML.
• Cuando se ejecuta: Después de que se complete el análisis de HTML, pero antes del evento DOMContentLoaded.
• Cuándo se usa: Scripts que dependen del contenido DOM o deben ejecutarse en un orden específico.
• Advertencia: Puede retrasar la ejecución de funciones críticas.

Comparar comportamientos

Orden de ejecución: asíncrono, aplazado y ambos

Comprender el orden de ejecución de los scripts con diferentes atributos es crucial para gestionar las dependencias y garantizar la funcionalidad adecuada. Así es como funciona:

1. Scripts regulares (sin async ni aplazamiento):

   • Ejecutar en el orden en que aparecen en el documento.
   • Bloquear el análisis de HTML hasta que se descarguen y ejecuten.

2. Scripts asíncronos:

   • Descargar en paralelo y ejecutar tan pronto como estén disponibles.
   • No hay orden de ejecución garantizado; se ejecutan tan pronto como se descargan.
   • Puede ejecutarse antes de que el DOM esté completamente cargado.

3. Aplazar guiones:

   • Descargar en paralelo pero ejecutar solo después de que se complete el análisis HTML.
   • Ejecutar en el orden en que aparecen en el documento.
   • Ejecutar antes del evento DOMContentLoaded.

4. Scripts con async y diferimiento:

   • El atributo async tiene prioridad en los navegadores modernos.
   • En navegadores más antiguos que no admiten asíncrono, recurren al comportamiento diferido.

Ejemplo de orden de ejecución:

Posible orden de ejecución:

1. 1.js (análisis de bloques)
2. 3.js o 2.js (lo que se descargue primero)
3. 2.js o 3.js (lo que se descargue en segundo lugar)
4. 4.js
5. 5.js

Tenga en cuenta que 2 y 3 podrían ejecutarse en cualquier orden o incluso antes de 1 si 1.js tarda más en descargarse.

Mejores prácticas

1. Utilice async para scripts independientes como análisis.
2. Utilice aplazar para secuencias de comandos que dependen de DOM u otras secuencias de comandos.
3. Coloque los scripts en con async o posponga para comenzar a descargar antes.
4. Para guiones críticos, considere los guiones en línea en el .

Soporte del navegador

Tanto async como aplazar son ampliamente compatibles en los navegadores modernos. Para navegadores más antiguos, considere usar un cargador de secuencias de comandos o colocar secuencias de comandos al final del .