En el desarrollo web, el scripting es una parte fundamental para dar vida a nuestras páginas y aplicaciones. Entre las etiquetas más utilizadas en HTML para incluir scripts se encuentran <script> y <iframe>. Estas etiquetas nos permiten enlazar archivos JavaScript externos o escribir el código directamente en ellas.
El atributo defer
El atributo defer es utilizado en la etiqueta <script> para indicar que el archivo JavaScript debe ser ejecutado una vez que el documento HTML haya sido completamente cargado. Esta característica es especialmente útil cuando el script necesita acceder a elementos del DOM que aún no se han cargado al momento de la ejecución.
Al agregar el atributo defer al script, se le indica al navegador que no debe bloquear la renderización del contenido mientras espera a que el archivo JavaScript termine de cargar y ejecutarse. Esto significa que el script se descargará en paralelo junto con los demás recursos del documento, pero su ejecución será pospuesta hasta que el árbol DOM haya sido construido.
El uso del atributo defer también garantiza que los scripts se ejecuten en el orden en el que aparecen en el documento, a diferencia del atributo async, que veremos más adelante.
El atributo async
El atributo async, también utilizado en la etiqueta <script>, tiene un comportamiento similar al atributo defer en cuanto a la carga del archivo JavaScript, pero con una diferencia fundamental: el script se descargará y ejecutará de manera asíncrona, sin esperar a que el documento HTML sea cargado por completo.
Esto puede ser útil en aquellos casos en los que el script no necesita acceder al árbol DOM para funcionar correctamente o no depende del estado completo de la página. Al utilizar el atributo async, el script no bloqueará la renderización del contenido, mejorando así la velocidad de carga de la página.
Es importante tener en cuenta que, al utilizar el atributo async, no se garantiza el orden de ejecución de los scripts. Si se depende de un orden específico, es recomendable utilizar el atributo defer o cargar los scripts de forma secuencial.
Preguntas frecuentes
¿Cuándo debo utilizar el atributo defer?
Debes utilizar el atributo defer cuando necesites acceder al árbol DOM en tu script y quieras asegurarte de que el documento HTML se haya cargado por completo antes de ejecutarlo. Esto es especialmente útil cuando se trabaja con elementos que se generan dinámicamente en el DOM.
¿Cuándo debo utilizar el atributo async?
El atributo async es útil cuando el script no necesita acceder al árbol DOM o no depende del estado completo de la página para funcionar correctamente. También es útil cuando se desea mejorar la velocidad de carga de la página, ya que el script se descargará y ejecutará sin bloquear la renderización del contenido.
¿Es necesario especificar el atributo defer o async en la etiqueta <script>?
No, no es necesario. Si no se especifica ninguno de los atributos, el script se ejecutará de manera síncrona, bloqueando la renderización del contenido.
¿Puedo utilizar ambos atributos en la misma etiqueta <script>?
No, no es posible utilizar ambos atributos en la misma etiqueta. Debes elegir entre defer o async, dependiendo de tus necesidades y requisitos de carga.
En conclusión, el atributo defer y async nos permiten controlar el momento en el que se carga y se ejecuta un archivo JavaScript en nuestras páginas web. El uso adecuado de estos atributos puede mejorar la velocidad de carga y la experiencia del usuario. Recuerda elegir la opción que mejor se adapte a tus necesidades y seguir las mejores prácticas de desarrollo web.
Spanish 
English