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

javascript document ready without jquery

Question

Incluyo 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 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. 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

Gran pregunta

Existe cierta confusión acerca de todo el consejo de "poner guiones 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).ready si 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 de inmediato 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 los scripts de referencia del DOM en la parte inferior de la página, no, no necesita $(document).ready .

Explicación : sin la ayuda de implementaciones relacionadas con "onload" como $(document).ready La regla general es que cualquier código que interactúe con elementos DOM dentro de la página debe colocarse / incluirse más abajo de la página que los elementos a los que hace referencia. . Lo más fácil es colocar ese código antes del cierre </body> . Mira here y here . También funciona en torno al temido error "Operación abortada" de IE.

Habiendo dicho eso, 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 imprá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 document.write llamadas de escritura deben permanecer). En otras ocasiones, está utilizando un marco que rinde alguna plantilla o crea piezas de javascript dinámico, dentro de las cuales las funciones de referencias deben ser incluidas antes del js.

Finalmente, solía ser una "mejor práctica" bloquear todo el código de referencia del DOM en window.onload , sin embargo, ha sido eclipsado por implementaciones $(document).ready por razones de documentos de bien .

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