Avantages et inconvénients: mettre du javascript en tête et mettre juste avant la fermeture du corps

Question 1

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

Mais lorsque j'ouvre la source html de sites Web célèbres tels que celui-ci, je trouve qu'ils mettent des fichiers js dans la balise head.

Quels sont les avantages et les inconvénients des deux approches et quand les utiliser?

Une autre question a été trouvée pour le même problème: Où dois-je déclarer les fichiers JavaScript utilisés dans ma page? À <head> </head> ou à proximité </body>?

Question 2

D'après les meilleures pratiques de Yahoo pour accélérer votre site Web :

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.

Par conséquent, en général, il est préférable de les mettre en bas. Cependant, il est pas toujours possible, et souvent elle ne fait pas que beaucoup de différence de toute façon.

Question 3

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

Si vous déplacez vos balises de 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 de script et la page apparaîtra probablement pour être rendue avant que les scripts ne commencent à s'exécuter. Cela signifie également que si vous dépendez de certaines fonctionnalités de vos scripts, cela ne sera disponible qu'un peu après que la page soit visible par l'utilisateur.

Si vous ajoutez des styles ou des éléments (etc. en changeant de champs de texte avec une forme d'éditeur plus riche), cela sera visible par l'utilisateur sous forme de scintillement.

Si vous ajoutez des événements de clic à des éléments, ils ne seront cliquables qu'un peu après que les éléments eux-mêmes soient visibles.

Parfois, ces problèmes vous obligent à mettre vos scripts dans la tête, d'autres fois, tout ira bien en les collant en bas.

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

Question 4

En général, vous devez placer les références de script au bas de votre page. Les scripts doivent non 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 procède au processus de rendu. Des choses comme Modernizr devraient être placées en haut car il effectue des détections de fonctionnalités ainsi que des shims HTML5 que vous voudrez probablement.

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

Oui, vous devrez peut-être réfléchir un peu plus à la manière dont vous concevez 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 faire 500 ms, peut-être 5000 ms, mais tout compte.

Question 5

Cela dépend vraiment de votre site Web. Si vous accédez et invoquez les fonctions JavaScript à l'intérieur du corps, il doit être référencé dans l'en-tête pour qu'il soit chargé. Sinon, si vous n'allez appeler le JavaScript que lorsque tout le document 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, puis récupérez le fichier .JS. De cette façon, l'utilisateur pourra voir rapidement la page et au moment où il se familiarisera avec la page, le fichier .JS a déjà été téléchargé.

Question 6

Tout javascript dans l'en-tête sera évalué avant le chargement de la page, ce qui signifie que la page semble prendre plus de temps à charger. Il est légèrement plus difficile de faire fonctionner correctement les événements si tout le javascript est à la fin, mais jQuery résout à peu près ce problème pour vous.