jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils HTML

Gratuit Constructeur de strategie de chargement de script

Générez des balises script avec la bonne strategie — normal, defer, async ou type module.

Chargement de l'outil...

Qu'est-ce que Constructeur de strategie de chargement de script ?

La façon dont un script se charge affecte les performances de la page et l'ordre d'execution des scripts. Un script normal bloque l'analyse HTML. defer telecharge en parallele et s'execute apres l'analyse HTML. async telecharge en parallele et s'execute des qu'il est prêt. Les scripts type='module' sont différés par defaut. Le choix de la bonne strategie depend de si le script est critique, depend d'autres scripts ou est independant.

Réponse rapide

Choisissez une strategie de chargement de script en fonction du moment ou le script doit s'executer. Utilisez defer pour les scripts qui ont besoin du DOM complet mais peuvent telecharger en parallele. Utilisez async pour les scripts independants comme les analytics. Utilisez type='module' pour le code de module ES moderne.

Last updated: 2026-05-25

Limites

  • Defer preserve l'ordre d'execution des scripts ; async non. Choisissez en fonction de l'importance de l'ordre des scripts.
  • Les scripts async s'executent des qu'ils ont fini de telecharger, ce qui peut bloquer le rendu si le script est volumineux.
  • Les scripts type='module' sont différés par defaut et n'ont pas besoin d'un attribut defer supplementaire.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez le type de script qui correspond a votre cas d'usage.
  2. Saisissez l'URL du script.
  3. L'outil recommande le meilleur attribut de chargement.
  4. Copiez la balise script avec les attributs corrects.

A quoi il sert

  • Ajouter un bundle d'application différé qui s'execute apres l'analyse de la page.
  • Inclure un script analytics async qui se charge independamment.
  • Configurer un script module pour un point d'entree Vite ou Astro.

Cas d'usage

Exemples concrets

Exemple

Script analytics avec async

Un script analytics utilise async pour se charger sans bloquer la page.

Exemple

Bundle d'application avec defer

Un bundle d'application utilise defer pour maintenir l'ordre d'execution tout en ne bloquant pas l'analyse HTML.

Erreurs frequentes

  • Utiliser async pour des scripts qui dependent d'elements DOM ou d'autres scripts.
  • Utiliser defer pour des scripts qui doivent s'executer immediatement independamment de l'etat d'analyse.
  • Utiliser type='module' pour des scripts qui ne sont pas des modules ES.

Vérification

  1. Ouvrez le panneau Reseau de Chrome DevTools et verifiez les colonnes Initiateur et Cascade pour confirmer quand chaque script commence a se charger et a s'executer.
  2. Testez le rendu de la page et le timing d'interactivite avec différentes strategies en utilisant le panneau Performance.

Comparaison

async vs defer vs type="module"

Aspectasyncdefertype="module"
Execution timingExecutes as soon as the script finishes downloading, before DOMContentLoadedExecutes after HTML parsing is complete, just before DOMContentLoadedExecutes after HTML parsing is complete, same as defer behavior
Script order guaranteeNo. Scripts execute in the order they finish downloading.Yes. Scripts execute in the order they appear in the HTML.Yes. Scripts execute in the order they appear, same as defer.
Blocks HTML parsingDoes not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.Does not block HTML parsing. Downloads in parallel.
Use casesIndependent scripts such as analytics, A/B testing, or social widgetsScripts that need the full DOM such as app bundles that query or modify the pageModern ES module code where import/export syntax is used
Default behavior without attributeWithout any attribute, the script blocks HTML parsing until it downloads and executesN/Atype="module" scripts are deferred by default and do not need an explicit defer attribute

Async downloads in parallel and runs on completion. Defer downloads in parallel but waits for the HTML to finish parsing. Module scripts are deferred by default and support ES module dependency graphs.

FAQ

Questions sur Constructeur de strategie de chargement de script

Quelle est la difference entre defer et async ?

Defer telecharge en parallele et attend la fin de l'analyse HTML pour s'executer, preservant l'ordre des scripts. Async telecharge en parallele et s'execute immediatement quand il est prêt, ignorant l'ordre.

type='module' a-t-il besoin de defer ?

Non. Les scripts module sont différés par defaut et n'ont pas besoin d'un attribut defer explicite.

Ou dois-je placer la balise script dans le document HTML ?

La meilleure pratique moderne est de placer les balises script dans l'en-tete avec defer ou type='module'. Les deux telechargent en parallele avec l'analyse HTML et s'executent apres que le DOM est prêt.

Defer fonctionne-t-il sur les scripts en ligne ?

Non. L'attribut defer ne fonctionne que sur les scripts externes avec un attribut src. Les scripts en ligne sont executes immediatement pendant l'analyse HTML.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi