2010-12-09 27 views
21

Veo que el código Javascript normalmente está en la parte del encabezado del código HTML.¿Está bien colocar código JavaScript en algún lugar del código HTML?

<head> 
<script type="text/javascript" language="javascript" src="core.js"></script> 
... 
</head> 

¿Está bien poner el código de Javascript en una parte del cuerpo del código HTML? Lo probé, pero parece funcionar.

<body> 
<script type="text/javascript" language="javascript" src="core.js"></script> 
... 
</body> 

Si es así, ¿por qué los ejemplos de libros de Javascript ponen el código de JavaScript en la parte del encabezado? Si no, ¿cuál es la diferencia entre poner el código de javascript en la parte del cuerpo/encabezado?

+0

Esta pregunta hace un buen trabajo al tratar el tema: http://stackoverflow.com/questions/143486/unobtrive-javascript-script-at-the-top-or-the-bottom-of-the-html- código – wsanville

+0

Agradecería que alguien mencionara también cuál es la mejor práctica para incluir Javascript, que afecta mucho el aspecto de la página, para no permitir que el usuario vea la página "medio procesado, no procesado en JS" durante la carga. – Kos

+2

@Kos: Google for FOUC (flash de contenido sin estilo) Por lo que está hablando, le daría a esos elementos una visibilidad: oculta; estilo, haga que el estilo se ejecute en dom: listo, y elimine ese estilo oculto al final de mi controlador de eventos. –

Respuesta

16

No solo está bien, it's actually better, ya que permite que el contenido sea lo primero.

Si sus lectores tienen una conexión lenta (por ejemplo, móvil), es mejor enviar primero el contenido real, para que puedan leerlo mientras el navegador descarga el Javascript.

+2

totalmente bien con él aceptando esta respuesta sobre la mía, pero realmente espero que no sea porque cree que SLaks aboga por rociar etiquetas de scripts por todos lados –

1

Es legal según la especificación.

La mayoría de los ejemplos los utilizan en el encabezado, ya que los encabezados son los primeros y el navegador podrá analizar la referencia y descargar los archivos JS más rápidamente.

Además, estos son enlaces y no son parte de la pantalla, por lo que tradicionalmente, poner en el encabezado.

3

Puede hacerlo, y la gente suele hacerlo.

Por ejemplo, a las personas les gusta poner sus etiquetas script justo antes del cierre </body> para hacer que las páginas web rindan más rápido.

Además, si realiza un bloque de script después de crear un elemento, no necesita esperar a que DOM esté listo.

Se advierte sin embargo, NO añadir o eliminar un elemento de un antepasado sin cerrar en el árbol de marcado (sin incluir elemento padre inmediato del bloque de script), o se obtendrá el error temido Operation Aborted en IE.

1

Es perfectamente legal, pero parece haber algunas opiniones diferentes al respecto. Aquellos que dicen poner todas las referencias javascript en la cabeza argumentan que la secuencia de comandos se descarga antes de que el resto de la página se vuelva visible y dependa de ella. Por lo tanto, su usuario no verá un objeto en la pantalla, intentará interactuar con él y obtendrá un error porque el código de JavaScript aún no se ha cargado.

Por otro lado, el argumento es que lleva más tiempo cargar todo el script antes de que el usuario vea la página y que puede tener un impacto negativo en la velocidad percibida de su sitio.

+0

@Vincent: Sin embargo, si hay errores de JavaScript cuando el usuario intenta interactuar con la página antes de que se carguen los scripts externos, eso significa que el autor de la página está usando 'onclick' et al, y debe estar LARTed. – cdhowie

+0

@cdhowie cierto. Espero que puedas evitar los errores que mencioné, solo estoy señalando el argumento, no necesariamente estoy de acuerdo con él. –

+0

@vincent: Se está refiriendo a una técnica diferente llamada javascript discreto, que es la forma en que debería estar haciendo su manejo de eventos de todos modos. Si está viendo esos errores, hay formas mucho mejores de manejar los eventos que está utilizando actualmente. –

