Placement optimal des éléments de script dans le balisage HTML Lors de l'intégration de JavaScript dans des documents HTML, le placement correct de les balises et les scripts associés ont fait l’objet de débats. Bien qu'il soit largement reconnu que les placer dans le groupe <head> n'est pas conseillé, il est conseillé de les positionner au début de la section <body> La section pose également des problèmes.</p> <p><strong>Le problème avec les approches traditionnelles</strong></p> <p>Les recommandations plus anciennes suggèrent de placer <script> balises en bas du champ <body> section, en supposant que cela empêche de bloquer l’analyseur jusqu’à la fin. Cependant, cette approche introduit un problème différent : le navigateur ne peut pas lancer de téléchargements de script tant que l'intégralité du document n'a pas été analysée. Sur les sites Web plus volumineux dotés de scripts et de feuilles de style volumineux, ce délai a un impact significatif sur les performances.</p> <p><strong>La solution moderne : les attributs asynchrones et différés</strong></p> <p>Aujourd'hui, les navigateurs proposent les attributs asynchrones et différés. sur les scripts. Ces attributs demandent au navigateur de procéder à l'analyse pendant le téléchargement des scripts.</p> <ul> <li> <strong>async :</strong> Les scripts avec l'attribut async s'exécutent dès qu'ils sont téléchargés, sans bloquer le navigateur. Notez que les scripts peuvent s'exécuter dans le désordre dans ce scénario.</li> <li> <strong>defer :</strong> Les scripts avec l'attribut defer s'exécutent dans l'ordre dans lequel ils apparaissent, mais seulement après le chargement de l'intégralité du document. Cela garantit que les scripts s'exécutent dans le bon ordre sans bloquer le navigateur.</li> </ul> <p><strong>Modules</strong></p> <p>Les scripts qui incluent type="module" seront traités comme des modules JavaScript et chargé comme des scripts différés.</p> <p><strong>Conclusion</strong></p> <p>L'approche moderne de l'optimisation Le placement des scripts consiste à inclure des scripts dans le répertoire <head> et utilisez les attributs async ou defer. Cela permet aux scripts de se télécharger rapidement sans gêner le navigateur, tout en conservant une compatibilité ascendante avec les anciens navigateurs qui ne prennent pas en charge ces attributs. En mettant en œuvre cette approche, votre site Web peut bénéficier de temps de chargement améliorés tout en préservant les fonctionnalités sur tous les navigateurs.</p>