41 votes

Où devrais-je déclarer les fichiers JavaScript utilisés dans ma page? Dans <head></head> ou près de </body> ?

J'ai lu le tutoriel et l'auteur mentionné pour inclure des fichiers Javascript près de clôture body balise (</body>) en HTML.

Je me demandais pour quel type de fonctionnalités que je ne devrait pas déclarer/définir JavaScript à inclure dans l' head section? Il fait sens pour moi d'inclure du JavaScript comme Google Analytics, près de la clôture, body balise. Où dois-je être prudent dans la définition de JavaScript comprennent près de la clôture, body balise?

43voto

cletus Points 276888

Il sera souvent fait valoir que, pour des raisons de vitesse, vous devriez mettre des balises de script à la fin du document (avant la fermeture balise body). Bien que ce sera plus rapide de chargement de la page, il présente de sérieux inconvénients.

Tout d'abord, un idiome commun avec la Page web de développement est d'avoir un fichier d'en-tête, un pied de fichier et de votre contenu dans le milieu. Pour garder inutile Javascript à un minimum, vous aurez souvent envie de mettre des extraits de code dans des pages individuelles.

Si vous d'inclure jquery, par exemple, à la fin du document, votre jquery extraits de code (comme le document de prêt trucs) qui doit arriver après cela. Qui peut être gênant d'un point de vue du développement.

Deuxièmement, dans mon expérience, parce que le chargement des pages est plus rapide, vous pouvez remarquer certains effets appliquée parce que la page a déjà été chargé par le moment où ils sont appliqués.

Par exemple, si vous mettre un tableau dans un document et à droite avant le corps de la balise de fermeture de mettre:

$(function() {
  $("tr:nth-child(odd)").addClass("odd");
});

avec approprié, le style, que l'application d'un effet souvent être visible. Personnellement, je crois que c'est pour une mauvaise expérience utilisateur potentiellement. Je pense que souvent, vous êtes mieux d'avoir la page de chargement légèrement plus lent (en mettant des scripts en haut) si vous n'obtenez pas déconcertant effets visuels.

Je préconise généralement efficace des stratégies de mise en cache de sorte que vous n'avez qu'à télécharger les fichiers Javascript quand ils changent, comme la Suralimentation, Javascript en PHP (mais les principes s'appliquent à toutes les langues, pas seulement en PHP) et encore de mettre des scripts en haut. C'est beaucoup plus pratique.

13voto

Bryan Migliorisi Points 4057

En les mettant en <head/> vous forcer le navigateur à télécharger les fichiers avant de pouvoir afficher une page. Qui provoque la perception de la charge temps de ralentir.

En les plaçant dans le pied de page, juste avant la balise body de clôture, le navigateur ne charge pas jusqu'à ce qu'il atteigne ce point dans l'analyse de la HTML. Cela signifie que les scripts seront exécutés plus tard dans le processus de chargement de la page, mais ne va pas bloquer l'actif de téléchargement et le processus de rendu.

Ce qui fonctionne le mieux est de vous et de la façon dont vous développez votre code.

12voto

skaffman Points 197885

Le YSlow de Yahoo outil a des conseils à ce sujet:

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 de déplacer des scripts vers le bas. Si, pour 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.

4voto

HeDinges Points 1863

Google pagespeed avoir une certaine belle explication sur comment paralléliser le téléchargement de scripts.

Encore leur conseil est de les mettre dans le head de votre page.

2voto

chaos Points 69029

Les balises de Script doit être généralement dans la section d'en-tête. Les exceptions sont quand ils ne significatif immédiat du traitement qui devrait être retardée jusqu'à ce que le plus tard possible dans le chargement de la page pour éviter d'interférer avec la page à venir, comme avec Google Analytics, ou lorsque la balise de script réels de placement est une partie de son comportement.

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