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

Question

J'inclus tous mes JS comme des fichiers externes qui sont chargés tout en bas de la page. Au sein de ces fichiers, j'ai plusieurs méthodes définies comme tant, que j'appelle de l'événement prêt:

var SomeNamepsace = {}; 

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

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

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

Cependant, lorsque je retire la fonction et appelez les méthodes, tout straight-up fonctionne tout de même, mais s'exécute beaucoup plus rapidement - presque une seconde plus vite sur un fichier assez basique! Étant donné que le document doit être chargé à ce stade (tout le balisage précédant les balises de script), existe-t-il une bonne raison d'utiliser l'événement ready?

Answer 1

Bonne question.

Il y a une certaine confusion autour de l'ensemble du conseil "mettre des scripts au fond de la page" et des problèmes qu'il tente de résoudre. Pour cette question, je ne vais pas dire si l'insertion de scripts au bas de la page affecte ou non les performances/temps de chargement. Je vais seulement dire si vous avez besoin de $(document).readysi vous mettez aussi des scripts au bas de la page.

Je suppose que vous référencez le DOM dans les fonctions que vous appelez immédiatement dans vos scripts (quelque chose d'aussi simple que document ou document.getElementById). Je suppose également que vous ne posez que des questions sur ces fichiers [référencement DOM]. IOW, les scripts de bibliothèque ou les scripts dont votre code de référencement DOM a besoin (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 au bas de la page, Non, vous n'avez pas besoin de $(document).ready.

Explication: sans l'aide de "onload" mises en œuvre comme $(document).ready la concernant la PI règle de base est: tout code qui interagit avec des éléments DOM dans la page doit être placé/inclus plus bas de la page que les éléments qu'elle les références. La chose la plus facile à faire est de placer ce code avant la fermeture </body>. Voir here et here. Il fonctionne également autour de "Operation aborted" error redouté d'IE. Ceci dit, cela n'invalide nullement l'utilisation de $(document).ready

Référencer un objet avant qu'il ne soit chargé est [une des] erreurs les plus courantes commises en commençant dans le JavaScript de DOM (l'a vu trop souvent pour compter). C'est la solution de jQuery au problème, et cela ne vous oblige pas à penser à l'endroit où ce script sera inclus par rapport aux éléments DOM qu'il référence. C'est une énorme victoire pour les développeurs. C'est juste une chose de moins à laquelle ils doivent penser.

De même, il est souvent difficile ou peu pratique de déplacer tous les scripts de référencement DOM au bas de la page (par exemple, tout script qui émet des appels document.write doit rester en place). D'autres fois, vous utilisez un cadre qui rend un modèle ou crée des morceaux de javascript dynamique, dans lequel les fonctions de références qui doivent être incluses avant le js.

Enfin, il l'habitude d'être les « meilleures pratiques » pour bloquer tout le code DOM-référencement dans window.onload, mais il a été éclipsée par $(document).ready mises en œuvre pour well document reasons.

Tout cela ajoute $(document).ready comme une solution supérieure, pratique et générale au problème de référencement des éléments DOM trop tôt.