Le code Jquery doit-il être placé dans l'en-tête ou le pied de page?
9 réponses
tous les scripts doivent être chargés en dernier
dans presque tous les cas, il est préférable de placer toutes les références de votre script à la fin de la page, juste avant </body> .
si vous n'êtes pas en mesure de le faire en raison de problèmes liés aux modèles et autres, Décorez vos balises de script avec l'attribut defer de sorte que le navigateur sache télécharger vos scripts après que le HTML a été téléchargé:
<script src="my.js" type="text/javascript" defer="defer"></script>
les cas limites
il y a quelques cas de bordures, cependant, où vous pouvez éprouver le scintillement de page ou d'autres Artéfacts pendant le chargement de page qui peuvent généralement être résolus en plaçant simplement vos références de script jQuery dans le <head> tag sans l'attribut defer . Ces cas comprennent jQuery UI et d'autres addons tels que jCarousel ou Treeview qui modifient le DOM dans le cadre de leur fonctionnalité.
autres mises en garde
il y a certaines bibliothèques qui doivent être chargées avant le DOM ou le CSS, comme les polyfills. Modernizr est l'une de ces bibliothèques qui doit être placé dans l'étiquette de tête .
le problème causé par les scripts est que ils bloquent les téléchargements parallèles. Le La spécification HTTP/1.1 suggère que les navigateurs téléchargent pas plus de deux composants en parallèle par nom d'hôte. Si vous servez vos images de multiples nom d'hôte, vous pouvez obtenir plus de deux téléchargements en parallèle. Alors un script est en train de télécharger, navigateur ne pas démarrer tous les autres les téléchargements, même sur différents hôte. Dans certaines situations, il n'est pas facile de déplacer des scripts vers le bas. Si, par exemple, le script utilise document.écrire à insérer une partie de la contenu de la page, il ne peut pas être déplacé plus bas dans la page. Il peut également être la portée des questions. Dans de nombreux cas, il sont des façons de contourner ces situation.
une suggestion alternative qui souvent vient est d'utiliser des scripts différés. L'attribut DEFER indique que le le script ne contient pas de document.écrire, et est un indice de navigateurs qu'ils peuvent continuer rendu. Malheureusement, Firefox ça ne supporte pas L'attribut DEFER. Dans Internet Explorer, le script peut être reportée, mais pas autant que voulu. Si un script peut être différé, il peut également être déplacée vers le bas de page. Qui fera de votre web le chargement des pages plus rapide.
EDIT: Firefox prend en charge la Attribut DEFER depuis la version 3.6.
Sources:
ne charger jQuery lui-même dans la tête, via CDN bien sûr.
pourquoi? Dans certains scénarios, vous pouvez inclure un modèle partiel (par exemple ajax login form snippet) avec du code dépendant jQuery intégré; si jQuery est chargé au bas de la page, vous obtenez une erreur "$ n'est pas défini", bien.
il y a des moyens de contourner cela bien sûr( comme ne pas inclure de JS et ajouter à une charge-à-bas js bundle), mais pourquoi perdre la liberté de JS chargé paresseusement, de être en mesure de placer jQuery code dépendant n'importe où vous s'il vous plaît ? Javascript engine ne se soucie pas où le code vit dans le DOM tant que les dépendances (comme le chargement de jQuery) sont satisfaites.
pour vos fichiers JS communs / partagés, Oui, placez-les avant </body> , mais pour les exceptions, où il est vraiment juste logique de maintenance de l'application-sage de coller un snippet dépendant jQuery ou référence de fichier juste là à ce point dans le html, faire si.
il n'y a pas de performance hit chargeant jquery dans la tête; quel navigateur sur la planète n'a pas déjà le fichier jquery CDN dans la cache?
Beaucoup de bruit pour rien, bâton de jQuery dans la tête et de laisser votre js règne la liberté.
Nimbuz fournit une très bonne explication de la question en cause, mais je pense que la réponse finale dépend de votre page: qu'est - ce qui est 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 n'ont que des scripts mineurs et non essentiels. Dans ce cas, il est logique de placer les scripts en bas, de sorte que l'utilisateur puisse voir les images plus tôt et commencer à donner un sens à la page. Autre les pages se basent sur les scripts pour fonctionner. Dans ce cas, il est préférable d'avoir une page de travail sans images qu'une page qui ne fonctionne pas avec des images, il est donc logique de mettre 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, c'est une généralisation et vous avez pour voir si elle s'applique à votre page. Si elle le fait, alors que, pour moi, est un argument pour les mettre en premier lieu comme une règle de pouce (ie. sauf si il y a une bonne raison pour le faire sinon), parce qu'ils ne retarderont pas les images autant que les images retarderaient les scripts. Enfin, il est beaucoup plus facile d'avoir script en haut, parce que vous n'avez pas à vous soucier de savoir s'ils sont chargés quand vous avez besoin de les utiliser.
en résumé, j'ai tendance à placer les scripts en haut par défaut et je me demande seulement s'il vaut la peine de les déplacer en 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 Document ready, ce qui n'arrive pas avant la fin de la page de toute façon. En outre, le rendu de la page peut être retardé par JavaScript parsing/execution, il est donc préférable de mettre tout 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 <head> de la page principale.
Dans mon cas, il y a des artefacts qui se produisent lorsque la page est chargée, si les scripts en bas de la page. J'utilise le plugin jQuery TreeView, et si les scripts ne sont pas chargés au début, l'arborescence va rendre sans les classes CSS nécessaires qui lui sont imposées par le plugin. Vous obtenez donc ce drôle de désordre lorsque la page se charge, suivi par le rendu approprié de la vue sur les arbres. Très moche. Mettre 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 javascript sur l'en-tête: D, même vérifier stackoverflow.com .
je vous suggère aussi de mettre une étiquette avant la fin du corps. Vous pouvez vérifier le temps de chargement après avoir placé sur les lieux. L'étiquette de Script mettra en pause votre page Web pour charger plus loin.
et après avoir placé javascript sur le pied de page, vous pouvez obtenir des looks inhabituels de votre page Web jusqu'à ce qu'il charge javascript, donc placez css sur votre section d'en-tête.
juste avant </body> est le meilleur endroit selon ce lien , il 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, donc il est très important qu'il se charge tôt pour que les autres scripts qui viennent plus tard fonctionnent comme prévu. Comme quelqu'un d'autre a souligné même cette page charge jQuery dans la section de tête.