1. Inicio
  2. Pregunta y respuesta
  3. ¿Debo escribir un script en el cuerpo o en el encabezado del html?

¿Debo escribir un script en el cuerpo o en el encabezado del html?

2010-08-20 12 views

Respuesta

68

Me gustaría responder a esto con múltiples opciones en realidad, algunas de las cuales se renderizan en el cuerpo.

  • Coloque la secuencia de comandos de la biblioteca, como la biblioteca jQuery en la sección de encabezado.
  • Coloque la secuencia de comandos normal en la cabeza a menos que se convierta en un problema de carga de rendimiento/página.
  • Place script asociado con includes, dentro y al final de eso include. Un ejemplo de esto es.Controles de usuario ascx en páginas asp.net: coloque el script al final de ese marcado.
  • Coloque la secuencia de comandos que afecta el procesamiento de la página en el extremo del cuerpo (antes del cierre del cuerpo).
  • NO coloque la secuencia de comandos en el marcado como <input onclick="myfunction()"/> - mejor ponerlo en los controladores de eventos en el cuerpo del script en su lugar.
  • Si no puede decidir, póngalo en la cabeza hasta que tenga una razón para no hacerlo, como problemas de bloqueo de página.

Nota al pie: "Cuando lo necesita y no antes" se aplica a la última opción cuando el bloqueo de la página (perceptual velocidad de carga) - la percepción de los usuarios es emabrgo realidad, si se percieved para cargar más rápido, no cargue más rápido (a pesar de que las cosas todavía pueden estar ocurriendo en el código).

EDIT: referencias: discusión

Nota al margen: si coloca los bloques de script dentro de marcas, se puede efectuar en el diseño ciertos navegadores ocupando espacio (es decir, 7 y opera 9.2 se sabe que tienen este problema) así que colóquelos en un div oculto (use una clase CSS como: .hide { display: none; visibility: hidden; } en el div)

Normas: Tenga en cuenta que las normas permiten la ubicación la secuencia de comandos bloquea prácticamente en cualquier lugar si eso está en cuestión: http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html y http://www.w3.org/TR/xhtml11/xhtml11_dtd.html

EDIT2: Tenga en cuenta que, siempre que sea posible (¿siempre?), Debe colocar el Javascript real en archivos externos y hacer referencia a los mismos; esto no cambia la validez de la secuencia pertinente.

Fuente

2010-08-20 13:57:06

+2

¿Tiene una fuente que tenga más información sobre este problema de bloqueo de página o cómo los recursos de descarga del navegador? – Khoi

+0

@Khoi: el bloqueo de procesamiento de página es un problema comúnmente documentado. Editar la respuesta para proporcionar algunas otras referencias, ya que depende un poco del entorno (plataforma y navegador/versión) –

+0

muy informativo. ¡Gracias! – Khoi

3

Cabeza, o antes del cierre de la etiqueta del cuerpo. Cuando DOM carga JS se ejecuta, eso es exactamente lo que hace jQuery document.ready.

Fuente

2010-08-20 13:38:47

0

Siempre pongo mis scripts en el encabezado. Mis razones:

  1. me gusta separar el código y de texto (estático)
  2. por lo general me carga mi guión a partir de fuentes externas
  3. El mismo guión se utiliza de varias páginas, por lo que se siente como un archivo de inclusión (que también va en el encabezado)

Fuente

2010-08-20 13:40:07

15

W3Schools tiene un nice article on this subject.

Scripts en <head>

secuencias de comandos que se ejecutarán cuando están llamada, o cuando se activa un evento, se colocan en funciones.

Ponga sus funciones en la sección de cabecera , de esta manera están todos en un lugar, y que no interfieran con contenido de la página.

Scripts en <body>

Si no desea que el script sea colocado dentro de una función, o si la secuencia de comandos debe escribir contenido de la página, que deben colocarse en la sección del cuerpo .

Fuente

2010-08-20 13:40:14 Vinz

+13

http://www.w3fools.com, tenga cuidado – angabriel

+4

Qué disparate ... –

35

El problema con la escritura de scripts al principio de la página es bloqueante. El navegador debe detener el procesamiento de la página hasta que la secuencia de comandos se descargue, analice y ejecute. La razón para esto es bastante clara, estos scripts pueden insertar más en la página cambiando el resultado del renderizado, también pueden eliminar cosas que no necesitan ser renderizadas, etc.

Algunos de los navegadores más modernos violan esta regla al no bloquear en la descarga de los scripts (ie8 fue el primero) pero en general la descarga no es la mayor parte del tiempo dedicado al bloqueo.

Echa un vistazo Even Faster Websites, acabo de leerlo y repasa todas las formas rápidas de obtener scripts en una página, incluyendo poner scripts en la parte inferior de la página para permitir que se complete el procesamiento (mejor UX).

Fuente

2010-08-20 13:43:30

+4

Buena respuesta, técnicamente poniendo en guiones el encabezado está limpio, pero desde el punto de vista del usuario final y SEO colocando scripts justo en la parte inferior del documento, ya que lo último tiene muchos, muchos beneficios. En algunas páginas, he visto que la aparente capacidad de respuesta de la página aumenta muchas veces simplemente moviendo el script hacia abajo. En general, es posible que no cargue completamente más rápido, pero para el usuario final, ya que ve contenido, se siente más rápido. –

+0

Esto parece bastante cierto, tengo un problema para retrasar la ejecución de mi script hasta que se hayan cargado todos mis recursos. Y he visto una página que tiene scripts cargados dentro del cuerpo, que cargan recursos tan efectivamente. ¿Podrías explicar esto más claramente? – Khoi

+0

¿La especificación dice que bloquear? ¿Es eso cierto? ¡Creo que bloquean por razones de representación y no porque ninguna especificación lo indique! – Rob

Cuestiones relacionadas

 Cuestiones relacionadas