Estoy incluyendo todos mis JS como archivos externos que se cargan en la parte inferior de la página. Dentro de estos archivos, tengo varios métodos definidos así, que llamo desde el evento listo:
var SomeNamepsace = {};
SomeNamepsace.firstMethod = function () {
// do something
};
SomeNamepsace.secondMethod = function () {
// do something else
};
$(document).ready(function () {
SomeNamepsace.firstMethod();
SomeNamepsace.secondMethod();
});
Sin embargo, cuando elimino la función lista y llamo a los métodos directamente, todo funciona igual, pero se ejecuta significativamente más rápido, ¡casi un segundo más rápido en un archivo bastante básico! Dado que el documento debe cargarse en este punto (ya que todo el marcado viene antes de las etiquetas del script), ¿hay alguna buena razón para seguir usando el evento ready?
javascript
jquery
html
inquieto
fuente
fuente
Respuestas:
Gran pregunta.
Existe cierta confusión en torno a todo el consejo de "poner scripts al final de la página" y qué problema (s) intenta resolver. Para esta pregunta, no voy a hablar sobre si poner scripts en la parte inferior de la página afecta el rendimiento / tiempos de carga o no. Solo voy a hablarte de si necesitas
$(document).ready
si también pones scripts al final de la página .Supongo que está haciendo referencia al DOM en esas funciones que está invocando inmediatamente en sus scripts (cualquier cosa tan simple como
document
odocument.getElementById
). También supongo que solo está preguntando por estos archivos [de referencia DOM]. IOW, los scripts de biblioteca o los scripts que requiere su código de referencia DOM (como jQuery) deben colocarse antes en la página.Para responder a su pregunta : si incluye sus scripts de referencia DOM en la parte inferior de la página, no, no es necesario
$(document).ready
.Explicación : sin la ayuda de
"onload"
implementaciones relacionadas, como$(document).ready
la regla general es: cualquier código que interactúe con elementos DOM dentro de la página debe colocarse / incluirse más abajo en la página que los elementos a los que hace referencia. Lo más fácil de hacer es colocar ese código antes del cierre</body>
. Vea aquí y aquí . También soluciona el temido error de "Operación abortada" de IE .Dicho esto, esto de ninguna manera invalida el uso de
$(document).ready
. Hacer referencia a un objeto antes de que se haya cargado es [uno de] los errores más comunes que se cometen al comenzar en DOM JavaScript (lo vi demasiadas veces para contarlo). Es la solución de jQuery al problema, y no requiere que tenga que pensar dónde se incluirá este script en relación con los elementos DOM a los que hace referencia. Esta es una gran victoria para los desarrolladores. Es solo una cosa menos en la que tienen que pensar.Además, a menudo es difícil o poco práctico mover todas las secuencias de comandos de referencia DOM al final de la página (por ejemplo, cualquier secuencia de comandos que emita
document.write
llamadas debe quedarse). Otras veces, está utilizando un marco que procesa alguna plantilla o crea piezas de JavaScript dinámico, dentro del cual hace referencia a funciones que deben incluirse antes de js.Finalmente, solía ser una "mejor práctica" introducir todo el código de referencia DOM
window.onload
, sin embargo, ha sido eclipsado por las$(document).ready
implementaciones por razones bien documentadas .Todo esto se suma
$(document).ready
como una solución muy superior, práctica y general al problema de referenciar elementos DOM demasiado pronto.fuente
defer
documento de scripts listo, se asegurará de que se ejecuten antes del código listo. ver: w3.org/TR/html5/the-end.html#the-end