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?
Réponses
Trop de publicités?
Nimbuz
Points
13377
Le problème causé par les scripts, c'est que ils bloquent les téléchargements en parallèle. L' Spécification HTTP/1.1 suggère que les navigateurs téléchargent pas plus de deux les composants en parallèle par le nom d'hôte. Si vous servez vos images à partir de plusieurs les noms d'hôtes, vous pouvez obtenir plus de deux téléchargements en parallèle. Alors que un script est en cours de téléchargement, cependant, l' navigateur ne va pas commencer à tout autre les téléchargements, même sur différents les noms d'hôtes. Dans certaines situations, il n'est pas facile à déplacer grâce à 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 moyens pour contourner ces des situations.
Une autre suggestion qui, souvent, vient à l'esprit est d'utiliser différés scripts. L'attribut DEFER indique que le le script ne contient pas de document.écrire, et est un indice de les navigateurs qu'ils puissent continuer le rendu. Malheureusement, Firefox ne prend pas en charge l'attribut DEFER. Dans Internet Explorer, le script peut être reportée, mais pas autant que désiré. Si un script peut être différée, il peut également être déplacée vers le bas de la page. Qui feront de votre site web le chargement des pages plus rapide.
Tous les scripts doivent être chargés 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 d' </body>.
Si vous ne parvenez pas à le faire en raison de templating questions et autres joyeusetés, décorer vos balises de script avec l' defer d'attribut, de sorte que le navigateur sait pour télécharger vos scripts après le HTML a été téléchargé:
<script src="my.js" type="text/javascript" defer="defer"></script>
Les cas de bord
Il y a quelques cas, cependant, où vous pouvez rencontrer la page de scintillement ou d'autres objets pendant le chargement de la page qui peut généralement être résolu par le simple fait de placer votre script jQuery références dans l' <head> balise sans l' defer d'attribut. Ces cas comprennent jQuery UI et d'autres add-ons tels que jCarousel ou Treeview qui modifient les DOM dans le cadre de leur fonctionnalité.
Autres mises en garde
Il y a quelques bibliothèques qui doit être chargé avant le DOM ou CSS, tels que les polyfills. Modernizr est une bibliothèque qui doit être placé dans la balise head.
virtualeyes
Points
5487
Seulement de chargement de jQuery dans la tête, via le CDN de cours.
Pourquoi? Dans certains scénarios, vous pouvez inclure partielle d'un modèle (par exemple, ajax formulaire de connexion extrait) intégré avec jQuery code dépend; si jQuery est chargé en bas de la page, vous obtenez un "$ n'est pas défini d'erreur", à nice.
Il existe des moyens pour contourner ceci, bien sûr (comme ne pas intégrer toutes les JS et en les ajoutant à une charge à fond js bundle), mais pourquoi perdre la liberté de paresseusement chargé js, d'être en mesure de placer jQuery code dépendant de n'importe où vous s'il vous plaît? Moteur Javascript n'a pas de soins où le code de vie dans les DOM, tant que dépendances (comme jQuery en cours de chargement) sont satisfaits.
Pour votre commune/partagée, js fichiers, oui, les placer avant </body>, mais pour les exceptions, où il est vraiment tout à fait logique de la maintenance des applications-sage de garder un jQuery dépendante de l'extrait ou le fichier de référence à ce point dans le html, le faire.
Il n'y a pas de gain de performances de chargement de jquery dans la tête; ce navigateur sur la planète n'a pas déjà jQuery CA fichier dans le cache?
Beaucoup de bruit pour rien, bâton de jQuery dans la tête et de laisser votre js règne la liberté.
EMP
Points
17246
Nimbuz fournit une très bonne explication de la question, mais je pense que la réponse finale dépend de votre page: quoi de plus important pour l'utilisateur d'avoir plus rapidement des scripts ou des images?
Il y a certaines pages qui n'ont pas de sens sans les images, mais seulement de petites, non-essentiel de script. Dans ce cas, il est logique de mettre les scripts dans le bas, de sorte que l'utilisateur peut voir les images plus rapidement et de commencer à faire sens de la page. D'autres pages s'appuient sur des scripts de travail. Dans ce cas, il est préférable de disposer d'une page sans images qu'un non-travail page avec des images, il est donc logique de mettre les scripts dans la partie supérieure.
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 c'est le cas alors que, pour moi, est un argument pour les mettre d'abord comme une règle du pouce (ie. sauf si il y a une bonne raison de faire autrement), parce qu'ils ne pas retarder les images autant que les images de retard les scripts. Enfin, c'est juste beaucoup plus facile d'avoir un script en haut, parce que vous n'avez pas à vous soucier de savoir si ils sont encore chargés lorsque vous avez besoin de les utiliser.
En résumé, j'ai tendance à mettre les scripts dans le haut par défaut et ne prennent en considération si ça vaut le coup de les déplacer vers le bas une fois que la page est complète. C'est une optimisation, et je ne veux pas le faire prématurément.
Stefan Kendall
Points
28274
