Est-ce que "mettre Javascript en bas" va à l'encontre de l'objectif de document.ready?
Je sais qu'il est recommandé de mettre Javascript au bas de la page, mais si j'utilise jQuery, est-ce que cela va à l'encontre de son objectif de s'exécuter pendant le chargement du DOM?
Si j'ai un menu déroulant, par exemple, les menus déroulants ne s'afficheront que lorsque tout le reste de la page aura été chargé. J'essaie également de développer avec l'amélioration progressive en tête, de sorte que 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?
Document.ready attend le chargement du DOM avant d'exécuter du JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).
L'idée de la mettre en bas signifie que si votre JS a des problèmes ou si 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.
Placer javascript en bas signifie que l'autre contenu de la page (surtout le texte) 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.
Un script n’a aucune utilisation réelle tant que le code HTML n’a pas été chargé. Un script ne peut pas modifier le DOM avant que le code HTML ne soit chargé. document.ready attend le chargement du DOM. Donc, il ne sert à rien de contenir des choses importantes comme les feuilles de style.
Placez les scripts au bas de la page (avant la balise </body>]) afin d’obtenir votre code HTML et CSS à l’utilisateur aussi vite que possible. Le navigateur pourra rendre la page beaucoup plus rapidement, puis les scripts pourront être chargés, au lieu de laisser une page vierge à la vue de laquelle les utilisateurs pourront regarder pendant qu’ils attendent le téléchargement des scripts.
Pendant que le navigateur restitue progressivement la page, s’il clique sur 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 lance aucun autre téléchargement. C'est-à-dire que les images et les feuilles de style, ainsi que tout autre téléchargement en parallèle, seront bloqués, même pour des noms d'hôte différents.
L'inconvénient de placer les scripts au bas de la page est que, comme la page sera rendue avant l'initialisation des scripts, les clics rapides pourront interagir avec votre site avant que le Javascript ne soit prêt.
Remarque: L'inverse est vrai pour les feuilles de style - Les feuilles de style situées au bas de la page bloquent le rendu progressif jusqu'à ce que toutes les feuilles de style aient été téléchargées et déplacées vers le document HEAD élimine le problème.
Il y a une astuce pour charger javascript sans faire attendre l'utilisateur, vous pouvez créer un élément <script/> à l'aide de la méthode DOM createElement() et l'ajouter à la page juste avant la fermeture </body> étiquette:
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 élément <script/> n'a pas été ajouté à la page. Une fois le téléchargement terminé, le navigateur interprète le code Javascript contenu dans celui-ci.
Oui. Si vous placez des scripts en bas, doc.ready (événement DOMContentLoaded) n'est plus nécessaire - votre script sera exécuté après le chargement de tous les DOM précédents.
Comme les scripts finissent par améliorer les performances (l'analyse HTML et le chargement des CSS et des images ne sont pas bloqués par les scripts), je vous recommande de placer les scripts en bas au lieu d'utiliser doc.ready.