¿Es una mala práctica incrustar JavaScript en el cuerpo de HTML?

Question 1

Un equipo en el que estoy trabajando se ha acostumbrado a utilizar <script>etiquetas en lugares aleatorios del cuerpo de nuestras páginas HTML. Por ejemplo:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

No había visto esto antes. Parece funcionar en los pocos navegadores que he probado. Pero hasta donde yo sé, no es válido poner etiquetas de script en lugares como este.

¿Me equivoco? ¿Qué tan malo es que coloquemos etiquetas de script dentro de etiquetas div como esta? ¿Hay algún problema de compatibilidad del navegador que deba tener en cuenta?

Question 2

Es perfectamente válido.

No querrá poner grandes bloques de código mezclados en el marcado allí (es mejor usar scripts externos), pero puede ser útil para:

agregar información de vinculación adicional para la mejora progresiva (donde esos datos son difíciles de encajar en un nombre de clase u otro enfoque para ocultar información extendida en atributos); o
donde sea necesario iniciar una mejora con guión lo más rápido posible (en lugar de esperar a que se cargue la ventana / esté listo para el documento). Un ejemplo de esto sería el enfoque automático, que puede irritar si se dispara demasiado tarde.

Es posible que esté pensando en <style>elementos que no están permitidos <body>(aunque la mayoría de los navegadores lo permiten).

Question 3

De hecho, es bastante común. Por ejemplo , el código de seguimiento de análisis de Google usa solo esta sintaxis:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Si es lo suficientemente bueno para Google ...

Question 4

Es válido y, según el marco del lado del servidor y la naturaleza del código, a veces es muy difícil de evitar.

Question 5

Como mencionaron varias personas, es válido, funciona y se usa ampliamente.

Las mejores prácticas por lo que la semántica recomienda (o al menos se usa para recomendar) es colocar etiquetas de script dentro del encabezado.

Las mejores prácticas más modernas que tienen en cuenta el rendimiento recomiendan colocar etiquetas de script (externas e integradas) en la parte inferior derecha antes de la etiqueta del cuerpo, para permitir que el marcado se represente por completo antes de que se ejecute cualquier código JavaScript.

Para facilitar la comprensión y el mantenimiento del código, se recomienda "JavaScript no intrusivo", donde el código está en un archivo externo y vincula eventos al DOM (JavaScript no intrusivo de Google).

Un caso en el que es útil tener JavaScript en línea es inicializar variables con valores que solo existen en el servidor, que luego serán utilizados por el código JavaScript externo.

Question 6

Prefiero poner referencias a scripts externos en el encabezado y scripts que inician las cosas e inicializan los widgets y todo eso en el cuerpo.

Un problema que es muy fácil de encontrar es que un elemento de script en el cuerpo no puede acceder a los elementos que le siguen. Además, un desagradable problema relacionado con la compatibilidad del navegador es el hecho de que IE no permite que los elementos de la secuencia de comandos modifiquen el elemento en el que se encuentran. Entonces, si tiene esto:

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

A IE no le va a gustar tu página. Las versiones antiguas de IE solían dar mensajes de error muy crípticos para esto o incluso en blanco toda la página, pero IE8 parece dar un mensaje de error descriptivo.

Siempre que se asegure de que sus scripts solo accedan al DOM al que sea seguro acceder, no creo que sea malo poner elementos de script en el cuerpo. De hecho, en mi humilde opinión, poner scripts que inicializan widgets después de los elementos relacionados puede ser más legible que poner todo en un solo lugar (y creo que esto también podría hacer que se ejecuten antes, lo que hace que las cosas salten menos a medida que se carga la página).

Question 7

¡Es válido!

Puedes usar:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

No creo que puedas decir si es una mala práctica en general. Tienes que contarlo en el caso. Pero seguro que es bueno tener todo tu código JavaScript en el mismo lugar. Es un poco complicado si tiene pequeños fragmentos de código JavaScript en todo su archivo HTML.

Question 8

No había visto esto antes. Parece funcionar en los pocos navegadores que he probado. Pero hasta donde yo sé, no es válido poner etiquetas de script en lugares como este.

Es una práctica válida, pero no una buena (o recomendada).

¿Me equivoco? ¿Qué tan malo es que coloquemos etiquetas de script dentro de etiquetas div como esta? ¿Hay algún problema de compatibilidad del navegador que deba tener en cuenta?

