example - ¿Debe el código de Jquery ir en encabezado o pie de página?
jquery wrap (9)
Aunque casi todos los sitios web todavía colocan Jquery y otros javascript en el encabezado: D, incluso revisa stackoverflow.com.
También te sugiero que te pongas la etiqueta antes del final del cuerpo. Puede verificar el tiempo de carga después de colocar en cualquier lugar. La etiqueta de secuencia hará una pausa en 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, por lo tanto, coloque css en la sección del encabezado.
¿Dónde está el mejor lugar para poner el código de Jquery (o un archivo Jquery separado)? ¿Las páginas se cargarán más rápido si lo coloco en el pie de página?
Justo antes de que </body> sea el mejor lugar según este enlace , tiene sentido.
Lo mejor que puedes hacer es ponerte a prueba por ti mismo.
La mayoría del código jquery se ejecuta en el documento listo, lo que no sucede hasta el final de la página de todos modos. Además, el renderizado de páginas puede retrasarse mediante el análisis / ejecución de JavaScript, por lo que es una buena práctica poner todos los javascript en la parte inferior de la página.
La práctica estándar es colocar todas las secuencias de comandos en la parte inferior de la página, pero uso ASP.NET MVC con una cantidad de complementos de jQuery, y creo que todo funciona mejor si coloco mis scripts jQuery en la sección <head> de la página maestra
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 utilizando el complemento jQuery TreeView, y si los scripts no se cargan al principio, el árbol se representará sin las clases de CSS necesarias impuestas por el complemento. Así que obtienes este desorden divertido cuando la página se carga por primera vez, seguido de la representación adecuada de TreeView. Muy mal aspecto. Poner los complementos jQuery en la sección <head> de la página maestra elimina este problema.
Para mí jQuery es un poco especial. Quizás una excepción a la norma. Hay tantos otros scripts que se basan en él, por lo que es muy importante que se cargue antes de tiempo para que los otros scripts que vienen después funcionen como se esperaba. Como alguien más señaló, incluso esta página carga jQuery en la sección principal.
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, fragmento de formulario de inicio de sesión ajax) con código dependiente jQuery; si jQuery se carga en la parte inferior de la página, aparece el error "$ no definido", lindo.
Hay formas de solucionar esto, por supuesto (como no incluir ningún JS y anexar un paquete js de carga en el fondo), pero ¿por qué perder la libertad de js con poca carga, de poder colocar el código dependiente de jQuery en cualquier lugar que le plazca ? El motor de Javascript no se preocupa de dónde reside el código en el DOM siempre que se satisfagan las dependencias (como jQuery que se está cargando).
Para sus archivos js comunes / compartidos, sí, colóquelos antes de </body> , pero para las excepciones, donde realmente tiene sentido aplicación de mantenimiento para pegar un fragmento dependiente de jQuery o referencia de archivo allí en ese punto en el html hazlo
No hay ningún golpe de rendimiento cargando jquery en la cabeza; ¿Qué navegador en el planeta aún no tiene el archivo jQuery CDN en caché?
Mucho ruido y pocas nueces, pega jQuery en la cabeza y deja que tu js libertad reine.
Ponga scripts 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 no descarguen más de dos componentes en paralelo por nombre de host. Si sirve sus imágenes desde múltiples nombres de host, puede obtener más de dos descargas en paralelo. Sin embargo, mientras se descarga una secuencia de comandos, el navegador no iniciará ninguna otra descarga, incluso en diferentes nombres de host. En algunas situaciones, no es fácil mover los scripts al final. Si, por ejemplo, el script usa document.write para insertar parte del contenido de la página, no se puede mover más abajo en la página. También podría haber problemas de alcance. En muchos casos, hay formas de solucionar estas situaciones.
Una sugerencia alternativa que a menudo aparece es usar scripts diferidos. El atributo DEFER indica que la secuencia de comandos no contiene document.write, y es una pista para los navegadores que pueden continuar la representación. Desafortunadamente, Firefox no es compatible con el atributo DEFER. En Internet Explorer, el script puede diferirse, pero no tanto como se desee. Si un script se puede aplazar, 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:
Nimbuz ofrece 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: secuencias de comandos o imágenes?
Hay algunas páginas que no tienen sentido sin las imágenes, pero solo tienen scripts menores y no esenciales. En ese caso, tiene sentido colocar las secuencias de comandos en la parte inferior, de modo que el usuario pueda ver las imágenes antes y comenzar a darle sentido a la página. Otras páginas se basan en scripts para funcionar. En ese caso, es mejor tener una página de trabajo sin imágenes que una página no trabajada con imágenes, por lo que tiene sentido colocar scripts en la parte superior.
Otra cosa a considerar es que los scripts son típicamente más pequeños que las imágenes. Por supuesto, esto es una generalización y debes ver si se aplica a tu 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 hacer lo contrario), ya que no retrasarán las imágenes tanto como las imágenes retrasarían las secuencias de comandos. Finalmente, es mucho más fácil tener un script en la parte superior, ya que no tiene que preocuparse de si están cargados aún cuando los necesite.
En resumen, tiendo a colocar scripts en la parte superior de manera predeterminada y solo considero si vale la pena moverlos a la parte inferior una vez que la página está completa. Es una optimización, y no quiero hacerlo prematuramente.
Todos los scripts deben cargarse por última vez
En casi todos los casos, es mejor colocar todas las referencias de scripts al final de la página, justo antes de </body> .
Si no puede hacerlo debido a problemas de plantillas y otras cosas, decore sus etiquetas de script con el atributo defer para que el navegador sepa que debe 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 límite en los que puede experimentar el parpadeo de la página u otros artefactos durante la carga de la página, que generalmente pueden resolverse simplemente colocando las referencias de su script jQuery en la etiqueta <head> sin el atributo defer . Estos casos incluyen jQuery UI y otros complementos como jCarousel o Treeview que modifican el DOM como parte de su funcionalidad.
Otras advertencias
Hay algunas bibliotecas que deben cargarse antes del DOM o CSS, como los polyfills. Modernizr es una de esas bibliotecas que debe colocarse en la etiqueta principal .