jQuery: Pourquoi utiliser document.ready si JS externe en bas de page?

J'inclus tous mes JS en tant que fichiers externes qui sont chargés tout en bas de la page. Dans ces fichiers, j'ai plusieurs méthodes définies comme ceci, que j'appelle à partir de l'événement ready:

var SomeNamepsace = {};

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

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

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

Cependant, lorsque je supprime la fonction ready et que j'appelle les méthodes directement, tout fonctionne exactement de la même manière, mais s'exécute beaucoup plus rapidement - presque une seconde plus rapide sur un fichier assez basique! Étant donné que le document doit être chargé à ce stade (comme tout le balisage vient avant les balises de script), y a-t-il une bonne raison d'utiliser toujours l'événement ready?

Excellente question.

Il y a une certaine confusion autour de l'ensemble du conseil "mettre les scripts au bas de votre page" et du ou des problèmes qu'il tente de résoudre. Pour cette question, je ne vais pas dire si le fait de placer des scripts en bas de page affecte les performances / temps de chargement ou non. Je ne parlerai que de votre besoin $(document).ready si vous mettez également des scripts en bas de page .

Je suppose que vous faites référence au DOM dans ces fonctions que vous invoquez immédiatement dans vos scripts (quelque chose d'aussi simple que documentou document.getElementById). Je suppose également que vous ne posez des questions que sur ces fichiers [de référence DOM]. IOW, les scripts de bibliothèque ou les scripts requis par votre code de référencement DOM (comme jQuery) doivent être placés plus tôt dans la page.

Pour répondre à votre question : si vous incluez vos scripts de référencement DOM en bas de page, Non, vous n'en avez pas besoin $(document).ready.

Explication : sans l'aide d' "onload"implémentations liées comme $(document).readyla règle empirique est: tout code qui interagit avec les éléments DOM dans la page doit être placé / inclus plus bas dans la page que les éléments auxquels il fait référence. La chose la plus simple à faire est de placer ce code avant la fermeture </body>. Voir ici et ici . Cela fonctionne également autour de l' erreur redoutée "Opération abandonnée" d' IE .

Cela dit, cela n'invalide en aucun cas l'utilisation de $(document).ready . Référencer un objet avant qu'il n'ait été chargé est [l'une des] erreurs les plus courantes commises au début dans DOM JavaScript (on l'a vu trop de fois pour être compté). C'est la solution de jQuery au problème, et il ne vous oblige pas à réfléchir à l'endroit où ce script sera inclus par rapport aux éléments DOM auxquels il fait référence. C'est une énorme victoire pour les développeurs. C'est juste une chose de moins à laquelle ils doivent penser.

En outre, il est souvent difficile ou peu pratique de déplacer tous les scripts de référence DOM vers le bas de la page (par exemple, tout script qui émet des document.writeappels doit rester en place). D'autres fois, vous utilisez un framework qui rend un modèle ou crée des morceaux de javascript dynamique, dans lesquels fait référence aux fonctions qui doivent être incluses avant le js.

Finalement, c'était la "meilleure pratique" de brouiller tout le code de référencement DOM window.onload, mais il a été éclipsé par les $(document).readyimplémentations pour des raisons bien documentées .

Tout cela constitue $(document).readyune solution bien supérieure, pratique et générale au problème du référencement des éléments DOM trop tôt.