Le code Jquery doit-il aller dans l'en-tête ou le pied de page?
Où est le meilleur endroit pour mettre du code Jquery (ou un fichier Jquery séparé)? Les pages se chargeront-elles plus rapidement si je les mets dans le pied de page?
Tous les scripts doivent être chargés en dernier
Dans tous les cas, il est préférable de placer toutes vos références de script à la fin de la page, juste avant </body>.
Si vous ne parvenez pas à le faire en raison de problèmes liés aux modèles, décorez vos balises de script avec l'attribut defer afin que le navigateur sache télécharger vos scripts après le téléchargement du code HTML:
<script src="my.js" type="text/javascript" defer="defer"></script>
Cas marginaux
Dans certains cas Edge, cependant, vous pouvez rencontrer des problèmes de scintillement de page ou d’autres artefacts au chargement de la page qui peuvent généralement être résolus en plaçant simplement vos références de script jQuery dans la balise <head> sans l'attribut defer. Ces cas incluent l'interface utilisateur de jQuery et d'autres addons tels que jCarousel ou Treeview qui modifient le DOM dans le cadre de leurs fonctionnalités.
Autres mises en garde
Certaines bibliothèques doivent être chargées avant DOM ou CSS, telles que polyfill. Modernizr est l'une de ces bibliothèques qui doit être placée dans la balise head .
Le problème posé par les scripts est qu'ils bloquent les téléchargements parallèles. La spécification HTTP/1.1 suggère que les navigateurs ne téléchargent pas plus de deux composants en parallèle par nom d'hôte. Si vous diffusez vos images à partir de plusieurs noms d'hôte, vous pouvez effectuer plus de deux téléchargements en parallèle. Cependant, lors du téléchargement d’un script, le navigateur ne lance aucun autre téléchargement, même avec des noms d’hôte différents. Dans certaines situations, il n'est pas facile de déplacer les scripts vers le bas. Si, par exemple, le script utilise document.write pour insérer une partie du contenu de la page, il ne peut pas être déplacé plus bas dans la page. Il pourrait également y avoir des problèmes de portée. Dans de nombreux cas, il existe des moyens de contourner ces situations.
Une suggestion alternative souvent proposée consiste à utiliser des scripts différés. L'attribut DEFER indique que le script ne contient pas document.write et constitue un indice pour les navigateurs qu'ils peuvent continuer le rendu. Malheureusement, Firefox ne supporte pas l'attribut DEFER. Dans Internet Explorer, le script peut être différé, mais pas autant que souhaité. Si un script peut être différé, il peut également être déplacé au bas de la page. Cela accélérera le chargement de vos pages Web.
EDIT: Firefox prend en charge l'attribut DEFER depuis la version 3.6.
Sources:
Ne chargez jQuery que dans la tête, via CDN bien sûr.
Pourquoi? Dans certains scénarios, vous pouvez inclure un modèle partiel (par exemple, un extrait de formulaire de connexion ajax) avec du code dépendant de jQuery incorporé; Si jQuery est chargé au bas de la page, vous obtenez une erreur "$ n'est pas défini", Nice.
Bien sûr, il existe des moyens de contourner ce problème (par exemple, ne pas incorporer de JS et d’ajouter à un bundle js load-at-bottom), mais pourquoi perdre la liberté de js paresseusement chargé, de pouvoir placer du code dépendant de jQuery où que vous soyez? Le moteur Javascript ne tient pas compte de l'emplacement du code dans le DOM tant que les dépendances (comme jQuery en cours de chargement) sont satisfaites.
Pour vos fichiers js communs/partagés, oui, placez-les avant </body>, mais pour les exceptions où il est tout à fait judicieux pour les applications de maintenir un extrait de code ou une référence de fichier dépendant de jQuery à cet endroit du fichier. html, faites-le.
Il n’ya pas de coup de performance en train de charger dans la tête; Quel navigateur sur la planète n'a pas déjà le fichier CDN jQuery dans le cache?
Beaucoup de bruit pour rien, colle jQuery dans la tête et laisse ta liberté js régner.
Nimbuz fournit une très bonne explication du problème, mais je pense que la réponse finale dépend de votre page: quoi de plus important pour l'utilisateur de disposer plus tôt - de scripts ou d'images?
Certaines pages n'ont pas de sens sans les images, mais ne contiennent que des scripts mineurs et non essentiels. Dans ce cas, il est judicieux de placer les scripts en bas afin que l'utilisateur puisse voir les images plus rapidement et commencer à donner un sens à la page. D'autres pages reposent sur le script pour fonctionner. Dans ce cas, il est préférable d'avoir une page de travail sans images qu'une page inutilisée avec des images. Il est donc logique de placer les scripts en haut.
Une autre chose à considérer est que les scripts sont généralement plus petits que les images. Bien sûr, ceci est une généralisation et vous devez voir si cela s’applique à votre page. Si tel est le cas, j’en prends pour argument de les placer en premier lieu (c’est-à-dire sauf s’il existe une bonne raison de le faire), car ils ne retarderont pas autant les images que les images retarderaient les scripts. Enfin, il est beaucoup plus facile d’avoir un script en haut de la liste, car vous n’avez pas à vous demander s’ils sont chargés quand vous en aurez besoin.
En résumé, j'ai tendance à mettre les scripts en haut par défaut et à envisager uniquement si cela vaut la peine de les déplacer vers le bas une fois la page terminée. C'est une optimisation - et je ne veux pas le faire prématurément.
La plupart des codes jquery s'exécutent sur le document prêt, ce qui n'arrive pas avant la fin de la page. De plus, le rendu de la page peut être retardé par l'analyse/l'exécution de javascript. Il est donc recommandé de mettre tout le javascript au bas de la page.
La pratique standard consiste à mettre tous vos scripts au bas de la page, mais j'utilise ASP.NET MVC avec un certain nombre de plugins jQuery et je trouve que tout fonctionne mieux si je mets mes scripts jQuery dans le <head> section de la page maître.
Dans mon cas, il y a des artefacts qui se produisent lors du chargement de la page, si les scripts sont au bas de la page. J'utilise le plugin jQuery TreeView, et si les scripts ne sont pas chargés au début, l'arborescence sera rendue sans les classes CSS nécessaires qui lui sont imposées par le plugin. Vous obtenez donc ce désordre amusant lors du premier chargement de la page, suivi du rendu correct de TreeView. Très mauvais. Placer les plugins jQuery dans la section <head> de la page maître élimine ce problème.
Bien que presque tous les sites Web placent encore Jquery et d'autres codes javascript sur l'en-tête: D, vérifiez même stackoverflow.com.
Je vous suggère également de mettre avant la balise d'extrémité du corps. Vous pouvez vérifier le temps de chargement après avoir placé sur l'un ou l'autre des lieux. Balise de script mettra votre page Web en pause pour charger plus loin.
et après avoir placé javascript sur le pied de page, vous pouvez obtenir un aspect inhabituel de votre page Web jusqu'au chargement de javascript. Placez donc css dans votre en-tête.
Juste avant </body> est le meilleur endroit selon Réseau de développeurs Yahoo Meilleures pratiques pour accélérer votre site Web Site ce lien , c'est logique.
La meilleure chose à faire est de tester par vous-même.
Pour moi, jQuery est un peu spécial. Peut-être une exception à la norme. Il y a tellement d'autres scripts qui en dépendent, il est donc très important qu'il soit chargé tôt afin que les autres scripts à venir fonctionnent comme prévu. Comme quelqu'un d'autre l'a fait remarquer, même cette page charge jQuery dans la section head.