Ou charger son javascript ? header, body, etc

newty · 1 Octobre 2010

Bonjour,

J'en ai parlé avec une connaissance mais j'aimerai avoir confirmation... concernant le chargement du JS.

Je pensais que :

- Si on mets ses js (fichiers + code) au début du body (juste après <body>), tant que ceux-ci ne seront pas chargés, le reste de la page ne chargera pas. (ça, je n'ai pas de doute)

- D'où le fait de les placer à la fin du body (juste avant </body>) puisqu'il ne restera plus que ces fichiers à charger (ça, je n'ai pas de doute).

Dans le head (entre <head> et </head>), je pensais que ces fichiers seront chargés en parallèle du reste de la page donc ce ne sera pas bloquant mais mon ami me dit non. Que c'est à la fin du body pour que cela ne bloque pas.

J'aimerai donc avoir vos avis sur le sujet

Merci !

Djibou_Te@M · 1 Octobre 2010

Bonjour, il est vrai que tant qu'un JS n'est pas fini de charger, le code qui suit ne se charge pas.

Tu as de plus en plus d'outils d'analyse de code qui préconisent le chargement des JS en fin de body.

newty · 1 Octobre 2010

Je suis tout a fait d'accord. Cependant, qu'en est-il du chargement dans le header ? Est-ce bloquant ou pas ?

jcaron · 1 Octobre 2010

A ma connaissance, bloquant aussi (facile à tester: mets un <script> avec une url qui ne répond pas, par exemple http://1.2.3.4/toto.js, et regarde ce qu'il se passe)...

Il faut donc soit mettre le script à la fin du body, soit utiliser l'attribut "defer" qui signifie qu'il peut le charger en parallèle (mais ça implique que le script n'ait pas besoin de faire des choses comme des document.write à l'endroit où il est chargé).

Jacques.

JanoLapin · 1 Octobre 2010

il me semble que GG préconise néanmoins de placer le script GA asynchrone dans les <head>.

Que faut-il comprendre?

boby55 · 1 Octobre 2010

Dans le head :
1) d'abord les CSS,
2) ensuite les JS.

Pour les soucis de fonction appelées avant que le body soit chargé, il suffit d'utiliser des appels du type domready qui lance un function JS une fois le dom chargé en entier (voir librairies Jquery, Prototype, etc...)