¿Es mejor poner los scripts de JavaScript en el «head» o antes de cerrar el «body»?

Es mejor poner scripts JavaScript antes de «/body» para evitar bloqueo de renderizado y asegurar acceso al DOM. Alternativamente, usa «script defer» en «head» para carga asíncrona.

La ubicación de tus etiquetas <script> de JavaScript puede tener un impacto significativo en el rendimiento de carga de tu página y en cómo interactúan con el DOM.

Tradicionalmente: Antes de cerrar </body> (Recomendado por defecto)

Durante mucho tiempo, la práctica recomendada ha sido colocar la mayoría de las etiquetas <script> justo antes del cierre de la etiqueta </body>.

  ...
  <script src="mi-script.js"></script>
  <script src="otro-script.js"></script>
</body>
</html>
Lenguaje del código: PHP (php)

Razones para esta práctica:

Evitar el bloqueo del renderizado: Cuando un navegador encuentra una etiqueta <script> (sin atributos async o defer), detiene el análisis (parsing) del HTML y la renderización de la página para descargar, analizar y ejecutar el script.
Si el script está en el <head>, el usuario verá una página en blanco durante más tiempo mientras esto ocurre.
Colocarlo al final permite que todo el contenido HTML y CSS se muestre primero.
Acceso completo al DOM: Al colocar los scripts al final, te aseguras de que todo el HTML de la página ha sido analizado y está disponible en el DOM (Document Object Model).
Esto es crucial si tus scripts necesitan manipular elementos de la página.
Si un script en el <head> intenta acceder a un elemento que aún no ha sido creado, fallará.

Alternativas modernas con atributos en el <head>: async y defer

HTML5 introdujo los atributos async y defer para las etiquetas <script>, que te dan más flexibilidad si prefieres (o necesitas) colocar tus scripts en el <head>:

<head>
  ...
  <script src="script-independiente.js" async></script>
  <script src="mi-script-principal.js" defer></script>
  <script src="otro-script-que-depende-del-anterior.js" defer></script>
  ...
</head>
Lenguaje del código: PHP (php)

defer:
- El script se descarga de forma asíncrona (sin bloquear el renderizado del HTML).
- Se ejecuta solo después de que el análisis del HTML haya finalizado por completo, pero antes de que se lance el evento DOMContentLoaded.
- Los scripts con defer se ejecutan en el orden en que aparecen en el documento.
- Es una excelente opción moderna para la mayoría de los scripts, ya que no bloquea la renderización y asegura que el DOM esté listo.
async:
- El script se descarga de forma asíncrona.
- Se ejecuta tan pronto como se descarga, lo cual puede ocurrir antes o después de que el HTML se haya analizado completamente. Esto significa que puede interrumpir el renderizado si termina de descargarse pronto.
- No hay garantía sobre el orden de ejecución si tienes varios scripts async.
- Es útil para scripts independientes que no dependen de otros scripts ni del DOM en un estado particular (por ejemplo, scripts de analíticas, algunos anuncios).

Conclusión y recomendación actual:

<script ... defer> en el <head>: Para la mayoría de los scripts que necesitan el DOM o dependen del orden, esta es a menudo la mejor opción moderna. Permite que el navegador descubra y descargue los scripts antes, sin bloquear el renderizado.
Scripts antes de </body>: Sigue siendo una práctica sólida y segura, especialmente si no quieres preocuparte por async/defer o si tienes scripts que no son críticos para el renderizado inicial.
<script ... async> en el <head>: Para scripts de terceros, independientes, donde el orden no importa.
Evita <script> sin async o defer en el <head> a menos que tengas una razón muy específica y bien entendida (por ejemplo, un script que deba modificar algo antes del primer renderizado, lo cual es poco común).

Prioriza siempre la experiencia del usuario y el rendimiento de carga de la página.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta

Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂

Más contenido interesante