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

Question

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 como tal, que llamo desde el evento ready:

var SomeNamepsace = {}; 

SomeNamepsace.firstMethod = function() { 
    // do something 
}; 

SomeNamepsace.secondMethod = function() { 
    // do something else 
}; 

$(document).ready(function() { 
    SomeNamepsace.firstMethod(); 
    SomeNamepsace.secondMethod(); 
}); 

Sin embargo, cuando se quita la función de lista y llamar a los métodos recto-para arriba, todo funciona de la misma manera, pero se ejecuta significativamente más rápido, ¡casi un segundo más rápido en un archivo bastante básico! Como el documento debe cargarse en este punto (dado que todo el marcado viene antes de las etiquetas del script), ¿hay alguna buena razón para seguir utilizando el evento listo?

Answer 1

Una gran pregunta.

Existe cierta confusión acerca de todo el consejo de "poner scripts en la parte inferior 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 hablar sobre si necesita $(document).readysi también coloca scripts en la parte inferior de la página.

Supongo que está haciendo referencia al DOM en aquellas funciones que está invocando inmediatamente en sus scripts (cualquier cosa tan simple como document o document.getElementById). También estoy asumiendo que solo está preguntando sobre estos archivos [DOM-referencing]. IOW, scripts de biblioteca o scripts que su código de referencia de DOM requiere (como jQuery) deben colocarse antes en la página.

Para responder a su pregunta: si incluye las secuencias de comandos de referencia DOM en la parte inferior de la página, no, no necesita $(document).ready.

Explicación: y sin la ayuda de "onload" implementaciones relacionados con la PI como $(document).ready la regla de oro es: cualquier código que interactúa con los elementos DOM dentro de la página debe ser colocado a/incluida más abajo en la página de los elementos que referencias. Lo más fácil es colocar ese código antes del cierre </body>. Ver here y here. También funciona alrededor de temido "Operation aborted" error de IE.

Habiendo 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 con DOM JavaScript (lo presencié demasiadas veces para contar). 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 de DOM al final de la página (por ejemplo, cualquier secuencia de comandos que emite llamadas document.write tiene que quedarse). En otras ocasiones, está utilizando un marco que renderiza alguna plantilla o crea piezas de javascript dinámico, dentro de las cuales las funciones de referencias deben ser incluidas antes de el js.

Por último, lo que solía ser "mejores prácticas" para tocar todo el código DOM-referenciación en window.onload, sin embargo, ha sido eclipsada por $(document).ready implementaciones de well document reasons.

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