2011-02-18 15 views
16

En toda la documentación veo la etiqueta de script jQuery debajo de <title> en la cabeza, pero cuando voy a otros sitios (la plantilla initializr es la primera en mi cabeza), la colocan en la parte inferior del cuerpo (ya sabes, justo antes de </body>).¿Dónde pongo la etiqueta de script jQuery?

¿Cuál de estos dos es el correcto?

+1

@Jonathan Estoy preguntando específicamente a jQuery, específicamente porque es una biblioteca y parece que todos los demás javascript dependen de ella. –

+0

Claro, pero la otra pregunta también menciona a jQuery. –

+0

No importa si está en la parte superior o inferior. Publiqué una respuesta a una pregunta similar aquí: http://stackoverflow.com/a/21482906/680936 – reectrix

Respuesta

12

Citando al YDN Best Practices for Speeding Up Your Web Site:

Scripts ponen en la parte inferior

El problema causado por los scripts es que bloquean 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 las secuencias de comandos a la parte inferior. 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 utilizar 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.

Es curioso que la gente solía decir que cuando I should be slapped upside the head for doing thatI said that in 2009 y ahora es una buena práctica de repente ... algunos progresos.

4

Bueno, creo que hay que poner esto dentro de una $(document).ready(function() { para que el documento esté lista antes de que llama al jQuery. Personalmente también puse justo antes del </body>. Ahora que ambas cosas funcionan, ¿hay una manera "correcta" o solo es una cuestión de preferencia personal?

Sin embargo, me encantaría escuchar a los expertos.

+0

Hay una versión interesante de cómo poner scripts en el fondo elimina la necesidad de document.ready aquí http://stackoverflow.com/a/4644026/362477 – iamnotsam

4

El libro de Steve Souders High Performance Web Sites recomienda colocar scripts en la parte inferior, antes de la etiqueta </body>. También puede encontrar esto documentado en el sitio developer.yahoo.com here. (Es la cuarta recomendación en la lista.)

Generalmente pongo los scripts en la parte inferior, antes de mi etiqueta '' y he tenido algunos problemas con esto. Me di cuenta de que esto ayuda a mejorar el rendimiento de los navegadores más antiguos, como IE7, mucho más que con los más nuevos, como FF3.6, Chrome e IE9. Los navegadores más antiguos solo admiten 2 descargas paralelas, mientras que los más nuevos admiten algo 6 conexiones. El bloqueo, como resultado, no es tan notable.

Espero que esto ayude!

Cuestiones relacionadas