11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je vois pas mal d'avis divergents sur la position des scripts.

Certains les placent dans le <head>, d'autres avant </body>

J'ai testé la fin de page pour une plus grande rapidité d'affichage, comme souvent conseillé ici mais alors, mon site n'est pas validé W3C.

Quelle est le bon emplacement ?

Merci pour votre aide !
Modifié par xxi (05 May 2010 - 14:10)
Il est, d'après le valideur du w3c plus correct de placer les scripts dans la balise <head>. Cela dit, le problème posé est qu'à l'exécution de ces derniers, l'arbre DOM n'a pas encore été chargé. Autrement dit, quelque chose du genre :
document.getElementById('monId');
... ne marchera pas. Cela dit il existe un moyen d'attendre que l'arbre DOM soit chargé, via l'événement DOMContentLoaded. Il suffit donc d'ajouter lier cet événement dès le chargement de la page, et de lui faire exécuter une fonction une fois que c'est fait.
Par exemple (c'est très incomplet et ça ne marcherait pas sous IE mais c'est juste pour l'exemple) :
document.addEventListener('DOMContentLoaded', init, false);
function init()
{
   // l'arbre DOM a été chargé : le reste du script peut être executé juste après cette ligne.
}
Bonjour,

Les éléments script peuvent être placés soit dans le head, soit dans le body (aucun problème de validation de ce côté-là).

La question des performances n'est évidemment pertinente que pour les éléments script qui font référence à des fichiers externes : le parseur des navigateurs s'interrompt en attendant que le fichier soit chargé et interprété (notamment pour prendre en compte d'éventuelles interactions du code avec le parseur via document.write).

Pour que le rendu de la page soit rapide, il est donc préférable de placer les éléments script le plus bas possible dans le document : avant </body>, ou plus haut si nécessaire (par exemple, si le script utilise document.write, il faut sans doute le laisser à son emplacement d'origine).
Modifié par Julien Royer (05 May 2010 - 16:12)