2010-07-29 11 views
7

Editar: Aunque esta pregunta ha sido formulada y respondida antes (1), (2), (3), las respuestas no han mencionado la posibilidad de utilizar carga asíncrona y/o perezoso si se incluyen los archivos de la <head>. Me pidieron que hiciera la pregunta debido al nuevo código de Google Analytics que usa ambos métodos.¿Cuáles son los pros y los contras de incluir Javascript justo antes de la etiqueta</head> frente a la etiqueta</body>?


poco me di cuenta de que Google Analytics es ahora lo que sugiere incluyendo su fragmento de código JavaScript justo antes de la etiqueta </head>. Solían sugerir incluir el fragmento justo antes de la etiqueta </body>.

El YUI Best Practices for Speeding Up Your Web Site sugiere poner guiones tan lejos en la página como sea posible, ya que los scripts pueden bloquear descargas paralelas:

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.

Google dice:

Una de las principales ventajas del fragmento asíncrono es que se puede colocar en la parte superior del documento HTML. Esto aumenta la probabilidad de que la baliza de seguimiento se envíe antes de que el usuario abandone la página. Es habitual colocar código JavaScript en la sección <head>, y recomendamos colocar el fragmento en la parte inferior de la sección <head> para obtener el mejor rendimiento.

general estoy más preocupado por la experiencia del usuario y la velocidad de carga que asegurarse de todos y cada baliza de seguimiento se envía, así que esto me empujaría hacia la inclusión de la secuencia de comandos de análisis de Google hacia la parte inferior de la página, en lugar de en el <head>, ¿verdad?

Estoy seguro de que hay más cosas que considerar que estos dos puntos de vista. ¿Cuáles son las cosas que te influyen? ¿Cuáles son las cosas a considerar?

Así que, ¿cuáles son los pros y los contras de tener sus guiones derecho berfore </head> frente justo antes </body>?

+1

http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body –

+0

@Amr - Eso responde a eso la pregunta no cubre la carga asíncrona o diferida del script. –

Respuesta

7

El consejo sobre <head> es no a LINK TO EXTERNAL scripts que necesitan ser descargados. Esto bloquea descargas paralelas. El código de seguimiento más nuevo de Google usa lazy loading, y no bloquea descargas paralelas.

(function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 
2

guiones poner en el <head> forzarán el navegador para descargar archivos antes de que se muestra la página y bloquea las descargas paralelas. Si coloca sus scripts justo antes de la etiqueta </body> final, el navegador los analizará después de su contenido, lo que debería dar como resultado una carga de página más rápida.

Al utilizar la función anónima autoejecutable con async=true, no bloquea la descarga paralela.

Para aplicaciones realmente complejas con modales, una estafa de poner una secuencia de comandos justo antes del </body> sería si necesitara ocultar un modal si JS está habilitado.

<head> 
<script>document.documentElement.className+='js';</script> 
<style>html.js #modal { display:none; }</style> 
</head> 

Si el fragmento anterior se colocó antes </body> no será analizado tan pronto como si fuera en la cabeza. Habría ciertos casos e inconsistencias en términos de tiempo de dom ready que también podría notar.

pregunta relacionada: Where should I declare JavaScript files used in my page? In <head></head> or near </body>?

3

Mi conjetura, además de lo que las otras personas han dicho hasta ahora, es por lo que los análisis pueden rastrear con mayor precisión las visitas. A veces, alguien irá a un sitio y se irá antes de que se haya descargado toda la página. Si lo hacen, hay una mayor probabilidad de que hayan descargado el código de seguimiento si está más cerca de la parte superior de la página. Esto debería ayudar a quienes analizan las estadísticas a ver las tasas de rebote. Si nota que su porcentaje de rebote es alto (y el tiempo en la página es bajo), podría ser un indicador de que su página está tardando demasiado para la mayoría de las audiencias y debería alertarlo para que haga algo para acelerar la carga de su página.

Cuestiones relacionadas