¿Para qué se conectan normalmente los scripts al final de la etiqueta body?
sobes.tech AI
Respuesta de la IA
Para evitar bloqueos en el renderizado de la página y garantizar el acceso a los elementos DOM inmediatamente después de su carga.
Al incluir scripts en <head> o al inicio de <body> sin los atributos async o defer, el navegador detiene el análisis del HTML y el renderizado de la página hasta que el script se cargue y ejecute. Esto ralentiza el rendimiento visible del sitio.
Incluir en el final de <body> garantiza que el árbol DOM ya esté completamente formado en el momento de ejecutar el script, permitiendo interactuar directamente con los elementos sin necesidad de usar manejadores de eventos como DOMContentLoaded o load solo para acceder a los elementos.
Los atributos async y defer son alternativas modernas que ofrecen opciones más flexibles para cargar scripts sin bloquear el análisis del HTML:
async: El script se carga de forma asíncrona y se ejecuta inmediatamente después de cargarse, sin esperar a que se cargue completamente el DOM. No se garantiza el orden de ejecución de scripts asíncronos.defer: El script se carga de forma asíncrona y se ejecuta después del análisis completo del HTML, pero antes del eventoDOMContentLoaded. Los scripts condeferse ejecutan en el orden en que aparecen en el documento.