Où placer sa balise script ?
Dans ton cul !
Hum.
M’sieur, pourquoi on conseille partout, depuis plusieurs années, de placer ses balises script en fin du body ?
C’est une question qui est revenue une paire de fois lors de mes cours, ainsi que dans d’autres occasions, alors autant faire un petit billet de blog.
Note aux puristes: ce billet est la retranscription d’explications données à des élèves en développement web. À ce titre, il utilise certains raccourcis qui peuvent sembler simplistes (tout en étant corrects), et se permet d’omettre certains détails trop techniques (et inutile dans un contexte générique).
Avant toutes choses, il faut comprendre comment est interprêté une balise script lors du chargement d’une page : lorsque le parser html tombe sur une balise, quelle qu’elle soit, le parser l’interprête avant de passer à la suivante, jusqu’à ce que toutes les balises soient interprêtées.
Quand une balise <script> est rencontrée, il existe deux cas de figure : les scripts inline et les fichiers de script externes.
Quand le parser tombe sur un script inline (une balise script qui entoure du code javascript directement dans le document html), le parsing du reste de la page est intérrompu le temps que le code soit exécuté.
Dans le cas d’un script externe, il faut en plus rajouter le temps de récupérer ce script externe sur le serveur, ce qui ralentit d’autant le chargement de la page.
Du coup, en plaçant les balises <script> dans le <head>, le chargement de la page est en pause tant que les scripts ne sont pas chargés et exécutés. Et comme le contenu de la page n’a pas encore été lu par le parser, le navigateur, pendant le chargement, affiche une page vide (blanche).
En plaçant les <script> tout en bas du <body>, l’effet est inverse : les éléments de la page ont été chargés et sont affichés, et le navigateur a probablement déjà interprêté tout le css en parallèle. Du coup, la mise en pause du chargement de la page le temps de l’interprétation des scripts est un événement moins bloquant : la page était déjà presque complètement chargée, le visiteur voit déjà la page, et le peut déjà commencer sa navigation.
Bien sûr, tous les comportements décris ci-dessus sont sensés se passer très vite : l’interprétation d’un script devrait prendre une poignée de millisecondes, tout au plus.
Mais rien n’est sûr concernant la récupération du fichier sur le serveur : connexion lente, terminaux mobiles, quota de connexion… tout ces paramètres doivent être pris en compte, et c’est pour ça que depuis quelques années, avec la montée en importance de javascript (et donc des scripts un peu plus gros et complexes qu’avant) et l’importance de bonnes performances web (utilisations de terminaux mobiles souvent limités par l’infrastructure du réseau), on prend l’habitude de placer les balises <script> en fin de <body>.
Liens et références
Douglas Crockford a écrit une petite page qui regroupe tout ce qu’il y a à savoir sur la balise script.
Il n'y a pas de module de commentaires sur ce blog, principalement pour éviter à devoir gérer avec les spams, la pub, les insultes, ...
Toutefois, si vous avez quelque chose à dire/corriger/modifier, ou simplement exprimer votre opinion sur un post, n'hésitez pas à me contacter sur Twitter (@leny_be).