2012-08-02 15 views
20

He leído que es mejor mantener todos tus archivos de JavaScript en la parte inferior de la página web. La plantilla HTML5 Boilerplate parece estar de acuerdo: http://html5boilerplate.com/JavaScript en la parte inferior de la página?

Y parece ser ampliamente utilizado.

Mi pregunta es: primero, ¿tiene esto alguna base real? He probado en Firebug y parece tener un pequeño efecto, pero ¿es trivial? Las imágenes y otras fuentes no parecen comenzar a cargarse hasta que se carguen los archivos CSS y de script, pero pegarlos en la parte inferior no parece hacer mucha diferencia en absoluto.

+1

La mayoría de los scripts requieren el DOM cargado que no está garantizado si los tiene en la parte superior de la página.Sin embargo, hay excepciones, por alguna razón, modenizer.js debe agregarse a la parte superior de la página, ya que debe ejecutarse antes de que el DOM esté completamente cargado. Cuando se utiliza el documento jQuery listo, por ejemplo, se activa cuando el DOM está completamente cargado, pero antes de las imágenes. Sin embargo, cuando se usa la ventana lista, se dispara después de que las imágenes se cargan también. – Nope

+0

Buena explicación de la ubicación de JavaScript en la página en http://robertnyman.com/2008/04/23/where-to-include-javascript-files-in-a-document/. –

Respuesta

28

Es muy importante por razones de buenas prácticas.

¡Cuando tiene scripts cargados en su encabezado, detienen que otras descargas sucedan! Esto incluye su estilo y también evitará que las imágenes se descarguen hasta que el script haya finalizado.

Esto se debe a que los archivos JavaScript se cargan sincrónicamente.

También tenga en cuenta que obtendrá un flash of unstyled content (FOUT) durante la carga si no mueve los archivos JavaScript al final de la página. Esto se debe a que su CSS no se descargará hasta que el script haya terminado de cargarse.


Aquí es un extracto de la regla de rendimiento Yahoo 6.

El segundo problema causado por los scripts está bloqueando 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. (He conseguido que Internet Explorer descargue más de 100 imágenes en paralelo.) Sin embargo, mientras se descarga una secuencia de comandos, el navegador no iniciará ninguna otra descarga, incluso en diferentes nombres de host.


Referencias

http://developer.yahoo.com/performance/rules.html/

Especialmente en cuenta rule 6.

+1

también ver http://en.wikipedia.org/wiki/Flash_of_unstyled_content – underbar

+0

@underbar Gracias por el aviso, incluiré eso en mi respuesta – Undefined

+3

Nota hay excepciones. Algunos scripts requieren ejecutarse primero y deben estar en la parte superior de la página. Modernizr.js es uno de ellos. Sin embargo, por qué. – Nope

2

Básicamente, cuando el navegador llega a una etiqueta <script>, deja de cargar el resto del documento hasta que se carga y se ejecuta <script>.

4

JavaScripts se cargan de forma sincronizada. Vincúlelo con tamaños de archivo generalmente más grandes, y tiene contenido que se demora en la carga debido a la carga de JavaScript sincrónica. Si coloca los JavaScripts en la parte inferior de la página, todo lo demás se carga primero y la carga de JavaScript no puede bloquear nada.

14

Recientemente tuvimos este debate en la oficina. Escribí a lengthy post donde establezco mi opinión sobre el tema. La respuesta corta es que realmente depende de lo que estás haciendo. Para las páginas web orientadas a contenido, la colocación de fondo parece funcionar mejor. Sin embargo, cuando uno está creando aplicaciones web donde la funcionalidad es la principal prioridad, la ubicación en la parte superior tiene sus ventajas.

+5

+1 todas las respuestas y blogs y opiniones que he visto sobre el tema prácticamente repiten los mismos 3 hechos y encima. Eres la primera persona en dar un mundo real que "depende de lo que estás haciendo". Bien hecho. – monsto

Cuestiones relacionadas