¿Cuál es la mejor manera de incluir Javascript?

Question

Muchos de los grandes jugadores recomiendan técnicas ligeramente diferentes. Principalmente en la ubicación del nuevo <script>.

Google Anayltics:

(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); 
})(); 

Facebook:

(function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + 
    '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
}());: 

Disqus:

(function() { 
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
})(); 

(posteriores a los demás y voy a añadir ellos)

¿Hay alguna rima o razón para estas elecciones o no importa para nada?

Answer 1

Todos estos son efectivamente el mismo enfoque en espíritu. La idea es diferir las secuencias de comandos para que no se bloqueen entre sí o que el documento no se complete.

Es una práctica común cargar recursos externos adicionales después del contenido de su sitio. Al hacerlo, desea tanto a) evitar el bloqueo del evento de carga para que su página se "finalice" más rápidamente, yb) cargar recursos en paralelo, lo cual hace lo anterior.

Steve Souders afirma que la "mejora progresiva" es el concepto más importante para el rendimiento del sitio en la actualidad. Este concepto sugiere que entregue su página base lo más rápido posible y luego entregue contenido/servicios adicionales según sea necesario, ya sea en el evento de carga o cuando el usuario lo solicite.

Actualmente hay marcos que ayudan. Ver http://headjs.com/

Answer 2

Creo que no se trata de la manera de agregar el script a su página, pero el script que recupera contenido de otro dominio solo se puede agregar de esta manera i-e escribiendo dinámicamente la etiqueta del script y agregándola a su documento. Todas las secuencias de comandos anteriores están haciendo lo mismo a su manera, para que pueda hacerlo como desee.

Answer 3

Existen varias razones diferentes para hacer esto ... primero, algunos navegadores descargarán etiquetas de scripts dinámicamente agregados de forma asíncrona. En segundo lugar, la secuencia de comandos puede manejar cuando la página de destino es http vs. https para evitar errores de contenido.

Como mencionó joe head.js es útil ... s es la división de dominio de sus propios scripts. Para sus propios recursos de script, es mejor diseñar su sitio con la menor cantidad posible de js en la parte superior (etiquetado html5shiv y browser/js para css) ... luego tenga su js en las antiguas etiquetas < script src = ""> justo antes del elemento del cuerpo de cierre.

Los navegadores descargarán primero el contenido necesario de la página y más adelante ... esto le dará la carga percibida más rápida de forma no bloqueante. La modularización de sus scripts para un flujo de trabajo en conjunto e inicializar in-page solo lo que necesita ejecutarse permite un mejor uso del almacenamiento en caché.

Guarde los recursos de su script en o debajo de archivos de 6 js. y cerca del mismo tamaño que el otro como razonable.

El libro de Souder "Incluso sitios web más rápidos" es una gran lectura sobre esto.