Placement optimal des balises de script dans le balisage HTML Introduction Lors de l'intégration de JavaScript dans des documents HTML, l'emplacement approprié de Les balises ont longtemps été un sujet de débat. Cet article explore les meilleures pratiques en matière de placement de balises, en abordant les idées fausses associées à l'attribut <head> et <corps> sections.</p> <h3>Idées fausses historiques</h3> <p>Dans le passé, il était déconseillé de placer <script> balises dans le <head> section. Cependant, cette recommandation était obsolète et provenait du risque que les scripts bloquent le rendu des pages lors de leur analyse.</p> <p>À l'inverse, placer <script> balises au début du <body> Cet article a également été jugé indésirable. En effet, le navigateur devrait analyser le code JavaScript avant de restituer complètement la page, ce qui entraînerait des problèmes de performances potentiels.</p> <h3>Meilleures pratiques modernes</h3> <p>Aujourd'hui, l'emplacement optimal pour <script> les balises se trouvent dans le répertoire <head> section. Cela permet aux navigateurs de commencer à télécharger des scripts immédiatement sans bloquer l'analyse du reste du document.</p> <p>Pour éviter le comportement de blocage associé à l'analyse des scripts, les navigateurs prennent désormais en charge les attributs async et defer.</p> <h3> Utilisation des attributs async et différés</h3> <p><strong>Async :</strong> Scripts avec l'attribut async sont exécutés de manière asynchrone, ce qui signifie que le navigateur peut continuer à analyser le document pendant que le script se télécharge et s'exécute.</p> <p><strong>Différer :</strong> Les scripts avec l'attribut defer sont exécutés dans l'ordre dans lequel ils apparaissent dans le document, mais uniquement une fois que l'ensemble du document a été analysé.</p> <p><strong>Modules :</strong> Modules JavaScript avec chargement type="module" de manière asynchrone et sont traités comme des scripts différés.</p> <h3>Conclusion</h3> <p>En utilisant les attributs async, defer ou module et en plaçant <script> balises dans le <head> », les développeurs de sites Web peuvent optimiser les vitesses de chargement des pages et améliorer l'expérience utilisateur.</p> <h3>Références</h3> <ul> <li>[attributs asynchrones ou différés](https://www.html5rocks.com/en/tutorials /speed/script-loading/)</li> <li>[Chargez efficacement JavaScript avec defer et async](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/defer-loading-javascript)</li> <li>[Supprimer JavaScript bloquant le rendu](https://www .w3.org/TR/html5/scripting-1.html#remove-render-blocking-javascript)</li> <li>[Async, Defer, Modules : une aide-mémoire visuelle](https://addyosmani.com/blog/async-defer-modules-explained/#~a-visual-explanation)</li> <li>[<script> : attribut de type](https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)</li> </ul>