pagina - javascript donde ponerlo

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

Estoy a punto de embarcarme en un nuevo proyecto web y planeo poner mis scripts JS en la cabeza y antes del cuerpo final usando el siguiente esquema:

Los scripts que son esenciales para el UX de la página van 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 scripts que no son esenciales para el diseño y UX (scripts de Google Analytics, etc.) de la página van antes del </body> .

¿Es este un enfoque sensato?

Otro enfoque sería colocar 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.

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

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, al usar jQuery, puede asegurarse de que el código no se ejecute hasta que la página y sus elementos se procesen por completo haciendo lo siguiente:

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

Entonces la referencia del script se puede poner en la etiqueta de la head .

Actualización: las etiquetas de scripts deben referenciarse justo antes de </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.

Javascript debe colocarse al final del documento para que no retrase la carga paralela de elementos de 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, idealmente podría alojar referencias como esta bajo un (sub) dominio diferente. 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.

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 olvide, sin embargo, 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.

Una de las razones por las que querría colocar scripts antes del </body> es si manipula el DOM sin la interacción del usuario, por lo que necesitará que el DOM se cargue para poder ser manipulado. 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.

Yo diría que eso es perfectamente sensato. Como dijiste, siempre y cuando no muevas las secuencias de comandos esenciales (por ejemplo, jQuery, Modernizr, etc.) desde <head> , no deberías tener problemas.

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