Est-ce important que JavaScript soit placé sur une page html?

J'ai hâte avec html5, je n'ai jamais vraiment eu un bon aperçu de JavaScript avant. Je fais référence à un fichier script comme celui-ci (pas dans la tête)

<script src="somthing.js"></script>

Cependant, le script semble fonctionner s'il est placé sous certains éléments sur la page.

Y a-t-il des situations particulières quand il importe où javascript est placé?

Merci d'avance.

Si le script n'attend pas un onload ou "prêt", il doit être situé après les éléments référencés (sinon ils ne seront pas là pour trouver). Si vous n'êtes pas certain, collez-le juste avant </body> .

Dans ce cas, il semble que c'est exactement ce qui se passe, il cherche des éléments qui n'ont pas encore été ajoutés aux DOM. Placer le script au bas du <body> est une pratique courante pour contrer cela. Certaines alternatives utilisent l'événement window.onload pour exécuter votre code, ou $(document).ready() de jQuery $(document).ready() par exemple (la plupart des bibliothèques majeures en ont un peu).

La meilleure pratique selon les règles de performance de Yahoo est de placer des scripts au bas de la page:

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ôtes, vous pouvez obtenir plus de deux téléchargements en parallèle. Cependant, pendant qu'un téléchargement de script est téléchargé, le navigateur ne démarrera aucun autre téléchargement, même sur différents noms d'hôte.

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 pourrait également y avoir des problèmes de portée. Dans de nombreux cas, il existe des façons de contourner ces situations.

Une autre suggestion qui apparaît souvent est d'utiliser des scripts différés. L'attribut DEFER indique que le script ne contient pas document.write et est un indice pour les navigateurs qu'ils peuvent continuer à rendre. Malheureusement, Firefox ne prend pas en charge l'attribut DEFER. Dans Internet Explorer, le script peut être reporté, mais pas autant que désiré. Si un script peut être différé, il peut également être déplacé vers le bas de la page. Cela rendra vos pages Web plus rapides.

Eh bien, nous aurions besoin de savoir ce qui était dans votre script pour vous dire vraiment, mais la réponse courte est "oui, ça compte".

Scripts (essentiellement) s'exécutent lorsqu'ils sont détectés par le navigateur. Une erreur classique est de faire référence à un élément de page dans un script placé plus tôt dans le document que l'élément qu'il fait référence – lorsque le script est exécuté, l'élément n'existe pas encore!

Il est généralement considéré comme approprié de garder les scripts dans la tête, la solution au problème ci-dessus étant donc d'attacher le code fonctionnel aux gestionnaires d'événements en charge.

Bonus round: une place de script beaucoup plus subtile implique que la plupart des navigateurs téléchargent un seul thread lorsqu'ils rencontrent un script (pour des raisons de sécurité et parce que le script peut modifier les conditions de téléchargement par exemple). C'est l'une des raisons pour lesquelles Yahoo recommande de placer les scripts en dernier dans votre document, mais il est controversé de faire pour un bénéfice subtile de la perception seulement.

Si votre script agit sur un élément, il doit être placé après cet élément sur la page ou configuré pour l'exécuter lorsque la page est terminée. Si le script s'exécute avant que l'élément ne soit ajouté au DOM (qui se produit lorsqu'il se trouve à mesure que le navigateur analyse la page), le script ne peut pas trouver l'élément sur lequel vous voulez agir. Mettre le script après l'élément garantit que l'élément est disponible pour qu'il fonctionne. De même, le forcer à s'exécuter après la page entière charge s'assure que tous les éléments sont disponibles pour le script.

Je suggérerais que, dans la mesure du possible, vous chargez vos scripts juste avant la </body> fermeture. Je voudrais également utiliser un cadre, comme jQuery , qui permet de faire fonctionner vos scripts sur la page de chargement complète et d'envelopper le code dans son événement de chargement.

Oui.

Par exemple, disons simplement que votre code js est en haut. Et il est interprété avant le début du navigateur, en configurant une section de l'arborescence dom … dans ce cas, l'élément HTML auquel vous faites référence, s'il est référencé avant qu'il soit disponible, produira une erreur indiquant que l'élément est indéfini.

Une autre raison est l'expérience de l'utilisateur. Si le css est en haut, lorsque le html est affiché, tout semble bien, mais à moins que js soit en bas, vous devrez attendre qu'il soit chargé et être prêt à être exécuté avant que le reste ne soit rendu; Donc, ralentir la vitesse à laquelle les éléments sur l'écran sont rendus.

