Curso HTML 14.1 Inserción de scripts (script en head y body)

14.1 Inserción de scripts (script en head y body)

En HTML, el elemento <script> nos permite incorporar código JavaScript en la página. Podemos insertar este elemento en dos lugares principales:

• Dentro de la sección head (<head>), antes de que se procese el contenido visual.
• Dentro del body (<body>), normalmente al final para optimizar el rendimiento.

1. Script en el head

Colocar scripts en el head bloquea el parser de HTML hasta que el script se descarga y ejecuta, retrasando la representación de la página. Sin embargo, hay atributos que ayudan a mitigar este bloqueo:

• defer: Retrasa la ejecución hasta que el DOM esté completamente construido.
• async: Descarga el script paralelamente al resto de recursos y lo ejecuta tan pronto como esté listo.

a) Script sin atributos (bloqueante)

  <head>
    <!-- El navegador detiene el parseo de HTML hasta completar este script -->
    <script src='utils.js'></script>
  </head>

Comentarios:

• Descarga y ejecución se hacen antes de procesar el resto del documento.
• Puede causar render-blocking y empeorar la velocidad percibida de carga.

b) Script con defer

  <head>
    <!-- Se descarga en paralelo, se ejecuta tras construir el DOM -->
    <script defer src='funciones.js'></script>
  </head>

Comentarios:

• Se garantizan el orden de ejecución si hay múltiples defer.
• No bloquea la carga de CSS ni de otros recursos.

c) Script con async

  <head>
    <!-- Se descarga en paralelo, se ejecuta tan pronto como termine la descarga -->
    <script async src='analytics.js'></script>
  </head>

Comentarios:

• No garantiza el orden de ejecución relativo a otros scripts.
• Buena opción para scripts independientes (p.ej.: analíticas).

2. Script en el body

Insertar el <script> justo antes del cierre de </body> es una práctica común para evitar bloqueos:

  <!-- ... contenido HTML ... -->
  <!-- Al final del body, el DOM ya está listo -->
  <script src='app.js'></script>
  </body>

Comentarios:

• El navegador renderiza todo el HTML antes de descargar y ejecutar el script.
• Sin necesidad de defer, ya que el DOM existe al ejecutar app.js.

3. Comparativa de localizaciones y atributos

4. Inserción dinámica de scripts

Podemos crear y añadir scripts mediante JavaScript, lo que permite control sobre cuándo y cómo cargarlos:

  <script>
    // Crear un nuevo elemento