Respuestas:
Todos los scripts deben cargarse al final
En casi todos los casos, es mejor colocar todas las referencias de su script al final de la página, justo antes </body>.
Si no puede hacerlo debido a problemas de plantillas y demás, decore sus etiquetas de script con el deferatributo para que el navegador sepa descargar sus scripts después de que se haya descargado el HTML:
<script src="my.js" type="text/javascript" defer="defer"></script>Casos de borde
Sin embargo, hay algunos casos extremos en los que puede experimentar parpadeo de la página u otros artefactos durante la carga de la página que generalmente se pueden resolver simplemente colocando sus referencias de script jQuery en la <head>etiqueta sin el deferatributo. Estos casos incluyen jQuery UI y otros complementos como jCarousel o Treeview que modifican el DOM como parte de su funcionalidad.
Advertencias adicionales
Hay algunas bibliotecas que deben cargarse antes del DOM o CSS, como polyfills. Modernizr es una de esas bibliotecas que debe colocarse en la etiqueta principal .
<head>. Si su marcado depende de que el complemento jQuery clasifique el contenido por usted, no tiene sentido colocar la referencia del complemento en la parte inferior de la página, ya que obtendrá un marcado funky en su página web hasta que se carguen los complementos. Las reglas deben seguirse hasta que ya no funcionen, momento en el que las reglas deben romperse.
Poner guiones en la parte inferior
El problema causado por los scripts es que bloquean las descargas paralelas. La especificación HTTP / 1.1 sugiere que los navegadores descarguen no más de dos componentes en paralelo por nombre de host. Si publica sus imágenes desde múltiples nombres de host, puede obtener más de dos descargas en paralelo. Sin embargo, mientras se descarga un script, el navegador no iniciará ninguna otra descarga, incluso en diferentes nombres de host. En algunas situaciones, no es fácil mover los guiones al final. Si, por ejemplo, el script usa document.write para insertar parte del contenido de la página, no se puede mover hacia abajo en la página. También puede haber problemas de alcance. En muchos casos, hay formas de solucionar estas situaciones.
Una sugerencia alternativa que a menudo surge es usar scripts diferidos. El atributo DEFER indica que el script no contiene document.write, y es una pista para los navegadores que pueden continuar procesando. Desafortunadamente, Firefox no admite el atributo DEFER. En Internet Explorer, el script puede diferirse, pero no tanto como se desee. Si se puede diferir un script, también se puede mover al final de la página. Eso hará que sus páginas web se carguen más rápido.
EDITAR: Firefox admite el atributo DEFER desde la versión 3.6.
Fuentes:
Solo cargue jQuery en la cabeza, a través de CDN, por supuesto.
¿Por qué? En algunos escenarios, puede incluir una plantilla parcial (por ejemplo, un fragmento de formulario de inicio de sesión ajax) con código incrustado dependiente de jQuery; si jQuery se carga en la parte inferior de la página, aparece el error "$ no está definido", muy bien.
Por supuesto, hay formas de solucionar esto (como no incrustar ningún JS y agregar un paquete js de carga en la parte inferior), pero ¿por qué perder la libertad de js con carga lenta, de poder colocar el código dependiente de jQuery en cualquier lugar que desee ? Al motor de Javascript no le importa dónde vive el código en el DOM siempre que se satisfagan las dependencias (como la carga de jQuery).
Para sus archivos js comunes / compartidos, sí, colóquelos antes </body>, pero para las excepciones, donde realmente tiene sentido el mantenimiento de la aplicación para pegar un fragmento dependiente de jQuery o una referencia de archivo allí mismo en ese punto del html, hágalo.
No hay golpe de rendimiento cargando jquery en la cabeza; ¿Qué navegador del planeta aún no tiene el archivo jQuery CDN en caché?
Mucho ruido y pocas nueces, pegue jQuery en la cabeza y deje que su libertad js reine.
2%, digamos, la mitad se irá antes de que la página se cargue por primera vez. De esta manera está perdiendo 1%visitantes, pero potencialmente ahorrándose mucho tiempo de desarrollo y problemas. A ver si esto tiene sentido con su modelo de negocio ...
Nimbuz proporciona una muy buena explicación del problema involucrado, pero creo que la respuesta final depende de su página: ¿qué es más importante para el usuario tener antes: scripts o imágenes?
Hay algunas páginas que no tienen sentido sin las imágenes, pero solo tienen secuencias de comandos menores y no esenciales. En ese caso, tiene sentido colocar scripts en la parte inferior, para que el usuario pueda ver las imágenes antes y comenzar a darle sentido a la página. Otras páginas dependen de los scripts para funcionar. En ese caso, es mejor tener una página de trabajo sin imágenes que una página que no funciona con imágenes, por lo que tiene sentido colocar scripts en la parte superior.
Otra cosa a tener en cuenta es que los scripts suelen ser más pequeños que las imágenes. Por supuesto, esta es una generalización y debe ver si se aplica a su página. Si lo hace, entonces, para mí, es un argumento para ponerlos primero como regla general (es decir, a menos que haya una buena razón para hacerlo de otra manera), porque no retrasarán las imágenes tanto como las imágenes retrasarían los guiones. Finalmente, es mucho más fácil tener una secuencia de comandos en la parte superior, porque no tiene que preocuparse por si están cargados todavía cuando necesita usarlos.
En resumen, tiendo a colocar los scripts en la parte superior de forma predeterminada y solo considero si vale la pena moverlos al final una vez que se completa la página. Es una optimización, y no quiero hacerlo prematuramente.
La mayoría del código jquery se ejecuta en el documento listo, lo que no ocurre hasta el final de la página de todos modos. Además, la representación de la página puede retrasarse por el análisis / ejecución de JavaScript, por lo que es una buena práctica colocar todos los JavaScript en la parte inferior de la página.
La práctica estándar es poner todos sus scripts en la parte inferior de la página, pero uso ASP.NET MVC con una serie de complementos jQuery, y encuentro que todo funciona mejor si pongo mis scripts jQuery en la <head>sección del maestro página.
En mi caso, hay artefactos que ocurren cuando se carga la página, si los scripts están en la parte inferior de la página. Estoy usando el complemento jQuery TreeView, y si los scripts no se cargan al principio, el árbol se renderizará sin las clases CSS necesarias impuestas por el complemento. Entonces obtienes este desorden de aspecto divertido cuando se carga la página por primera vez, seguido de la representación adecuada de TreeView. Muy mal parecido. Poner los complementos jQuery en la <head>sección de la página maestra elimina este problema.
@Html.Action, que escribe dinámicamente un resultado en la salida, ya que mi parcial da $ is undefinedsignificado, en cambio, tengo que usar .load ('@ Url.Action') para cargar el parcial. Pero esto da una falta debido a la solicitud adicional. Según su aporte, simplemente moveré jquery sobre RenderBody () en mi página maestra
Aunque casi todos los sitios web todavía colocan Jquery y otros javascript en el encabezado: D, incluso verifique stackoverflow.com.
También le sugiero que se ponga antes de la etiqueta final del cuerpo. Puede verificar el tiempo de carga después de colocar en cualquiera de los lugares. La etiqueta de script pausará su página web para cargar más.
y después de colocar javascript en el pie de página, puede obtener un aspecto inusual de su página web hasta que cargue javascript, así que coloque css en su sección de encabezado.
Justo antes de que </body>es el mejor lugar de acuerdo con Yahoo Developer Network 's mejores prácticas para acelerar la tramitación de su sitio web en este enlace , tiene sentido.
Lo mejor que puedes hacer es probarlo tú mismo.
Para mí, jQuery es un poco especial. Tal vez una excepción a la norma. Hay muchos otros scripts que dependen de él, por lo que es bastante importante que se cargue temprano para que los otros scripts que vengan después funcionen según lo previsto. Como alguien más señaló, incluso esta página carga jQuery en la sección de encabezado.