10

Toda la gente que dice que es mejor solo se aplica si está hablando en la parte inferior de la página (y eso es algo para debatir) desde un punto de vista de calidad del código, NO es correcto rociar etiquetas de guiones a través de tu html Todas las referencias a JavaScript debe estar en un solo lugar en la página, ya sea la cabeza (donde deberían estar), o la parte inferior (como una optimización perf)

Editar:

Básicamente, una página web es compuesto de 3 piezas; estilo (css), estructura (html) y comportamiento (javascript). Estas piezas son todas muy distintas, por lo que tiene sentido mantenerlas lo más separadas posible.De esta forma, si necesita cambiar algún javascript, todo está en un solo lugar. Si se rocía a través del archivo, se vuelve mucho más difícil encontrar el código que estás buscando, y ese código básicamente se convierte en ruido cuando solo estás mirando la estructura.

Son los mismos argumentos que por qué no se rocía el código de acceso db en toda la página. No tiene nada que ver con razones técnicas, puramente una decisión arquitectónica/de diseño. El código que hace cosas diferentes debe mantenerse separada para facilitar la lectura, capacidad de mantenimiento y, por extensión, refactorability (no estoy seguro si esto último es en realidad una palabra ...)

+0

¿Puedes explicar por qué no está bien? –

+0

@Adrian Smith: respondió en una edición –

+0

OK, veo, eso suena razonable, ¡gracias! –

1

Sólo algo para poner en:

tengo preferencia de poner archivo Javascript justo antes de </body>. Mis razones son que:

  • El contenido puede cargarse y mostrarse primero. Si primero carga enormes archivos Javascript, que la mayoría no tienen sentido hasta que se cargue la página, el usuario no podrá ver nada hasta que se carguen los archivos JS.
  • La mayoría del código Javascript requiere para trabajar con la interfaz de usuario solo se puede ejecutar después de que se haya cargado la interfaz de usuario. Colocar los códigos al final del archivo html reduce la necesidad de utilizar el controlador de eventos onload.
  • Es muy mala costumbre colocar fragmentos de Javascript en todo el archivo HTML. Colocar todo en la parte posterior del archivo HTML le permite administrar su Javascript de manera más eficiente.
+0

¿Y por qué no "right * after *' '"? –

1

JavaScript dentro del cuerpo serán ejecutadas inmediatamente mientras se carga la página en el navegador

La colocación de javascript en el extremo del cuerpo aplazará Javascript carga (es decir: la página hará que más rápido), pero recuerda que cualquier La función javascript utilizada para un evento debe cargarse antes de la declaración del evento, principalmente porque los usuarios pueden disparar un evento antes de que la página esté completamente cargada (¡antes de cargar la función)!

+0

Su código de manejo de eventos no debe estar en absoluto en el html. Google para javascript discreto, hace que el manejo de eventos sea mucho más limpio, y ese problema específico simplemente desaparece. –

+0

Completamente de acuerdo con esto, salvo en navegadores lentos antiguos, que en su mayoría todavía se usan en grandes compañías, donde agregar muchos eventos es un desastre – Opty

0

Solía ​​ponerlo en la cabeza, entonces he oído que lleva más tiempo cargar la página, así que comencé a colocar los guiones en la parte inferior. Sin embargo, descubrí que la manera más "limpia" de hacerlo es colocarlo en la cabeza PERO colocas el script dentro de una función document.ready. De esta manera tienes lo mejor de ambos mundos. Es más limpio porque está en la cabeza y no está cargado antes de que el contenido se haya cargado, por lo que no hay ningún problema en cuanto al rendimiento.

con jQuery por ejemplo, puede hacerlo de esta manera:

$(document).ready(function() { 
    alert('test'); 
}); 

La alerta sólo emergente cuando la página se ha cargado completamente, a pesar de que el guión está en la cabeza.

Cuestiones relacionadas