2011-11-23 18 views
35

Si es perfectamente aceptable poner JavaScript justo antes de </body> ¿cuál es una buena razón para guardarlo en el <head>?¿Por qué poner JavaScript en la cabeza

Basado en la pregunta JavaScript in <head> or just before </body>? muchas respuestas indican que la página se cargará más rápido si la coloca justo antes de la etiqueta </body>.

Sin embargo, no veo ningún argumento sólido sobre por qué debe mantenerse en el <head>. Lo pregunto porque no soy un desarrollador de JavaScript muy fuerte y de todo lo que he leído y visto, el estándar es mantener la mayoría del código JavaScript y las referencias externas en el <head>.

Respuesta

29

Cualquier cosa en la cabeza debe completarse antes de que se cargue el cuerpo, por lo que generalmente es una mala idea poner javascript allí. Si necesita algo mientras el cuerpo se está cargando, o desea acelerar algo de ajax, entonces sería apropiado colocarlo en la cabeza.

6

La razón detrás de esto es que el Head se carga antes que el cuerpo. Cualquier código de javascript dinámico que se ejecute en el cuerpo en carga se ejecutará correctamente.

Si tiene javascript que está justo antes de la etiqueta </body>, las llamadas javascript hechas a las funciones por su página mientras se carga generarán un error.

Así que sí, poner javascript antes de que la etiqueta </body> cargue más rápido. Pero solo si tu javascript se ejecutará después de la carga de la página a través de clics, por ejemplo.

+0

Es cualquier cosa menos la "mejor práctica" para poner JS en la etiqueta ''. Hay un puñado de escenarios de uso donde podría ser apropiado, pero en general la "mejor práctica" es antes de ''. –

+1

@Chris Editó esa parte de mi respuesta. Todo lo que quise decir es que hay diferentes escenarios de uso de cuándo poner '' y cuándo poner '' Y lo que quise decir al final fue no descartar ponerlo en la cabeza en lugar de "mejores prácticas" "que fue un desliz de mi parte. – Chris

2

Si necesita el javascript para realizar algo en la página, y no desea que el usuario final vea el contenido hasta que se cumpla, entonces debe incluirlo en la cabecera. Realmente depende de cada caso individual.

La mayoría de las veces, ponerlo en la parte inferior realmente es mejor para optimizar la descarga de la página, ya que el usuario podrá ver todo el contenido de la página antes de que el JS comience a descargar.

-4

Esa es una pregunta como "windows" o "mac", creo, Si pones toda tu fuente de JS en la sección principal del sitio web, eres fuerte en el W3C. El otro caso es everthing en la cabeza debe ser cargado antes del elemento del cuerpo. Y antes de que el DOM esté correctamente cargado. JavaScript Los marcos como jQuery tienen funciones como $ (document) .ready() para verificar que el DOM completo esté cargado. Para que pueda hacer todos sus JS en la etiqueta de la cabeza. Mi preferencia es cargar todos los JS en el extremo del cuerpo, pero esta decisión va a cada desarrollador en su propia :)

+2

Esto ... no tiene ningún sentido en absoluto. Particularmente las líneas "tu eres fuerte para el W3C". Las especificaciones no indican que deba colocar todos sus scripts en el '', y esta pregunta no es una pregunta sobre la opinión: hay muy buenas razones técnicas para hacer o no hacer esto, no solo una cuestión de gusto personal y preferencia –

1

La única razón para poner JS en la cabeza es para los scripts que modifican la forma en que el navegador realidad renderiza la página. Por ejemplo, Modernizr.js se carga en el encabezado para que pueda hacer cosas como agregar soporte para elementos HTML5 y manipular clases en la etiqueta <html> antes de que la página comience a procesarse.

De lo contrario, su JS debe estar entrando en la parte inferior de la página.

-1

Tradicionalmente páginas no se utilizan para validar (ya sea validación XHTML estricto, o el cumplimiento de WAI-AAA, no puedo recordar exactamente lo que falló, pero algo falló cuando guiones eran en el cuerpo). Esto generalmente iría junto con la recomendación de colocar todos los scripts en archivos externos y vincularlos con un script src = "" tag.

Lógica: Tal vez fue recomendado por el W3C como una manera de preservar el cuerpo para el marcado más semántico. Creo que también, históricamente, esta lógica era importante en días en que Internet era generalmente mucho más lenta: algunos navegadores estaban configurados para rechazar scripts y estilos e imágenes basados ​​en diagnósticos de conectividad de Internet &, y tener un script en la cabeza es una forma de decirle a los navegadores "está bien rechazar este script si los problemas de conectividad lo justifican", ya que los scripts en el cuerpo se consideran semánticamente como parte integral del contenido. Sin embargo, esto es un matiz y está basado en recomendaciones W3C probablemente anticuadas, por lo que sería difícil encontrar un navegador que realmente funcione de esta manera en estos días.

Hoy en día solo afecta cómo se comporta la página durante el proceso.

Precaución: Esto no debe aplicarse a las secuencias de comandos que no afectan el contenido encima del pliegue - mejor aplazar su carga poniéndolos justo antes de la etiqueta de cuerpo de cierre para que los usuarios puedan ver los anteriores el contenido doblemente más rápido (sin tener que esperar a que se carguen las secuencias de comandos de bloqueo de representación). Esta es una recomendación clave de velocidad de Google y Yahoo

0

La etiqueta de cabecera se carga antes del cuerpo, por lo que se debe colocar allí el código JavaScript necesario para cargar correctamente el sitio web, pero si no se requiere, la mayoría de las personas cree que es mejor ponlo al final de tu etiqueta corporal.

1

En el pasado, la única razón para poner JS en la cabeza era para las secuencias de comandos que modifican cómo el navegador realmente representa la página (como Chris Pratt señalado). Hoy, que ya no es el caso, sin embargo:

  • Si todavía te importa mucho sobre el apoyo y el rendimiento en el IE < 10, sigue siendo el mejor método para hacer su escritura etiqueta las últimas etiquetas de su cuerpo HTML. De esta forma, está seguro de que el resto del DOM se ha cargado y no se bloqueará ni se renderizará.

  • Si no se preocupan mucho más sobre IE < 10, es posible que desee poner los guiones en la cabeza de su documento y utilizar defer para asegurarse de que sólo se ejecutan después de la DOM se ha cargado (<script type="text/javascript" src="path/to/script1.js" defer></script>). La belleza de este enfoque es que defer no bloquea la carga del resto del DOM. Si aún desea que su código funcione en IE < 10, ¡no olvide envolver su código en un window.onload incluso!

Cuestiones relacionadas