Est-ce que «mettre Javascript en bas» va à l'encontre du but de document.ready?

26

Je sais qu'il est recommandé de mettre Javascript en bas de la page, mais si j'utilise jQuery, cela ne va-t-il pas à l'encontre de son objectif de s'exécuter pendant le chargement du DOM?

Si j'ai un menu déroulant, par exemple, les listes déroulantes ne s'afficheront que lorsque tout le reste de la page aura été chargé. J'essaie également de développer avec une amélioration progressive à l'esprit, donc je pourrais avoir des éléments cachés avec jQuery au lieu de CSS (pour que les utilisateurs non JS puissent les voir).

Y a-t-il un juste milieu, peut-être?

javascript performance jquery

— Chèvre mécontente
source

J'ai le problème inverse. J'ai un script qui crée et positionne une barre latérale, mais malheureusement, la page est rendue avant l'exécution de mon script, ce qui entraîne une secousse disgracieuse car les éléments de la page sont redessinés dans les nouveaux emplacements. Est-il possible de bloquer le rendu jusqu'à ce que mon script soit terminé, ou sinon que ma taille et ma position soient exécutées avant le premier rendu?

3

Cette question n'appartient-elle pas davantage à StackOverflow?

— Marco Demaio

30

Document.ready attend le chargement du DOM avant d'exécuter tout JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

L'idée de le mettre en bas signifie que si votre JS a des problèmes ou que la personne a une connexion lente, le reste de la page se charge toujours en premier et ne "se bloque" pas.

Le JS fonctionne toujours lorsque tout est chargé, que ce soit au début ou à la fin.

— Callan
source

6

Mettre javascript en bas signifie que le contenu de l'autre page (texte en particulier) se charge avant le javascript afin que les utilisateurs n'attendent pas le chargement du JS s'ils ont des connexions lentes.

Cela n'affecte pas document.ready, car il est appelé lorsque le navigateur a fini de préparer le DOM pour une page. Quoi qu'il en soit, tout doit encore être chargé en premier.

— Macha
source

3

Un script n'a aucune utilisation réelle jusqu'à ce que le HTML ait fini de se charger - un script ne peut pas changer le DOM tant que le HTML n'est pas chargé. document.readyattend le chargement du DOM. Donc, ça ne sert à rien de contenir des choses importantes comme les feuilles de style.

Mettez les scripts en bas de la page (avant la </body>balise) pour que vos HTML et CSS soient transmis à l'utilisateur le plus rapidement possible. Le navigateur sera en mesure de rendre la page beaucoup plus rapidement, puis les scripts peuvent être chargés, plutôt que de laisser une page vierge à regarder par l'utilisateur pendant qu'il attend le téléchargement des scripts.

Pendant que le navigateur affiche progressivement la page, s'il frappe une balise de script (c'est-à-dire un fichier Javascript externe), tout s'arrête . Les scripts ont la priorité - pendant le téléchargement d'un script, le navigateur ne démarre aucun autre téléchargement. c'est-à-dire que les images et les feuilles de style et tout autre téléchargement parallèle seront bloqués, même sur des noms d'hôtes différents.

L'inconvénient de mettre des scripts en bas de la page est que, parce que la page s'affichera avant l'initialisation des scripts, les cliqueurs particulièrement rapides pourront interagir avec votre site avant que Javascript ne soit prêt.

Remarque: l'inverse est vrai pour les feuilles de style - Les feuilles de style situées près du bas de la page bloquent le rendu progressif jusqu'à ce que toutes les feuilles de style aient été téléchargées et les déplacer vers le document HEADélimine le problème.

Il existe une astuce intéressante pour charger le javascript sans faire attendre l'utilisateur, vous pouvez créer un <script/>élément en utilisant la createElement()méthode DOM et l'ajouter à la page juste avant la </body>balise de fermeture :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Le navigateur ne commence pas à télécharger le script js tant que le nouvel <script/>élément n'est pas réellement ajouté à la page. Une fois le téléchargement terminé, le navigateur interprète le code Javascript qu'il contient.

— À M
source

1

Pas tout à fait vrai. Le script peut modifier le DOM avant que tout le HTML ne soit chargé ... En fait, c'est pourquoi les scripts bloquent car ils peuvent altérer la page. Cela dit, dans de nombreux cas, les développeurs n'ont pas besoin d'ajouter leur script de «comportement» jusqu'à ce que le DOM soit chargé.

— scunliffe

1

Oui. Si vous placez des scripts en bas, doc.ready( DOMContentLoadedévénement) n'est plus nécessaire - votre script sera exécuté après tout chargement de DOM précédent.

Puisque les scripts à la fin améliorent les performances (l'analyse et le chargement HTML des CSS et des images ne sont pas bloqués par les scripts), je recommande de mettre les scripts en bas au lieu de les utiliser doc.ready.

— Kornel
source