jQuery: ¿Por qué usar document.ready si JS externo está en la parte inferior de la página?

88

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?

inquieto
fuente
9
Interesante pregunta. Lamentablemente, las respuestas actuales no responden realmente a la pregunta y tampoco tengo buenas respuestas. Tal vez ayudaría reformular la pregunta como: "poner documentos JavaScript al final del archivo garantiza que el DOM se cargue antes de la ejecución"
Boris Callens

Respuestas:

116

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 documento document.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).readyla 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.writellamadas 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).readyimplementaciones por razones bien documentadas .

Todo esto se suma $(document).readycomo una solución muy superior, práctica y general al problema de referenciar elementos DOM demasiado pronto.

Creciente fresco
fuente
5
"Si incluye sus scripts de referencia DOM en la parte inferior de la página, no, no necesita $ (document) .ready". Ignorando el problema document.write que aborda más adelante en su publicación, esta respuesta asume ingenuamente que todo el CSS se descarga y procesa antes de ejecutar el javascript. Esto puede que no sea verdad; los navegadores pueden descargar archivos externos en paralelo.
Powerlord
8
no es del todo correcto, si tiene algún deferdocumento de scripts listo, se asegurará de que se ejecuten antes del código listo. ver: w3.org/TR/html5/the-end.html#the-end
Sam Saffron