Quel JavaScript doit être inclus dans <head> et ce qui est inclus dans <body>?

Je suis confus quant à savoir quel JavaScript devrait être inclus là où?

Par exemple:

Où faut-il inclure les bibliothèques jQuery? Dans l'élément <head> ou before the closing </body> ?
Si le JavaScript est défini au bas du <body> , peut-il être utilisé en ligne dans le corps?
Si cela bloque les téléchargements parallèles, alors pourquoi ne dit-on pas que votre CSS soit en bas?

La place de l'élément <script>

Les éléments du script bloquent les téléchargements progressifs de la page.
Les navigateurs téléchargent plusieurs composants à la fois, mais lorsqu'ils rencontrent un script externe, ils arrêtent d'autres téléchargements jusqu'à ce que le fichier de script soit téléchargé, analysé et exécuté.
Cela nuit à l'heure générale de la page, surtout si cela se produit plusieurs fois lors d'une charge de page.
Pour minimiser l'effet de blocage, vous pouvez placer l'élément de script vers la fin de la page, juste avant la balise de fermeture.
De cette façon, il n'y aura pas d'autres ressources pour bloquer le script. Le reste des composants de la page sera téléchargé et engagera déjà l'utilisateur.
Le pire antipattern est d'utiliser des fichiers séparés dans la tête du document:

 <!doctype html> <html> <head> <title>My App</title> <!-- ANTIPATTERN --> <script src="jquery.js"></script> <script src="jquery.quickselect.js"></script> <script src="jquery.lightbox.js"></script> <script src="myapp.js"></script> </head> <body> ... </body> </html>

Une meilleure option est de combiner tous les fichiers:

 <!doctype html> <html> <head> <title>My App</title> <script src="all_20100426.js"></script> </head> <body> ... </body> </html>

Et la meilleure option est de mettre le script combiné à la fin de la page:

 <!doctype html> <html> <head> <title>My App</title> </head> <body> ... <script src="all_20100426.js"></script> </body>

CSS

CSS est chargé dans <head> pour empêcher Flash Of Unstyled Content (FOUC), une situation où votre page s'affiche sans styles pour une fraction de seconde. Le fait de les charger dans <head> est un sacrifice mineur pour vous assurer que votre page est parfaite lorsque le contenu est rendu.

JS

Cas général:

JS est chargé en bas pour plusieurs raisons (mais sans s'y limiter):

Afin de ne pas bloquer le chargement d'autres ressources et le rendu de la page.
L'utilisation traditionnelle de JS est destinée à être améliorée, comme la validation côté client et les effets spéciaux mineurs. Ceux-ci sont habituellement facultatifs et n'influent pas sur l'objectif général de la page. Par conséquent, ils sont chargés en dernier.
L'ajout de scripts après le contenu garantit que les éléments référencés par vos scripts sont accessibles en toute sécurité, car ils sont déjà sur le DOM.

Des exceptions:

Mais il existe quelques exceptions à la règle:

"Bibliothèques avant le vol" comme Modernizr

Modernizr applique des classes sur la <html> pour indiquer la disponibilité des fonctionnalités, qui peuvent être utilisées aux fins de JS et CSS. Délivrer cela pourrait provoquer un changement brusque de style en raison de l'ajout de classe, ainsi que des JS cassés car la vérification n'a pas été faite plus tôt.
Les analyseurs CSS comme LESS / SASS et les scripts qui affectent les styles

Les styles LESS / SASS à distance sont chargés via AJAX, donc la page se rend indépendamment du fait que les styles sont prêts ou non. Les charger dans la tête les fera charger les styles le plus tôt possible pour éviter les FOUC.
Les "bibliothèques de Bootloader" comme RequireJS doivent être chargées le plus tôt possible pour télécharger les autres scripts en parallèle.
Les applications Web ont besoin de JS comme plate-forme. Il est préférable de charger ces bibliothèques au début de la tête. En outre, dans une application web, il existe un contenu de page minimal avant l'exécution de l'application.

Étuis Edge:

Il y a deux attributs de script à mentionner ici aussi, et ils sont defer et async .

Fondamentalement, l'idée est qu'une balise de script avec defer s'exécute uniquement après la parution du DOM et les balises de script avec des scripts asynchrones de manière asynchrone sans bloquer les autres opérations. Il serait implicite que vous puissiez utiliser des scripts dans la tête, appliquer un async Pour les charger en parallèle, et defer pour s'assurer que le DOM est prêt lorsqu'il est exécuté, mais chacun a ses propres problèmes.

Voici une documentation de MDN expliquant plus sur ce qu'ils sont et une réponse qui parle à peu près de leur histoire, de leur soutien et de leur statut actuel.