Qué es Pros y contras: colocar javascript en la cabeza y ponerlo justo antes de cerrar el cuerpo

La mayoría de los libros/artículos de desarrollo web y javascript dicen que debes poner CSS en la etiqueta principal y javascript en la parte inferior de la página.Qué es Pros y contras: colocar javascript en la cabeza y ponerlo justo antes de cerrar el cuerpo

Pero cuando abro la fuente html de sitios web famosos como este stackoverflow, encuentro que ponen algunos archivos js en la etiqueta head.

¿Qué ventajas y desventajas tienen ambos enfoques y cuándo utilizarlos?

encontrado otra pregunta para el mismo tema: Where should I declare JavaScript files used in my page? In <head></head> or near </body>?

Fuente

2010-03-16 Amr Elgarhy

http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom-correct – froadie

Vea también: http://stackoverflow.com/questions/1013112/where-should-i- declare-javascript-files-used-in-my-page-in-head-head-or-near y http://stackoverflow.com/questions/383045/is-put-scripts-at-the-bottom-correct – CMS

De Yahoo de Best Practices for Speeding Up Your Web Site:

El problema causado por los scripts es que bloquean 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 sirve sus imágenes desde múltiples nombres de host , puede obtener más de dos descargas de en paralelo. Mientras se descarga una secuencia de comandos , sin embargo, el navegador no iniciará ninguna otra descarga de , incluso en diferentes nombres de host .

En algunas situaciones, no es fácil mover las secuencias de comandos a en la parte inferior. Si, para el ejemplo , la secuencia de comandos 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 puede haber problemas de alcance. En muchos casos, existen formas de solucionar estas situaciones .

Una sugerencia alternativa que a menudo surge 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 admite el atributo DEFER. En Internet Explorer, el script puede diferirse, pero no tanto como deseado. Si un script se puede aplazar, también se puede mover al final de de la página. Eso hará que sus páginas web carguen más rápido.

Por lo tanto, en general, es preferible colocarlos en la parte inferior. Sin embargo, no siempre es posible, y a menudo no hace que mucha diferencia de todos modos.

Fuente

2010-03-16 00:39:23

Tengo un ejemplo que mueve un cuadrado alrededor de un lienzo y no funcionará si coloco el javascript en la parte del encabezado del HTML. Tiene que estar en la parte inferior del cuerpo después de que se haya declarado el Lienzo. ¿Hay alguna razón para esto o cómo mantendría todo mi Javascript en la sección del archivo? –

@DougHauf ¿No estoy seguro si soy exacto en esto pero ha agregado un oyente DOMContentLoaded? Lo pregunto porque si tienes tu script en la parte inferior y se lo renderiza bien al lienzo; es porque el lienzo ya se había cargado en la pantalla antes de intentar escribir en él. Ahora, si coloca el script en el encabezado, no dibujaría en el lienzo porque el lienzo aún no está allí.Entonces, si agrega el oyente, disparará su código de lona DESPUÉS de que el lienzo haya sido cargado. –

Cualquier código JavaScript en la cabeza será evaluado antes de que se cargue la página, es decir, la página se siente como que tarda más en cargar. Es un poco más difícil hacer que los eventos funcionen correctamente si todo el javascript está al final, pero jQuery prácticamente resuelve este problema por usted.

Fuente

2010-03-16 00:34:51 Draemon

¿Podría mencionar cómo jQuery resuelve este problema por interés? –

jQuery tiene una API para vincular controladores a eventos – Draemon

Realmente depende de su sitio web. Si está accediendo e invocando las funciones de JavaScript dentro del cuerpo, debe hacer referencia en el encabezado para que se cargue.De lo contrario, si solo va a llamar al JavaScript cuando se carga todo el documento, es aconsejable colocar el JavaScript al final del cuerpo. Al colocar el archivo .JS al final, carga la página completa y luego busca el archivo .JS. De esta forma, el usuario podrá ver rápidamente la página y, cuando se familiarice con la página, el archivo .JS ya se habrá descargado.

Fuente

2010-03-16 01:03:32 azamsharp

Como han dicho otras personas, cuando pones javascript en la cabeza, retrasa la renderización de la página hasta que se carguen las secuencias de comandos, lo que significa que la página puede tardar más en cargarse, especialmente si descargas grandes archivos de script.

Si mueve las etiquetas de secuencia de comandos al final de la página, se asegurará de que el navegador descargue imágenes y hojas de estilo antes de las etiquetas de secuencia de comandos y la página probablemente emita antes de que los scripts comiencen a ejecutarse. Esto también significa que si depende de alguna funcionalidad de sus scripts, esto no estará disponible hasta un momento después de que el usuario pueda ver la página.

Si está agregando estilos o elementos (etc. cambiando los campos de texto con algún tipo de editor más rico) esto será visible para el usuario como parpadeo.

Si agrega eventos de clic a elementos, no se podrá hacer clic hasta poco después de que los elementos estén visibles.

A veces estos problemas requieren que coloque sus scripts en la cabeza, otras veces estará bien colocándolos en la parte inferior.

En mi humilde opinión (completamente en contra de YSlow y muchas personas inteligentes) debe mantener sus scripts en la etiqueta de la cabeza, y simplemente confíe en que se almacenarán en caché la mayor parte del tiempo.

Fuente

2010-03-16 01:05:25 AHM

En general, debe colocar referencias de scripts en la parte inferior de su página. Los scripts no solo deben descargarse, sino que también deben evaluarse y ejecutarse antes de que se libere el bloque y la página continúe con el proceso de renderizado. Cosas como Modernizr deberían situarse en la parte superior porque hace algunas detecciones de funciones, así como calzas HTML5 que probablemente desee.

Otro motivo por el que desea intentar colocar scripts en la parte inferior de la página es Single Points of Failure o SPOF. Aquí es donde se agota el tiempo de espera de una secuencia de comandos o por algún otro motivo bloquea la ejecución de la página. Esto puede suceder mucho con bibliotecas publicitarias de terceros, etc.

Sí, puede que tenga que pensar un poco más acerca de cómo debe diseñar su aplicación, pero me pareció muy natural muy rápido para mí. He construido cientos de aplicaciones web en los últimos 4 años con el script en la parte inferior y puedo ver la diferencia. Puedo ser 500ms, podría ser 5000ms pero todo importa.

Fuente

2012-11-05 21:49:51

Qué es Pros y contras: colocar javascript en la cabeza y ponerlo justo antes de cerrar el cuerpo

Respuesta

Cuestiones relacionadas