JavaScript en <head> o justo antes de</body>?

estoy a punto de embarcarse en un nuevo proyecto web y planeo poner mis JS-scripts en la cabeza y antes de que termine el cuerpo mediante el siguiente esquema:JavaScript en <head> o justo antes de</body>?

secuencias de comandos que son esenciales para la UX de la la página va en la cabeza Cuando comencé a leer la web, las secuencias de comandos en el encabezado se cargan antes de que se cargue la página, por lo que tendría sentido colocar las secuencias de comandos que son esenciales para la experiencia del usuario allí.
Los guiones que no son esenciales para el diseño y UX (guiones de Google Analytics etc.) de la página van antes del </body>.

¿Es este un enfoque sensato?

Otro enfoque sería poner todos los scripts en el <head> y agregar atributos de aplazamiento a los scripts no esenciales; sin embargo, he leído que las versiones anteriores de FF no recogen el atributo defer.

Fuente

2011-10-13 timkl

Me gustaría saber esto también. –

Creo que es un enfoque perfectamente aceptable. Leí en alguna parte que 'diferir' no funciona en muchos navegadores, pero podría estar irremediablemente equivocado. – Bojangles

Supongo que se trata de gusto. Personalmente, los agrego antes de la etiqueta del cuerpo (en la cabeza) y también agrego pequeños fragmentos donde sea necesario dentro de la página. – ikromm

Creo que muchos desarrolladores ejecutan javascript justo antes del </body> para que se ejecute después de que se hayan procesado todos los elementos.

Sin embargo, si organiza su código correctamente, la posición en la página no importa.

Por ejemplo, cuando se utiliza jQuery, puede asegurarse de que el código no se corrieron hasta que la página y sus elementos están completamente prestados de la siguiente manera:

$(document).ready(function(){ 
    //Code here 
});

A continuación, la referencia de script se puede poner en el head etiqueta.

Actualización - etiquetas de script se debe hacer referencia justo antes </body>. Esto evita el bloqueo de renderizado mientras se cargan los scripts y es mucho mejor para la velocidad de percepción del sitio.

No se debe usar ningún javascript obtuso al usar esta técnica.

Fuente

2011-10-13 08:51:19 Curt

+19

No lo olvide, el contenido se carga más rápido cuando mueve las secuencias de comandos a la parte inferior. Suponiendo que ajax no se esté utilizando para cargar el contenido predeterminado de las páginas. – daveyfaherty

La posición es extremadamente importante, incluso cuando se usa 'DOMReady'. Muchos desarrolladores colocan etiquetas de JavaScript justo antes del '' porque todos los scripts se cargan y ejecutan ** sincrónicamente **. Cuando están en '', el renderizado de la página se detiene para descargar → analizar → ejecutar cada secuencia de comandos. – Lapple

(acumulación en ...) La razón principal para colocar SCRIPT en la parte inferior de la página consiste menos en asegurarse de que DOM esté cargado (aunque sea una razón importante) y más acerca de hacer que la página parezca RESPUESTA. Si carga scripts en la parte superior de la página, el navegador los descarga primero y su contenido espera hasta que se descarguen. Esto puede hacer que la página APARENTE para cargarse más despacio, lo que hace que los usuarios no estén contentos. – kingdango

Yo diría que es perfectamente sensato. Como dijiste, siempre que no muevas los scripts esenciales (por ejemplo, jQuery, Modernizr, etc.) desde el <head>, no deberías tener problemas.

Mover scripts no esenciales al pie de la página debería ayudar con la velocidad de carga percibida (eso y la minimización/concatenación de scripts).

Fuente

2011-10-13 08:47:53 Conan

Coloque el Javascript en un archivo separado y coloque un enlace en la parte de la cabeza del HTML.

Fuente

2011-10-13 08:49:10

Todo depende de lo que quiere decir con "esencial para UX". Estoy de acuerdo con que Modernizr aparezca temprano, por ejemplo, pero no todo debe cargarse de inmediato. Si está tratando de evitar un destello de texto sin estilo (FOUT), esa es una buena razón. Del mismo modo, si tiene scripts que afectan el aspecto de la página antes de que el usuario haga algo, debe cargarlos antes.

No olvides que la velocidad es parte de UX. No hay ninguna ventaja en tener alguna interacción de jquery lista para ejecutarse cuando el usuario aún no puede ver el contenido al que se aplica. La diferencia entre cargar los scripts al comienzo del final es cuestión de segundos.Si deja que la página se cargue primero, el usuario usará esos segundos para tomar la página, lo que le permitirá cargar los scripts sin molestar.

Su página se cargará más rápido si mueve las secuencias de comandos a la parte inferior de la página, y eso hace una diferencia en su pagerank en estos días.

Además, algunas versiones de IE arrojarán errores si intenta ejecutar un script antes de que el elemento al que hace referencia se haya cargado.

Como dice Ed, sus scripts deben almacenarse en un archivo separado y en el menor número de archivos posible.

Fuente

2011-10-13 08:53:22 daveyfaherty

Se debe colocar Javascript al final del documento para que no retrase la carga paralela de los elementos de la página. Esto requiere entonces que js se escriba de una manera específica, pero mejora la velocidad de carga de la página.

Además, es posible que host referencias como esta bajo un dominio diferente (sub). Las referencias a jquery deben apuntar a Google CDN también.

Consulte http://developer.yahoo.com/performance/rules.html para obtener más información.

Fuente

2011-10-13 08:53:50 Digbyswift

Una de las razones por las que desea colocar las secuencias de comandos antes del </body> es si manipulan el DOM sin interacción del usuario, por lo que deberá cargar el DOM para manipularlo. Otra forma de hacerlo es agregar un detector de eventos y ejecutar los scripts cuando la página se haya cargado, pero esto requerirá un código adicional, lo que puede complicarse si tiene muchos scripts, especialmente los que no ha escrito usted mismo. Ponerlos al final de la página también acelerará la carga de la página, aunque en el caso de los scripts manipuladores de DOM, es posible que obtengas algunos resultados no tan bonitos.

Fuente

2011-10-13 08:59:34 Nikoloff

Necesita poner marcadores ('') alrededor de la etiqueta '' en su respuesta. – naught101

JavaScript en <head> o justo antes de</body>?

Respuesta

Cuestiones relacionadas