¿Alguna vez te has preguntado cómo los navegadores leen y ejecutan los scripts en tu página web? ¿Has tenido problemas con la velocidad de carga de tu sitio debido a los scripts que estás utilizando? Este artículo te va a ayudar a entender el atributo async, muy útil para optimizar la carga de tus scripts y para convertirte en un excelente desarrollador web.
¿Qué es el atributo async?
En pocas palabras, el atributo async le permite al navegador seguir procesando el HTML de la página mientras el script se está cargando. Esto significa que tus usuarios no tienen que esperar a que el script se cargue para empezar a interactuar con tu página web. Mientras se cargan nuestros scripts, el navegador puede seguir interpretando el HTML.
<script async src="mi-script.js"></script>
En el ejemplo anterior, el script se cargará de forma asíncrona mientras el navegador sigue procesando el resto del HTML.
¿Qué tiene que ver el atributo defer?
Por otro lado, defer también permite la carga asíncrona de los scripts, pero con una pequeña diferencia: el script no se ejecutará hasta que toda la página HTML haya cargado completamente.
<script defer src="mi-script.js"></script>
En este caso, nuestro script se cargará de forma asíncrona, pero no se ejecutará hasta que todo el HTML se haya cargado y procesado por completo.
Async vs. defer
¿Cuál es mejor: el atributo async o defer? Depende de tus necesidades y de cómo se haya estructurado tu página. Si tienes un script que no depende de otros scripts ni del DOM, puedes usar el atributo async para que se cargue en segundo plano sin bloquear el renderizado del HTML. Pero si tu script depende del DOM o de otros scripts, es mejor usar defer para asegurarte de que todo está en su lugar antes de ejecutar el script.
Orden de ejecución
Es importante mencionar que el orden de ejecución de los scripts puede verse afectado por estos atributos. En el caso del atributo async, el navegador ejecuta el script en cuanto se termina de cargar, sin importar el orden en el que aparecen en el HTML. Esto puede ser problemático si tienes scripts que dependen de otros.
En cambio, con defer los scripts se ejecutan en el orden en el que aparecen en el HTML, lo cual es útil si un script depende de otro.
¿Async, defer o ninguno?
Si bien el uso de async y defer puede mejorar la velocidad de carga de tu página, no siempre son necesarios. Si tus scripts son pequeños y no dependen de otros scripts ni del DOM, no necesitas usar ninguno de estos atributos.
Por otro lado, si estás utilizando librerías externas o scripts grandes que pueden bloquear el renderizado de tu página, definitivamente deberías considerar usar async o defer.
Una práctica común es usar el atributo async para scripts como Google Tag Manager, que no son necesarios para la carga de la página, pero sí para recopilar métricas y seguimiento.
Aprende con los mejores
Ya sabes cómo funciona el atributo async y cómo puede ayudarte a optimizar la carga de tu página. Ahora es el momento de dar un paso más y aprender con nuestro Desarrollo Web Full Stack Bootcamp, la formación íntegra e intensiva en la que abordamos estos temas y muchos más.
El sector tecnológico es una industria con alta demanda de profesionales. Al completar el bootcamp, no solo tendrás un conjunto de habilidades prácticas y conocimientos teóricos muy demandados en el mercado laboral, sino que te embarcarás en una carrera con salarios altos y grandes condiciones que otros sectores no pueden ofrecer. ¡Pide más información ahora y cambia tu vida!
