Ou charger son javascript ? header, body, etc.

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par newty, 1 Octobre 2010.

  1. newty
    newty Nouveau WRInaute
    Inscrit:
    28 Janvier 2009
    Messages:
    25
    J'aime reçus:
    0
    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 !
     
  2. Djibou_Te@M
    Djibou_Te@M WRInaute occasionnel
    Inscrit:
    20 Avril 2010
    Messages:
    468
    J'aime reçus:
    0
    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.
     
  3. newty
    newty Nouveau WRInaute
    Inscrit:
    28 Janvier 2009
    Messages:
    25
    J'aime reçus:
    0
    Je suis tout a fait d'accord. Cependant, qu'en est-il du chargement dans le header ? Est-ce bloquant ou pas ?
     
  4. jcaron
    jcaron WRInaute accro
    Inscrit:
    13 Février 2004
    Messages:
    2 821
    J'aime reçus:
    0
    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.
     
  5. JanoLapin
    JanoLapin WRInaute accro
    Inscrit:
    21 Septembre 2008
    Messages:
    4 810
    J'aime reçus:
    0
    il me semble que GG préconise néanmoins de placer le script GA asynchrone dans les <head>.

    Que faut-il comprendre?
     
  6. boby55
    boby55 WRInaute occasionnel
    Inscrit:
    2 Avril 2008
    Messages:
    418
    J'aime reçus:
    0
    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...)