Le code Jquery doit-il entrer 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 le mets dans le pied de page?

Tous les scripts doivent être chargés en dernier

Dans presque tous les cas, il est préférable de placer toutes vos références de script à la fin de la page, juste avant .

Si vous ne pouvez pas le faire en raison de problèmes de template et autres, décorez vos balises de script avec l’atsortingbut defer pour que le navigateur sache télécharger vos scripts une fois le HTML téléchargé:

  

Bordures

Il existe toutefois des cas particuliers où vous pouvez rencontrer des scintillements de page ou d’autres artefacts lors du 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 sans l’atsortingbut defer . Ces cas incluent l’interface utilisateur 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 le DOM ou le CSS, telles que les polyfills. Modernizr est une telle bibliothèque qui doit être placée dans la balise head .

Mettez les scripts au fond

Le problème causé 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 obtenir plus de deux téléchargements en parallèle. Lors du téléchargement d’un script, le navigateur ne lance aucun autre téléchargement, même sur des noms d’hôtes 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 scope. Dans de nombreux cas, il existe des moyens de contourner ces situations.

Une autre suggestion qui revient souvent consiste à utiliser des scripts différés. L’atsortingbut DEFER indique que le script ne contient pas document.write et constitue un indice pour les navigateurs qu’ils peuvent continuer à rendre. Malheureusement, Firefox ne supporte pas l’atsortingbut 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’atsortingbut 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 un code dépendant de jQuery intégré; Si jQuery est chargé en bas de page, vous obtenez une erreur “$ n’est pas défini”, bien.

Il existe des moyens de contourner ce problème bien sûr (par exemple, ne pas incorporer de JS et append un paquet js de load-at-bottom), mais pourquoi ne pas laisser la liberté de charger js, où que vous soyez ? Le moteur Javascript ne se soucie pas de savoir où le code vit 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 , mais pour les exceptions, où il est vraiment logique que la maintenance de l’application place un extrait de code ou une référence de fichier jQuery directement à cet endroit dans le HTML. , faites-le.

Il n’y a pas de problème de performance jquery de chargement dans la tête; Quel navigateur sur la planète n’a pas déjà de fichier jQuery CDN dans le cache?

Beaucoup de bruit pour rien, colle jQuery dans la tête et laisse ta liberté 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 d’avoir plus tôt des scripts ou des images?

Il y a des pages qui n’ont pas de sens sans les images, mais qui ne contiennent que des scripts mineurs non essentiels. Dans ce cas, il est judicieux de placer les scripts en bas pour que l’utilisateur puisse voir les images plus tôt et commencer à donner un sens à la page. D’autres pages s’appuient sur les scripts pour fonctionner. Dans ce cas, il est préférable d’avoir une page de travail sans images qu’une page non fonctionnelle avec des images, il est donc logique de placer les scripts en haut de la page.

Une autre chose à considérer est que les scripts sont généralement plus petits que les images. Bien sûr, il s’agit d’une généralisation et vous devez voir si cela s’applique à votre page. Si c’est le cas, pour moi, c’est un argument pour les mettre d’abord en règle générale (à moins qu’il y ait une bonne raison de faire autrement), car ils ne retarderont pas autant les images que les images retarderont les scripts. Enfin, il est beaucoup plus facile d’avoir le script en haut, car vous n’avez pas à vous soucier de savoir s’ils sont encore chargés lorsque vous devez les utiliser.

En résumé, j’ai tendance à placer les scripts au sumt par défaut et à ne considérer que la nécessité 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 du code jquery s’exécute sur le document prêt, ce qui ne se produit pas jusqu’à la fin de la page. De plus, le rendu de page peut être retardé par l’parsing / exécution javascript, il est donc recommandé de mettre tout le javascript au bas de la page.

La pratique standard est de 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 la section de la page maître.

Dans mon cas, des artefacts apparaissent lors du chargement de la page, si les scripts se trouvent 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 imposées par le plugin. Donc, vous obtenez ce bordel drôle quand la première page se charge, suivi par le rendu correct de TreeView. Très mauvais regard Mettre les plug-ins jQuery dans la section de la page maître élimine ce problème.

Bien que presque tous les sites Web placent encore Jquery et d’autres éléments javascript sur l’en-tête: D, vérifiez même stackoverflow.com.

Je vous suggère également de mettre avant la fin de l’étiquette du corps. Vous pouvez vérifier le temps de chargement après chaque placement. La balise Script mettra votre page Web en pause pour la charger davantage.

et après avoir placé javascript sur le pied de page, vous pouvez avoir un aspect inhabituel de votre page Web jusqu’à ce qu’elle charge le javascript, alors placez css sur votre section d’en-tête.

Juste avant que soit le meilleur endroit selon ce lien , cela a du sens.

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 de les charger tôt afin que les autres scripts fournis ultérieurement fonctionnent comme prévu. Comme quelqu’un d’autre l’a souligné, même cette page charge jQuery dans la section head.