No hay problema para colocar un <script>debajo de otros elementos (pero debería estar dentro <head>o <body>). Tampoco hay ningún problema en términos de compatibilidad del navegador, sin embargo, incrustar scripts JS en páginas web presenta serias desventajas (cómo / por qué se consideran malos) :

Agrega peso a la página
Dificultad (o probablemente imposible) para la minificación
No se puede migrar ni utilizar para otras páginas
No se puede almacenar en caché (debe descargarse cada vez que se carga la página)
Sin separación de preocupaciones (más difícil de mantener)

Question 9

Sin embargo, también es bueno saber que el código JavaScript necesario para una sección de HTML estará ahí. En lugar de tener que afirmar y crear alguna inclusión en la parte superior del archivo.

Entonces, en lugar de "si va a utilizar este HTML, asegúrese de importar xyz.js", puede incluir el HTML y terminar con él.

Entonces, no es necesariamente una maldad horrible. Quizás no espectacularmente impresionante, pero tampoco del todo terrible. Depende de la intención.

Question 10

Consulte la interfaz de usuario de Yahoo para conocer las mejores prácticas: http://developer.yahoo.com/performance/rules.html (JavaScript en la parte inferior de la página)

Question 11

Ciertamente es legal; Lo he visto en algunas páginas aquí en Exforsys, por ejemplo.

Ahora bien, este es un sitio de tutorial que muestra los conceptos básicos de HTML y JavaScript, por lo que en ese contexto es perfectamente comprensible. Sin embargo, no me gustaría verlo en el código de producción para nada más que una simple declaración o dos. Sin ver lo que ha reemplazado // Some JavaScript code here, no me gustaría comentar.

Sin embargo, no debería haber ningún problema con el navegador.

Question 12

Es válido agregar <script> en body , pero a Internet Explorer realmente no le gusta. Entonces, para estar más seguro, asegúrese de tener sus scripts dentro de la etiqueta <head>.

Eso realmente estaba creando estragos (especialmente para Internet Explorer) en el proyecto en el que estamos trabajando.

Question 13

Supongo que su equipo está haciendo esto porque quieren insertar un script de forma dinámica o porque están escribiendo un script que se activará al cargar la página.

No diría que hay nada de malo en hacer esto cuando es ABSOLUTAMENTE NECESARIO (siempre que esté en un bloque CDATA), pero fuera de eso, recomendaría a su equipo que usen una biblioteca de scripts como Prototype o jQuery, y mantengan los scripts externos a la página. Esto suele ser más limpio, y las bibliotecas a veces obligan a limpiar un poco el código, lo que apuesto a que no está sucediendo actualmente.

Tampoco ejecutaría funciones que consuman mucho tiempo en las etiquetas de script en línea, ya que ocurren en la carga de la página y, como dijo Jason anteriormente, podrían ralentizar la carga de la página. Todas las bibliotecas de scripts tienen funciones ordenadas que le permiten hacer cosas al cargar la página y le darán la opción de cuándo se cargan en la página para activarlas, como después de que se cargue el DOM.

Question 14

Es una de las muchas, muchas mejores prácticas que se trata tanto de mejorar el rendimiento como de mejorar su enfoque de la programación.

En última instancia, en el desarrollo web, ¡sacar el producto es lo más importante!

Question 15

Es perfectamente válido, aunque podría perjudicar la mantenibilidad. Consulte también ¿Dónde debo colocar etiquetas <script> en el marcado HTML? y ¿Por qué falla la llamada a esta función jQuery en Firefox? .

Question 16

La recomendación frecuente de que los scripts se mantengan en el encabezado es garantizar que el script se cargue antes de llamarlo. Este es solo un problema para ciertos controladores de eventos. Para otros tipos de secuencias de comandos, no importa, y para algunos tipos (como document.write), no tiene ningún sentido.

Question 17

Si tiene un editor que puede manejar la sintaxis HTML y JavaScript simultáneamente. Y si primero le gusta leer algunas líneas de HTML y luego JavaScript cpde ... seguro. Ve a por ello.

Question 18

Unas pocas cosas:

Es un código completamente válido.
Es completamente desaconsejado.

Hacer esto ralentiza considerablemente la carga de la página, ya que el código JavaScript debe ejecutarse antes de que se pueda procesar el resto de la página. Si está trabajando mucho en ese código JavaScript, su navegador podría bloquearse. Debería intentar (siempre que sea posible) cargar su código JavaScript dinámicamente y al final de su página (preferiblemente antes del</body> etiqueta).

Compre y lea JavaScript de alto rendimiento . Cambiará la forma en que escribe el código JavaScript.