web-dev-qa-db-fra.com

JavaScript dans <head> ou juste avant </body>?

Je suis sur le point de me lancer dans un nouveau projet web et je prévois de mettre quelques JavaScripts dans le <head> et aussi avant </body>, en utilisant le schéma suivant:

  1. Scripts essentiels pour l'UX de la page: dans le <head>. Comme je l'ai lu en parcourant le Web - les scripts dans le <head> est chargé avant le chargement de la page, il serait donc judicieux d'y mettre des scripts essentiels à l'expérience utilisateur.

  2. Scripts non essentiels à la conception et à l'expérience utilisateur (scripts Google Analytics, etc.): avant le </body>.

Est-ce une approche sensée?

Une autre approche serait de mettre tous les scripts dans le <head> et ajoutez des attributs defer aux scripts non essentiels. Cependant, j'ai lu que les anciennes versions de Firefox ne récupéraient pas l'attribut defer.

javascripthtmlfirefoxuser-experience
46
timkl

Je pense que beaucoup de développeurs exécutent javascript juste avant le </body> pour qu'il soit exécuté une fois tous les éléments rendus.

Cependant, si vous organisez correctement votre code, la position sur la page n'a pas d'importance.

Par exemple, lorsque vous utilisez jQuery, vous pouvez vous assurer que le code n'est pas exécuté jusqu'à ce que la page et ses éléments soient entièrement rendus en procédant comme suit:

$(document).ready(function(){
   //Code here
});

Ensuite, la référence du script peut être placée dans la balise head.

Mise à jour - Les balises de script doivent être référencées juste avant </body>. Cela empêche le blocage du rendu pendant le chargement des scripts et est bien meilleur pour la vitesse de perception du site.

Aucun javascript gênant ne doit être utilisé lors de l'utilisation de cette technique.

30
Curt

Javascript doit être placé à la fin du document afin qu'il ne retarde pas le chargement parallèle des éléments de page. Cela nécessite alors que le js soit écrit d'une manière spécifique mais cela améliore la vitesse de chargement des pages.

En outre, idéalement, vous pouvez héberger des références comme celle-ci sous un (sous) domaine différent. Les références à jquery doivent également être signalées sur Google CDN.

Voir http://developer.yahoo.com/performance/rules.html pour plus d'informations.

13
Digbyswift

Je dirais que c'est parfaitement sensé. Comme vous l'avez dit, tant que vous ne déplacez pas les scripts essentiels (par exemple jQuery, Modernizr, etc.) hors du <head>, vous ne devriez pas avoir de problèmes.

Le déplacement de scripts non essentiels au bas de la page devrait aider à la vitesse de chargement perçue (cela et à minimiser/concaténer les scripts).

4
Conan

L'une des raisons pour lesquelles vous souhaitez mettre des scripts avant le </body> est s'ils manipulent le DOM sans interaction avec l'utilisateur, vous aurez donc besoin que le DOM soit chargé pour être manipulé. Une autre façon de le faire est d'ajouter un écouteur d'événements et d'exécuter les scripts lorsque la page est chargée, mais cela nécessitera du code supplémentaire, ce qui pourrait se compliquer si vous avez beaucoup de scripts, en particulier ceux que vous n'avez pas écrits vous-même. Les placer à la fin de la page accélérera également le chargement de la page, bien que dans le cas de la manipulation de scripts DOM, vous pourriez en obtenir des résultats pas si jolis.

3
Nikoloff

Tout dépend de ce que vous entendez par "essentiel pour l'expérience utilisateur". Je suis d'accord pour que modernizr apparaisse tôt par exemple, mais tout ne doit pas être chargé immédiatement. Si vous essayez d'éviter un flash de texte sans style (FOUT), c'est une bonne raison. De même, si vous avez des scripts qui affectent l'apparence de la page avant que l'utilisateur ne fasse quoi que ce soit, vous devez les charger tôt.

N'oubliez pas cependant que la vitesse fait partie de l'expérience utilisateur. Il n'y a aucun avantage à avoir une interaction jquery prête à fonctionner lorsque l'utilisateur ne peut pas encore voir le contenu auquel il s'applique. La différence entre le chargement des scripts au début de la fin est une question de secondes. Si vous laissez la page se charger en premier, l'utilisateur utilisera ces secondes pour saisir la page, vous permettant de charger les scripts discrètement.

Votre page se chargera plus rapidement si vous déplacez des scripts en bas de la page, et cela fait une différence pour votre pagerank ces jours-ci.

De plus, certaines versions de IE génèreront des erreurs si vous essayez d'exécuter un script avant que l'élément auquel il se réfère ne soit chargé.

Comme le dit Ed, vos scripts doivent être stockés dans un fichier séparé et dans le moins de fichiers possible.

1
daveyfaherty

Mettez le Javascript dans un fichier séparé et placez un lien vers celui-ci dans la partie principale de HTML.

0
Ed Heal