2012-06-12 15 views
46

Esta pregunta es solo para aclarar algunas cosas. Algunas cosas como esta se han preguntado antes, y esto los redondea a todos en una sola pregunta: ¿a dónde debe ir JavaScript en el documento HTML o, más importante aún, qué importancia tiene? Así, una de las cosas que estoy preguntando es, ¿Javascript - cabeza, cuerpo o jQuery?

<head> 
<script type="text/javascript"> 
alert("Hello world!"); 
</script> 
</head> 

en todos difieren (en términos de funcionalidad) de

<body> 
<!-- Code goes here --> 
<script type="text/javascript"> 
alert("Hello world!"); 
</script> 
</body> 

que es más importante, me quiero centrar en JS que modifica o usos elementos del DOM de cualquier manera. Así que sé que si coloca algo como document.getElementById("test").innerHTML = "Hello world!" antes de <element id="test"></element> en su cuerpo, entonces no funcionará ya que el cuerpo se carga de arriba a abajo, haciendo que el JS cargue primero, lo que luego intentará manipular un elemento que no funciona todavía existen Por lo tanto, debe, al igual que lo anterior, ir en el <head> o justo antes de la etiqueta </body>. La pregunta es, aparte de la organización y clasificación, ¿cuál es el elegido y, de ser así, de qué manera?

Por supuesto, también hay un tercer método - la forma en jQuery:

$(document).ready(function(){ /*Code goes here*/ }); 

De esa manera, no importa en qué parte del cuerpo se coloca el código, ya que sólo se ejecutará cuando todo ha cargado La pregunta aquí es, ¿vale la pena importar una enorme biblioteca JS solo para usar un método cuya necesidad podría ser reemplazada con una colocación precisa de sus scripts? Me gustaría aclarar un poco las cosas aquí, si quieres responder, ¡adelante! Resumen: ¿a dónde deben ir diferentes tipos de guiones, cabeza o cuerpo, y/o importa? ¿Vale la pena jQuery solo por el evento listo?

+1

Entonces la pregunta [¿Dónde debería declarar los archivos JavaScript usados ​​en mi página? En o cerca de?] (Http://stackoverflow.com/questions/1013112/where-should-i-declare-javascript-files-used-in-my-page-head-head-or-nea) no te lo aclaro? Y en cualquier caso, si está interesado en la funcionalidad de 'ready', puede echar un vistazo al código fuente y replicarlo si es necesario. –

+4

Su "método jQuery" se puede lograr con JavaScript nativo: 'window.onload = function() {}' - No se necesita biblioteca – Gary

+0

@Gary - bastante bien – Bluefire

Respuesta

50

El método más recomendado es ponerlo antes de la etiqueta </body>. Yahoo performance article también sugiere que los complementos YSlow y Page Speed de Yahoo y Google respectivamente.

Citando del artículo Yahoo vinculado anteriormente:

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 que 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, al .

Cuando se pone en guiones <head> etiqueta, los navegadores se aplica a ellos manteniendo así otras cosas en suspenso hasta que los scripts se cargan las que los usuarios percibirán como la lentitud de carga de la página. Esta es la razón por la cual debes poner scripts en la parte inferior.

cuanto a:

$(document).ready(function(){/*Code goes here*/}); 

Se desencadena cuando DOM está disponible y listo para ser manipulado. Si coloca el código al final, no necesariamente lo necesitará, pero generalmente es necesario porque desea hacer algo tan pronto como DOM esté disponible para su uso.

+0

Esta es una gran respuesta, pero ¿qué debe hacer si necesita usar algo como '$ (" td.speical-format "). Live()' en una tabla que viene antes de incluir jquery? –

+0

Si se va a poner fin, a continuación, utilice siempre un control de giro/cargador .. esto es porque si sus css/js es grande o grande en número a continuación, algunas de las cosas depende de jQuery no funcionará ... – DragonFire

+0

según su punto, su diciendo que deberíamos descargar los archivos de la biblioteca JS también en la parte inferior. a menos que usemos async, será un JavaScript de bloqueo de renderizado. Pero los archivos de la biblioteca JS deben estar listos cuando se complete el proceso de pintado para el JavaScript personalizado (por ejemplo: document.ready()) para ejecutar sus funciones ¿no? – lpradhap

26

Aunque la práctica común, poniendo script etiquetas en el head no suele ser una buena idea, ya que detiene la representación de la página hasta que esos guiones han sido descargados y procesados ​​(salvo el uso de async o defer y el navegador que soporte ellos).

La recomendación habitual es colocar las etiquetas script al final de la etiqueta body, por ejemplo, justo antes de </body>. De esta forma, se podrá acceder a todos los elementos DOM que se encuentran arriba del script (ver enlaces a continuación). Una advertencia es que puede haber un momento breve en el que su página se haya renderizado al menos parcialmente, pero sus scripts no se hayan procesado (aún), y si el usuario comienza a interactuar con la página, pueden hacer algo para generar un evento que tu guion no ha tenido tiempo de engancharse todavía. Entonces debes ser consciente de eso. Esta es una razón para mejora progresiva, que es la idea de que la página funcionará sin JavaScript, pero funcionará mejor con ella. Si está haciendo una página/aplicación que simplemente no funcionará sin JavaScript, puede incluir alguna secuencia de comandos en línea en la parte superior de la etiqueta body (por ejemplo, <script>minimal code here</script>) que enlaza cualquier evento de propagación en document.body y en cualquiera de las colas para la acción cuando se carga el script, o simplemente le pide al usuario que espere.

Uso de las funciones como jQuery de ready está fuera bien, pero no es realmente necesario de las bibliotecas (por ejemplo, si usted está en control de dónde serán los script etiquetas, por lo general no hay que usarla, pero si' Estamos escribiendo un complemento de jQuery que necesita hacer algo con la carga [que es relativamente raro, normalmente solo esperan ser llamados], normalmente lo hace).

Más lectura:

+0

Entonces, si estoy creando una aplicación para la que JS es integral, debería usar un enganche en línea; ¿Qué pasa si uno está haciendo una extensión de Chrome (donde JS en línea no está permitido)? – Bluefire

+0

@Bluefire: No dije que * debería *, solo que sería una forma de defenderse contra ese breve intervalo. ¿Estás diciendo que no puedes hacer el código '' en una extensión de Chrome? –

+0

No: D Estoy diciendo que no puedes hacer cosas como ''. Pensé que eso es lo que querías decir con "en línea". – Bluefire

4

Es posible descargar archivos JavaScript en paralelo al hacer algo como esto:

(function() { 
    var ele = document.createElement('script'); 
    ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; 
    ele.id = "JQuery"; 
    ele.onload = function() { 
     //code to be executed when the document has been loaded 
    }; 
    document.getElementsByTagName('head')[0].appendChild(ele); 
})(); 

En el ejemplo que se descarga JQuery v1.7.2 minificado de Google, esto es una buena forma de descargar JQuery ya que descargarlo de Google es como usar un CDN y si el usuario ha estado en una página que usó el mismo archivo, podría almacenarse en caché y no necesita descargarse

Hay una muy buena charla técnica de Google sobre esto aquí http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp

Cuestiones relacionadas