86 votes

Avantages et inconvénients : mettre le javascript dans l'en-tête et le mettre juste avant la fermeture du corps.

La plupart des livres/articles sur le développement web et le javascript disent que vous devez mettre le CSS dans la balise head et le javascript en bas de la page.

Mais lorsque j'ouvre les sources html de sites web célèbres comme celui de stackoverflow, je constate qu'ils placent des fichiers js dans la balise head.

Quels sont les avantages et les inconvénients des deux approches et quand utiliser l'une ou l'autre ?

J'ai trouvé une autre question pour le même problème : Où dois-je déclarer les fichiers JavaScript utilisés dans ma page ? Dans <head></head> ou près de </body> ?

62voto

David Johnstone Points 10565

De la part de Yahoo Meilleures pratiques pour accélérer votre site Web :

Le problème causé par scripts est que ils bloquent les téléchargements parallèles. Le site 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 servez vos images à partir de plusieurs noms d'hôtes, vous pouvez obtenir plus de deux composants en parallèle par nom d'hôte. téléchargements en parallèle. Pendant que un scripts est en train de se télécharger, cependant, le navigateur ne lancera pas d'autres téléchargements, même sur différents 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 scripts 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 problèmes de scoping. Dans de nombreux cas, il existe il existe des moyens de contourner ces situations.

Une suggestion alternative que souvent est d'utiliser des scripts différés. L'attribut DEFER indique que le scripts ne contient pas de document.write, et est un indice de l'existence de navigateurs qu'ils peuvent continuer le rendu. Malheureusement, Firefox ne prend pas en charge l'attribut DEFER. Dans Internet Explorer, le scripts peut être être différé, mais pas autant que souhaité. Si un scripts peut être différé, il peut également être déplacé vers le bas de la la page. Cela permettra à vos pages web pages web se chargeront plus rapidement.

C'est pourquoi, en général, il est préférable de les mettre en bas. Cependant, ce n'est pas toujours possible, et souvent, cela ne fait pas l'affaire. que une grande différence de toute façon.

31voto

AHM Points 2711

Comme d'autres personnes l'ont dit, lorsque vous placez le javascript dans l'en-tête, cela retarde le rendu de la page jusqu'à ce que les scripts aient été chargés, ce qui signifie que la page peut prendre plus de temps à charger - surtout si vous téléchargez de gros fichiers scripts.

Si vous déplacez vos balises script à la fin de la page, vous vous assurerez que le navigateur télécharge les images et les feuilles de style avant les balises script et la page semblera probablement être rendue avant que les script ne commencent à s'exécuter. Cela signifie également que si vous dépendez de certaines fonctionnalités de vos script, celles-ci ne seront disponibles qu'un peu après que la page soit visible par l'utilisateur.

Si vous ajoutez des styles ou des éléments (par exemple, en changeant les champs de texte avec une forme d'éditeur plus riche), l'utilisateur pourra constater un clignotement.

Si vous ajoutez des événements de clics aux éléments, ils ne seront pas cliquables tant que les éléments eux-mêmes ne seront pas visibles.

Parfois, ces problèmes vous obligent à placer vos scripts dans la tête, d'autres fois, vous pouvez les placer dans la partie inférieure.

IMHO (complètement à l'encontre de YSlow et de beaucoup de gens intelligents) vous devriez garder vos scripts dans la balise head, et compter sur eux pour être mis en cache la plupart du temps.

9voto

Chris Love Points 1161

En général, vous devriez placer les références script en bas de votre page. Les script ne doivent pas seulement être téléchargés, ils doivent également être évalués et exécutés avant que le bloc ne soit libéré et que la page ne procède au processus de rendu. Des choses comme Modernizr devraient être placées en haut parce qu'il fait certaines détections de fonctionnalités ainsi que des cales HTML5 que vous voudrez probablement.

Une autre raison pour laquelle vous voulez essayer de placer les scripts en bas de la page est les points uniques de défaillance ou SPOF. C'est là qu'un appel scripts prend du retard ou, pour une autre raison, bloque l'exécution de la page. Cela peut arriver souvent avec des bibliothèques publicitaires tierces, etc.

Oui, il se peut que vous deviez réfléchir un peu plus à la manière dont vous construisez votre application, mais j'ai trouvé que cela devenait très naturel très rapidement pour moi. J'ai construit des centaines d'applications web au cours des 4 dernières années avec le script en bas et je peux faire la différence. Je peux être 500ms, je peux être 5000ms, mais tout cela compte.

5voto

azamsharp Points 7107

Cela dépend vraiment de votre site web. Si vous accédez aux fonctions JavaScript et les invoquez dans le corps du document, elles doivent être référencées dans l'en-tête afin d'être chargées. Dans le cas contraire, si vous n'appelez le JavaScript que lorsque le document entier est chargé, il est sage de placer le JavaScript à la fin du corps. En plaçant le fichier .JS à la fin, vous chargez la page entière et récupérez ensuite le fichier .JS. De cette façon, l'utilisateur pourra voir rapidement la page et le temps qu'il se familiarise avec la page, le fichier .JS aura déjà été téléchargé.

4voto

Draemon Points 15448

Tout javascript contenu dans l'en-tête sera évalué avant le chargement de la page, ce qui donne l'impression que la page est plus longue à charger. Il est un peu plus difficile de faire fonctionner correctement les événements si tout le javascript se trouve à la fin, mais jQuery résout à peu près ce problème pour vous.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X