vitae - JavaScript en la parte inferior de la página?

tequila carbohidratos

Question

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/

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.

Answer 1

Los JavaScripts se cargan sincrónicamente. 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.

Answer 2

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

Answer 3

Recientemente tuvimos este debate en la oficina. Escribí una publicación larga donde establecí 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 al contenido, la colocación inferior 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.

Answer 4

Es muy importante por razones de buenas prácticas.

Cuando tienes scripts cargados en tu encabezado, impiden que se realicen otras descargas. 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 de contenido sin estilo (FOUT) durante la carga si no mueve sus archivos de 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í hay un extracto de la regla de rendimiento de Yahoo 6.

El segundo problema causado por los scripts es el bloqueo de 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/

Observe especialmente la regla 6 .