Scripts : async, defer
Un chargement efficace des pages est crucial pour les performances web. Le JavaScript doit être géré avec soin pour optimiser les temps de chargement et améliorer l'expérience utilisateur. Cet article couvre les techniques de chargement asynchrone des scripts, en particulier les attributs async et defer dans les balises <script>. Une implémentation correcte de ceux-ci contrôle comment et quand les fichiers JavaScript sont chargés, accélérant considérablement votre site web.
Comprendre l'attribut async
Qu'est-ce que l'attribut async ?
Lorsque vous ajoutez l'attribut async à une balise <script>, vous indiquez au navigateur de charger le script de manière asynchrone avec le reste de la page. Cela signifie que le script sera téléchargé en arrière-plan sans bloquer le rendu de la page. Une fois le script téléchargé, il est exécuté immédiatement, ce qui peut se produire avant que tout le document HTML ne soit analysé.
Remarque : Les attributs async et defer ne fonctionnent qu'avec les scripts externes qui incluent l'attribut src.
Exemple de code : Utilisation de async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Example</title>
</head>
<body>
<h1>Testing Async</h1>
<script async src="https://example.com/async-script.js"></script>
</body>
</html>Avantages de l'utilisation de async
- Non bloquant : Le processus d'analyse HTML continue pendant le téléchargement du script.
- Rapidité : Peut réduire le temps de chargement perçu car le script est géré en arrière-plan.
Exploiter l'attribut defer
Qu'est-ce que l'attribut defer ?
L'attribut defer, lorsqu'il est utilisé dans une balise <script>, permet également au script de se charger de manière asynchrone. Cependant, contrairement aux scripts avec l'attribut async, les scripts différés ne sont exécutés qu'après que le document HTML a été entièrement analysé. Les scripts différés s'exécutent après la fin de l'analyse, mais avant le déclenchement de l'événement DOMContentLoaded. Cela est idéal pour les scripts qui nécessitent que tout le DOM soit disponible et n'affectent pas la structure du document.
Exemple de code : Utilisation de defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Example</title>
</head>
<body>
<h1>Testing Defer</h1>
<script defer src="https://example.com/defer-script.js"></script>
</body>
</html>Avantages de l'utilisation de defer
- DOM prêt : Garantit que tout le document HTML est analysé avant l'exécution.
- Ordre préservé : Les scripts s'exécutent dans l'ordre où ils apparaissent dans le document, ce qui est crucial pour les scripts qui dépendent les uns des autres.
Quand utiliser async vs defer
Le choix entre async et defer dépend largement de vos besoins spécifiques :
- Utilisez
asynclorsque le script ne dépend d'aucun autre script ou élément DOM. - Utilisez
deferpour les scripts qui nécessitent l'intégralité du DOM ou lorsque l'ordre d'exécution des scripts est important.
Exemple pratique : Décisions de chargement de scripts
Imaginez un scénario où vous devez charger une bibliothèque utilitaire (comme lodash) et votre fichier JavaScript principal qui dépend de cette bibliothèque. Voici comment vous pourriez décider de charger ces scripts :
<script defer src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
<script defer src="script.js"></script>Dans cette configuration, les deux scripts sont chargés de manière asynchrone, mais ils ne s'exécuteront pas avant que la page entière ne soit analysée, et ils s'exécuteront dans l'ordre où ils apparaissent.
Conclusion
Utiliser efficacement les attributs async et defer dans les balises de script est crucial pour le développement web moderne. En comprenant et en appliquant correctement ces attributs, les développeurs peuvent garantir des chargements de pages plus rapides et une meilleure expérience utilisateur. Le chargement asynchrone des scripts vise l'optimisation des performances et la création d'applications web efficaces et centrées sur l'utilisateur.
Pratique
Quelles sont les utilisations des attributs 'async' et 'defer' en JavaScript ?