Je le vois beaucoup. Différents traits pour différents navigateurs, mais mettez simplement les js en bas, et css en haut et vous évitez de vous soucier de ce genre de choses.

Cela dépend de ce que le script est conçu pour faire. Si elle utilise la méthode document.write (), il est important d'être sur la page. Si vous essayez de faire référence à des éléments dans le DOM, il est préférable de placer le HEAD et d'avoir les fonctions qui accèdent aux éléments DOM déclenchés après la chargement de la page.

Il y a quelques scénarios où le placement est important.

En supposant que vous avez un appel de fonction foo() dans your_script.js et vous l'appelez avant d'inclure your_script.js , cela ne fonctionnera tout simplement pas car foo() n'est pas encore défini.
Si le code exige qu'un certain élément soit disponible (par exemple, un script lightbox), il est possible que le chargement du code avant que vos éléments d'image lightbox n'entraîne la lumière.

Donc, fondamentalement … cela dépend beaucoup des scripts que vous exécutez. Parfois, cela importera, d'autres fois il ne le fera pas.

Yahoo recommande réellement de mettre vos scripts en bas. Le téléchargement d'un fichier JS est une action de blocage qui ne signifie rien d'autre à télécharger à ce moment-là (par exemple, images / css) En mettant vos scripts en bas, l'utilisateur obtient le fichier html / images / css en premier et voit la page plus rapidement, Et vos téléchargements JS après avoir ajouté l'interactivité.

Cela dit, comme l'indiquent les autres publications, votre script doit attendre jusqu'à ce que Dom soit prêt avant de faire quelque chose au DOM, sinon vous aurez un comportement varié selon que le DOM est prêt.

Eh bien, voici ce que je pense.

Si vous devez exécuter votre script, avant que le HTML ne commence le rendu dans le navigateur des clients, il sera préférable d'être placé dans la section <head> .

Et si vous exécutez un code JavaScript qui communique avec un élément d'une certaine manière, le script doit être placé derrière cet élément, car si le script commence à l'avance, il ne peut pas trouver son élément respectif pour communiquer. Il est donc préférable de placer derrière l'élément.

Il ne s'agit pas seulement de l'endroit où le script est placé dans la page, mais aussi lorsque le code dans le script est exécuté.

Les étiquettes de script entrent normalement dans la partie head de la page. Cependant, cela signifie qu'aucun élément n'est chargé lorsque le code est chargé, et s'il est exécuté immédiatement, vous ne pouvez accéder à aucun élément. La solution à cela est d'utiliser l'événement onload de la page. Exemple:

 <html> <head> <title></title> <script> function init() { document.getElementById('message').innerHTML = 'Hello world!'; } </script> </head> <body onload="init();"> <div id="message"></id> </body> </html>

Les bibliothèques Javascript peuvent avoir d'autres méthodes pour faire quelque chose de semblable, comme l'événement ready dans jQuery.

Vous pouvez placer des scripts dans la page (bien que ce ne soit pas recommandé par la norme HTML), mais si vous devez accéder aux éléments de la page à partir du code qui s'exécute immédiatement, le script doit être chargé après les éléments. Exemple:

 <html> <head> <title></title> </head> <body> <div id="message"></id> <script> document.getElementById('message').innerHTML = 'Hello world!'; </script> </body> </html>

Les scripts peuvent également être mis en retard dans la page pour des raisons de performance. Vous pouvez le garder à l'esprit et l'enregistrer jusqu'à ce que vous ayez des problèmes de performance.

En termes simples: Assurez-vous que l'élément (s) accessible (s) au script est chargé avant l'exécution du script. Bien sûr, si vous ne savez pas le mettre juste avant.

Votre script tente probablement d'opérer sur le DOM avant qu'il ne soit prêt. Cela ne devrait pas être résolu en le déplaçant, mais plutôt en reportant l'exécution avec des rappels domready .

Après cela est trié, vous devriez aspirer à garder le script intérieur de la head . Il était habituel d' inclure des scripts au bas de la page pour éviter les blocages de pages et de requêtes. En HTML5, ces impacts de performance ne sont plus importants car vous pouvez profiter d'un attribut async . Il permet de lancer le chargement de fichiers JS sans effets secondaires:

Les scripts traditionnels bloquent l'analyseur HTML, empêchant que le reste de la page ne soit rendu jusqu'à ce que le script ait été téléchargé et exécuté. Les scripts utilisant HTML5 async débloquent le reste de la page afin qu'il puisse continuer à charger pendant que le script est en cours de téléchargement. ^