La mayoría de los libros / artículos de desarrollo web y de javascript dicen que debe poner CSS en la etiqueta principal y javascript en la parte inferior de la página.
Pero cuando abro la fuente html de sitios web famosos como este stackoverflow, encuentro que colocan algunos archivos js en la etiqueta head.
¿Cuáles son los pros y los contras de ambos enfoques y cuándo usarlos?
Encontré otra pregunta para el mismo problema: ¿Dónde debo declarar los archivos JavaScript utilizados en mi página? ¿En <head> </head> o cerca de </body>?
javascript
Amr Elgarhy
fuente
fuente
Respuestas:
De las mejores prácticas de Yahoo para acelerar su sitio web :
Por tanto, en general, es preferible ponerlos en la parte inferior. Sin embargo, no siempre es posible, y que a menudo no hace que gran parte de una diferencia de todos modos.
fuente
Como han dicho otras personas, cuando pones javascript en la cabecera, se retrasa la presentación de la página hasta que se hayan cargado los scripts, lo que significa que la página puede tardar más en cargarse, especialmente si estás descargando archivos de script grandes.
Si mueve sus etiquetas de secuencia de comandos al final de la página, se asegurará de que el navegador descargue las imágenes y hojas de estilo antes de las etiquetas de secuencia de comandos y es probable que la página se muestre antes de que las secuencias de comandos comiencen a ejecutarse. Esto también significa que si depende de alguna funcionalidad de sus scripts, esto no estará disponible hasta un poco después de que la página sea visible para el usuario.
Si está agregando estilos o elementos (etc., cambiando los campos de texto con alguna forma de editor más rico), esto será visible para el usuario como parpadeando.
Si está agregando eventos de clic a elementos, no se podrá hacer clic en ellos hasta un poco después de que los elementos mismos sean visibles.
A veces, estos problemas requieren que pongas tus scripts en la cabeza, otras veces estarás bien pegándolos en la parte inferior.
En mi humilde opinión (completamente en contra de YSlow y de muchas personas inteligentes), debe mantener sus scripts en la etiqueta principal y confiar en ellos para que se almacenen en caché la mayor parte del tiempo.
fuente
En general, debe colocar referencias a secuencias de comandos al final de su página. Los scripts no solo deben descargarse, 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 deben colocarse en la parte superior porque realiza algunas detecciones de funciones, así como también shims de HTML5 que probablemente querrá.
Otra razón por la que desea colocar scripts en la parte inferior de la página son los puntos únicos de falla o SPOF. Aquí es donde se agota el tiempo de espera de una llamada de script o, por alguna otra razón, bloquea la ejecución de la página. Esto puede suceder mucho con bibliotecas publicitarias de terceros, etc.
Sí, es posible que tenga que pensar un poco más sobre cómo diseñar su aplicación, pero me pareció muy natural muy rápidamente. He creado cientos de aplicaciones web durante los últimos 4 años con el script en la parte inferior y puedo notar la diferencia. Puede que sea de 500 ms, puede que sea de 5000 ms, pero todo importa.
fuente
Realmente depende de tu sitio web. Si está accediendo e invocando las funciones de JavaScript dentro del cuerpo, entonces debe ser referenciado en el encabezado para que se cargue. De lo contrario, si solo va a llamar a JavaScript cuando se cargue todo el documento, es aconsejable colocar JavaScript al final del cuerpo. Al poner el archivo .JS al final, carga la página completa y luego recupera 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 ha descargado.
fuente
Cualquier javascript en el encabezado se evaluará antes de que se cargue la página, lo que significa que la página parece que tarda más en cargarse. 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 ti.
fuente