En esta página:
Cuando se trata de cargar archivos JavaScript, hay algunas opciones diferentes disponibles. Comprender exactamente cómo se cargan y ejecutan los script es crucial para el rendimiento del sitio web, así como para la calidad general de la experiencia del usuario. En este Post te enseñaré Cual Es La Diferencia Entre los Atributos “async” y “defer” en HTML y veremos como funciona la etiqueta <script></script> con estos atributos, es decir con async y defer, vamos con ello.
Antes de continuar con este Post, te invito a leer los siguientes artículos:
- Formatos de Colores que Soporta HTML 5
- Como Usar Imágenes de Respaldo HTML En Caso de Error
- Notificaciones Desktop con HTML5
- Hacer nuestro contenido Editable con HTML5
- Aprende los Códigos de Errores al hacer peticiones HTTP al servidor
- 5 Atributos Globales de HTML5 que nos pueden ser Útiles
- Manipular una Lista Ordenada con el Atributo Type en HTML
- Que es el Atributo Aria-* en HTML, como funciona y otros detalles
- Como habilitar el Dibujado con el mouse sobre un canvas HTML 5 (Desktop)
- Como Crear Notaciones Matemáticas en HTML 5
- Los Tipos de Rutas de Archivos que existen en HTML 5
- Puedes leer más en la categoría HTML 5
Asimismo, te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida” y “La Inteligencia Artificial (IA) y el Machine Learning (ML) Siempre Trabajan de la Mano” (Anchor Podcast):
| Spotify: | Sound Cloud: | Apple Podcasts | Anchor Podcasts |
 |
 |
 |
 |
Bien ahora continuemos con el Post: Cual Es La Diferencia Entre los Atributos “async” y “defer” en HTML.
Sin Atributo
La mayoría de las veces, una etiqueta <script> simple sin atributos es con lo que la mayoría de la gente tiende a comenzar. Esto implementa el comportamiento predeterminado del navegador. El HTML se analizará hasta que se encuentre la etiqueta del script. En este punto, se pausará el análisis de HTML y se cargará el script. El script se ejecutará antes de que se pueda reanudar el análisis de HTML:
|
1 2 3 4 |
<!-- Etiqueta <script> sin atributo --> <script src="archivojavascript.js"></script> |
Como puedes ver, este método puede causar una pausa prolongada en el análisis de HTML, lo que da como resultado una experiencia de usuario desagradable.
Atributo “async”
Para evitar una pausa prolongada en el análisis de HTML, se puede aprovechar el atributo async. Esto garantiza que, cuando se encuentre el script, el análisis no se detenga de inmediato. En su lugar, el script se carga en segundo plano y solo se detiene el análisis de HTML para ejecutarlo. El análisis de HTML se reanuda como de costrumbre después de que se completa la ejecución del script:
|
1 2 3 4 |
<!-- Etiqueta <script> con el atributo 'async' --> <script src="archivojavascript.js" async></script> |
Si bien el atributo async toma medidas para mitigar el problema mencionado anteriormente, viene con una advertencia importante. No se garantiza que los scripts cargados de esta manera se ejecuten en el orden especificado, sino a medida que estén disponibles cuando se carguen.
Atributo “defer”
Por último el atributo defer se basa en el comportamiento anterior para garantizar el orden de ejecución de los scripts. Como antes, los scripts se cargan en segundo plano a medida que se encuentran. Cuando finaliza el análisis de HTML, se ejecutan en orden:
|
1 2 3 4 |
<!-- Etiqueta <script> con el atributo 'defer' --> <script src="archivojavascript.js" defer></script> |
Como Puedes ver cada atributo tiene una forma de trabajar y depende de tu criterio decidir en que momento usarlos.
Conclusión
Hemos aprendido como funcionan los atributos async y defer, la mejor manera de comprender como funcionan y aprenderlos, es usandolos en tus proyectos. Como se dice la práctica hace al maestro.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.