Les instructions JavaScript peuvent être écrites directement dans une page Web entre les balises <script> et </script>.
<script>
// instructions JavaScript ici
</script>
Elles peuvent également être placées dans un fichier .js qui sera ajouté à la page Web à l'aide d'une balise <script> avec un attribut src.
// instructions JavaScript ici
<script src="monscript.js"></script>
Notez que la balise <script> ne peut pas être auto-fermante (ce n'est pas acceptable d'écrire <script ... />). Vous devez écrire <script ... ></script> même s'il a rien entre les deux balises.
Quelle approche est préférable? Voici quelques arguments pour vous aider à choisir.
| Arguments en faveur du code dans un fichier .js | Arguments en faveur du code directement dans page Web |
|---|---|
|
Si le code JavaScript doit être utilisé sur plus d'une page Web, l'utilisation d'un fichier .js permettra de ne l'écrire qu'une seule fois et ainsi de respecter le principe DRY (Do not Repeat Yourself). |
Lorsque le code JavaScript est tout simple et n'a pas à être répété sur d'autres pages, il est acceptable de l'inclure directement dans une page Web. |
| Il sera possible d'utiliser des outils pour combiner et minifier les différents fichiers .js chargés par une page Web afin d'en améliorer les performances. |
Techniquement, les balises <script> et </script> peuvent être placées n'importe où dans la page Web.
Cependant, il est préférable de choisir un emplacement qui tient compte de deux aspects importants :
C'est pourquoi les balises <script> doivent être placées à l'un de ces endroits :
L'attribut defer est supporté par Google Chrome depuis la version 8 sortie en décembre 2010.
Selon la documentation officielle de MDN2 :
Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement DOMContentLoaded.
Autrement dit, si vous ajoutez l'attribut defer dans une balise <script src="...">, le fichier JavaScript ne sera pas exécuté tant que le DOM ne sera pas entièrement chargé. Et il sera exécuté avant le code associé à l'évènement DOMContentLoaded.
Ce qu'il y a de particulier avec defer, c'est que le script sera chargé parallèlement au code HTML, en « background ». Ceci fera en sorte que le temps de chargement total sera légèrement plus rapide que si la balise <script> avait été placée juste avant le </body>.
La balise <script> doit être placée dans la section <head> de la page Web pour que le chargement en parallèle puisse avoir lieu.
<html>
<head>
...
<script src="..." defer></script>
...
</head>
<body>
...
</body>
</html>
Notez que pour un site WordPress, la technique pour ajouter l'attribut defer est expliquée ici.
Si les balises <script> sont placées juste avant le </body>, ceci assure que le DOM sera entièrement chargé avant que le code JavaScript soit exécuté.
Puisque la page est chargée de façon séquentielle, ceci assure également que le chargement du JavaScript sera fait en dernier, sans ralentir le rendu de la page Web.
Cette approche peut être utilisée lorsque le code JavaScript est dans un fichier externe ou lorsque le code est placé directement dans la page Web.
<body>
...
<script>
...
</script>
</body>
ou
<body>
...
<script src="..."></script>
</body>
Parfois, pour des raisons techniques qui sortent du cadre de cette formation, il faudra placer la balise <script> ailleurs dans la page.
De plus, l'attribut defer n'est parfois pas une option valable. Ce serait le cas, par exemple, si le code JavaScript est inclus directement dans la page Web ou si le code doit pouvoir rouler sur un navigateur qui ne supporte pas cet attribut.
Pour assurer que le code JavaScript ne soit pas exécuté avant que le DOM soit chargé, il est possible d'utiliser l'évènement DOMContentLoaded.
Selon la documentation officielle de MDN1 :
L’évènement DOMContentLoaded est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.
Pour utiliser cette technique, il faut placer le code JavaScript dans cette structure de code :
document.addEventListener("DOMContentLoaded", function(event) {
// code JavaScript ici
});
Ceci n'a aucun impact sur le moment où le code JavaScript est chargé. Il faut donc placer la balise <script> le plus bas possible dans la page afin de ne pas ralentir le rendu du HTML.
1. « DOMContentLoaded ». MDN. https://developer.mozilla.org/fr/docs/Web/API/Window/DOMContentLoaded_event
2. « <script> : l'élément de script - defer ». MDN. https://developer.mozilla.org/fr/docs/Web/HTML/Element/script#attr-defer
« Mesurer le chemin critique du rendu avec Navigation Timing ». Web Fundamentals. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp
▼Publicité
