¿Debería el código Jquery ir en encabezado o pie de página?

Respuestas:

189

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 .

Chad Levy
fuente
55
Bueno, considere esto: themeforest.net/item/portfolious-professional-business-template/… . Es un tema del sitio que compré recientemente que presenta en su página de inicio el uso de jQuery con jCarousel. Cuando moví los bloques de script desde el encabezado hasta el final del archivo, noté que las imágenes utilizadas en el carrusel se mostraban todas a la vez durante la carga de la página, mientras que cuando los archivos de script estaban en el encabezado, la página se cargaba más suavemente.
Chad Levy el
55
Use CSS para establecer el estado inicial del contenido. CSS debe ir en la cabeza. Romper algo para hacer que algo funcione no es la solución. Si un visitante tiene que esperar a que se carguen jQuery y todos los complementos asociados antes de que se muestre cualquier contenido, es posible que no se quede el tiempo suficiente para ver el contenido.
Duncan
9
ChadLevy tiene razón: hay algunas condiciones bajo las cuales los complementos de jQuery funcionan mejor si están referenciados en el <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.
Robert Harvey
2
@Duncan: Idealmente, este sería el caso en el que puede controlar todas las dependencias. Lo que pasa con jQuery (más específicamente, cosas como jQuery UI y otros complementos) es, por diseño, que no puede tener un control completo sobre su funcionalidad, por lo que agregar algo como atributos de visibilidad a un elemento DOM para que se cargue con más gracia podría no ser posible si un complemento que use ese elemento no tendrá en cuenta dicho atributo. A veces es mejor desafiar una convención simple que tratar de obtener una dependencia que funcione de la manera que desee.
Chad Levy el
2
@Stefan: Si sus complementos jQuery no pueden manipular el DOM, ¿cuál es el punto?
Robert Harvey
229

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:

eozzy
fuente
44
He visto algunos consejos modernos que indican que los scripts deben colocarse en la parte superior. Colocar los scripts en la parte inferior permite que las imágenes y otro contenido en el cuerpo de la página se carguen en paralelo, pero efectivamente hace que los scripts en la página se carguen más tarde: todo el cuerpo HTML debe descargarse antes de que el navegador sepa las URL de script para cargar. La mayoría de la gente hace referencia a la guía de Yahoo, que ya no es precisa: Firefox sí cumple con los atributos diferidos en los scripts. El aplazamiento en la parte superior dará como resultado una carga de página más rápida si la mide.
ShadowChaser
¿Puedo ver algunas estadísticas sobre las velocidades de carga de la página con este método?
Gabriel Alack
1
Firefox admite el atributo DEFER desde la versión 3.6. Fuente: w3schools.com/tags/att_script_defer.asp
Nikita 웃
1
Actualización: a principios / mediados de 2016, todos los navegadores modernos han aumentado el número de conexiones por nombre de host a al menos 6.
Night Owl
32

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.

virtualeyes
fuente
1
muchos, muchos navegadores no lo hacen; aproximadamente el 2% es la cifra más alta que he leído, cuando se tiene en cuenta la versión y el almacenamiento en caché se basa en nombres de recursos exactos, por lo que jquery1.4.2 no es lo mismo que jquery1.7, o 1.9.1 o ... .
Toni Leigh
De esos 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 ...
osa
13

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.

EMP
fuente
Me tenía hasta que arrastró el argumento de optimización prematura. Esa es solo otra regla que las personas siguen dogmáticamente sin comprender completamente sus implicaciones.
Robert Harvey
66
¡Oh, bueno, no puedo ganarlos a todos! Creo que entiendo sus implicaciones. :)
EMP
No estoy seguro de que deba preocuparse si sus scripts se han cargado. Procesar bloques hasta que se haya cargado un script, que es de lo que trata la mayor parte de esta discusión. Entonces, siempre que no llame a nada antes de cargarlo, está bien. Y además, para eso están las devoluciones de llamada y realmente no deberías incluir mucho más en tu página. Según tengo entendido, las imágenes no se bloquean (se cargan en paralelo) y, de hecho, el DOM puede estar listo y sus scripts se ejecutan antes de que las imágenes se carguen por completo. No tiene sentido poner los scripts primero solo para evitar que se bloqueen.
Duncan
44
Dado que el consenso general es colocar guiones en la parte inferior, ¿no sería mejor hacerlo de forma predeterminada y solo moverlos al principio si tiene problemas? Parece extraño hacer las cosas al revés. A veces es mejor hacer lo óptimo si no hay diferencia en el esfuerzo realizado :)
Duncan
@ Duncan, sí, ese fue mi enfoque. Puse los complementos en la parte inferior, y cuando tuve problemas, los puse en la parte superior, y eso solucionó los problemas.
Robert Harvey
6

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.

Stefan Kendall
fuente
5

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.

Robert Harvey
fuente
Las intranets no están sujetas a las mismas condiciones que Internet, por lo que el retraso de carga es probablemente menos perceptible. Sin embargo, es recomendable seguir las reglas.
Duncan
no, poner los identificadores / estilos CSS en el marcado (en lugar de esperar a que jQuery lo haga en DOM listo) resuelve el problema.
Dan Beam
1
@Dan Beam: Treeview se completa a partir de una tabla de base de datos, y los estilos de Treeview se establecen mediante el complemento Treeview en función del contenido de la tabla, por lo que no, eso no funcionará.
Robert Harvey
1
¿Por qué debería hacer eso cuando puedo poner el script del complemento Treeview sin modificar en la parte superior de la página y funcionará bien? Eso no tiene ningún sentido, Dan.
Robert Harvey
1
Saludos Robert, también estoy usando ASP.NETMVC con formularios en parciales. Tiene sentido mantener el javascript dentro del parcial ya que los nuevos campos se vuelven a asignar a su funcionalidad cada vez que se ejecuta el parcial (por ejemplo, para la validación). Solo he enfrentado problemas con esto cuando intento usar @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
Malkin
4

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.

Mujah Maskey
fuente
2
Pero, podría lograr lo mismo usando diferir en el script. w3schools.com/tags/att_script_defer.asp
Jack Tuck
2

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.

Soufiane Hassou
fuente
0

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.

usuario3094826
fuente