Réponses:
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 </body>.
Si vous ne parvenez pas à le faire en raison de problèmes de création de modèles, etc., décorez vos balises de script avec l' deferattribut afin que le navigateur sache télécharger vos scripts après le téléchargement du HTML:
<script src="my.js" type="text/javascript" defer="defer"></script>Cas de bord
Il existe cependant des cas extrêmes où vous pouvez rencontrer un scintillement 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 <head>balise sans l' deferattribut. 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 CSS, comme les polyfills. Modernizr est l'une de ces bibliothèques qui doit être placée dans la balise head .
<head>. Si votre balisage dépend du plugin jQuery qui trie le contenu pour vous, cela n'a aucun sens de placer la référence du plugin en bas de la page, car vous allez obtenir un balisage funky dans votre page Web jusqu'à ce que les plugins se chargent. Les règles sont censées être suivies jusqu'à ce qu'elles ne fonctionnent plus, auquel cas les règles doivent être enfreintes.
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. Pendant le téléchargement d'un script, cependant, le navigateur ne lancera aucun autre téléchargement, même sur 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 peut également y avoir des problèmes de portée. Dans de nombreux cas, il existe des moyens de contourner ces situations.
Une autre suggestion qui revient souvent est d'utiliser des scripts différés. L'attribut DEFER indique que le script ne contient pas document.write et indique aux navigateurs qu'ils peuvent continuer le rendu. Malheureusement, Firefox ne prend pas en charge 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é vers le 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:
Chargez uniquement 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, un extrait du formulaire de connexion ajax) avec du code dépendant de jQuery intégré; si jQuery est chargé en bas de page, vous obtenez une erreur "$ is not defined", bien.
Il existe bien sûr des moyens de contourner ce problème (comme ne pas intégrer de JS et ajouter à un bundle js load-at-bottom), mais pourquoi perdre la liberté des js chargés paresseusement, de pouvoir placer le code dépendant de jQuery où vous le souhaitez ? Le moteur Javascript ne se soucie pas 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 vraiment logique, du point de vue de la maintenance de l'application, de coller un extrait de code dépendant de jQuery ou une référence de fichier à ce point dans le html, faites-le.
Il n'y a pas de hit de performance chargeant jquery dans la tête; quel navigateur sur la planète n'a pas déjà le fichier jQuery CDN dans le cache?
Beaucoup de bruit pour rien, colle jQuery dans la tête et laisse règne ta liberté js.
2%, disons, la moitié partira avant le chargement de la page pour la première fois. De cette façon, vous perdez 1%des visiteurs, mais vous économisez potentiellement beaucoup de temps de développement et de problèmes. Voyez si cela a du sens avec votre modèle d'entreprise ...
Nimbuz fournit une très bonne explication du problème 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, afin que l'utilisateur puisse voir les images plus tôt et commencer à donner un sens à la page. D'autres pages reposent sur des 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.
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 en premier en règle générale (c'est-à-dire à moins qu'il n'y ait une bonne raison de faire autrement), car ils ne retarderont pas les images autant que les images retarderaient les scripts. Enfin, il est juste beaucoup plus facile d'avoir un 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 à mettre les scripts en haut par défaut et je ne considère que s'il 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 du code jquery s'exécute lorsque le document est prêt, ce qui ne se produit pas avant la fin de la page de toute façon. De plus, le rendu de la page peut être retardé par l'analyse / l'exécution javascript, il est donc recommandé de placer tous les javascript en 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 <head>section du master page.
Dans mon cas, il y a des artefacts qui se produisent lorsque la page est chargée, 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'arbre sera rendu sans les classes CSS nécessaires imposées par le plugin. Donc, vous obtenez ce désordre drôle lorsque la page se charge pour la première fois, suivi du rendu approprié de TreeView. Très mauvais. Mettre les plugins jQuery dans la <head>section de la page maître élimine ce problème.
@Html.Action, ce qui écrit dynamiquement un résultat dans la sortie, car mon partial donne un $ is undefinedsens, je dois plutôt utiliser .load ('@ Url.Action') pour charger le partiel. Mais cela donne un fouc en raison de la demande supplémentaire. En fonction de votre entrée, je vais simplement déplacer jquery au-dessus de RenderBody () dans ma page maître
Bien que presque tous les sites Web placent toujours Jquery et d'autres javascript sur header: D, vérifiez même stackoverflow.com.
Je vous suggère également de mettre l'étiquette avant fin du corps. Vous pouvez vérifier le temps de chargement après avoir placé sur l'un ou l'autre des endroits. La balise de script suspendra votre page Web pour se charger davantage.
et après avoir placé javascript sur le pied de page, vous pouvez obtenir une apparence inhabituelle de votre page Web jusqu'à ce qu'elle charge javascript, alors placez css sur votre section d'en-tête.
Juste avant </body>est le meilleur endroit selon Yahoo Developer Network de meilleures pratiques pour accélérer votre site Web ce lien , il 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 se charge tôt afin que les autres scripts qui viennent plus tard fonctionnent comme prévu. Comme quelqu'un d'autre l'a souligné, même cette page charge jQuery dans la section head.