tag - Javascript-cabeza, cuerpo o jQuery?
title of page html (3)
Aunque es una práctica común, poner etiquetas de script en la head no suele ser una buena idea, ya que mantiene la representación de la página hasta que se hayan descargado y procesado (salvo que se use async o defer y que el navegador los soporte).
La recomendación habitual es colocar etiquetas de script al final de la etiqueta del 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 la 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 algún script en línea en la parte superior de la etiqueta del body (por ejemplo, <script>minimal code here</script> ) que engancha cualquier burbujeo de eventos en document.body y los pone en cola para la acción cuando se carga el script, o simplemente le pide al usuario que espere.
Usar funciones como jQuery''s ready está bien, pero no es realmente necesario fuera de las bibliotecas (por ejemplo, si tienes el control de dónde estarán las etiquetas de script , generalmente no necesitas usarlas, pero si estás escribiendo un jQuery complemento que necesita hacer algo en la carga [que es relativamente raro, normalmente solo esperan ser llamados], generalmente lo haces).
Más lectura:
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? Entonces, una de las cosas que estoy preguntando es
<head>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>
difieren (en términos de funcionalidad) de
<body>
<!-- Code goes here -->
<script type="text/javascript">
alert("Hello world!");
</script>
</body>
Más importante aún, quiero centrarme en JS que modifica o usa elementos del DOM de cualquier manera. Así que sé que si pones algo como document.getElementById("test").innerHTML = "Hello world!" antes <element id="test"></element> en su cuerpo, 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 existe todavía Por lo tanto, debe, al igual que lo anterior, ir en la etiqueta <head> o justo antes de </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: el camino jQuery:
$(document).ready(function(){ /*Code goes here*/ });
De esta forma, no importa en qué lugar del cuerpo coloque el código, ya que solo se ejecutará cuando todo se haya cargado. La pregunta aquí es, ¿vale la pena importar una gran biblioteca JS simplemente 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?
El método más recomendado es colocarlo antes de la etiqueta </body> . El artículo de rendimiento de Yahoo también sugiere que, además de los complementos YSlow y Page Speed de Yahoo y Google, respectivamente.
Citando el artículo de Yahoo vinculado anteriormente:
El problema causado por los scripts es que bloquean las 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.
Cuando pones guiones en la etiqueta <head> , los navegadores van por ellos, manteniendo así otros elementos en espera hasta que se carguen los guiones que los usuarios percibirán como la carga lenta de la página. Esta es la razón por la cual debes poner scripts en la parte inferior.
Como para:
$(document).ready(function(){/*Code goes here*/});
Se dispara 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.
Es posible descargar javascripts en paralelo haciendo 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, descarga JQuery v1.7.2 minificado de Google, esta 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 estar almacenado en caché y por lo tanto no necesita ser descargado
Hay una muy buena charla técnica de Google sobre esto aquí http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp