Chargement du script en utilisant l’async et différer

Introduction

Lorsqu’il s’agit de créer des sites Web prêts pour la production, JavaScript est un élément essentiel. Il donne vie aux sites Web en ajoutant l’interactivité, le dynamisme et une expérience conviviale. Que vous cherchiez à implémenter le suivi de l’emplacement en temps réel pour une application de livraison de nourriture ou à suivre le trafic utilisateur avec un graphique à barres sur un tableau de bord d’administration, JavaScript est la clé pour rendre ces fonctionnalités possibles.

Mais vous êtes-vous déjà demandé comment ces fonctionnalités sont chargées dans notre application? Ces fonctionnalités sont chargées à l’aide du étiqueter. Les scripts sont chargés pour assurer des performances optimales pour votre site Web ou votre application. La façon dont le script est chargé peut avoir un impact significatif sur les temps de chargement des pages et l’expérience utilisateur globale.

Il existe deux méthodes principales pour charger un script: asynchrone et reporter. Les deux techniques permettent aux scripts de s’exécuter sans bloquer d’autres processus importants, comme le chargement du contenu ou le rendu de page. Dans ce blog, nous plongerons dans ces deux approches et explorerons comment ils peuvent aider à améliorer votre Performance du site Web.

Mayage par défaut de charger un script

Commençons par comprendre comment les scripts sont chargés par défaut, sans utiliser les attributs asynchronisés ou différés. Lors de la liaison d’un script externe à un fichier HTML, nous utilisons généralement le tag, qui peut être placé soit à l’intérieur du ou le .

Par défaut, lorsque ni l’attribut async ni de report n’est utilisé, le script est téléchargé et exécuté Tout de suite, bloquant le processus d’analyse HTML jusqu’à ce que le script ait terminé le chargement et l’exécution.

Jetons un coup d’œil à un exemple pour mieux comprendre ce comportement:

<!----============Code============---->
<p>content before script...</p>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
<p>content after script...</p>

Comportement par défaut

Décomposons ce qui se passe dans le code. Imaginez que vous intégrez l’API Google Maps dans une application HTML. Vous incluez le script Google Maps dans une balise , et il y a aussi une balise

sœur avec du texte. Maintenant, voyons comment le navigateur gère cela dans le cas par défaut:

• Pour rendre le contenu dans le navigateur, il commence analyser le HTML.
• Si le navigateur Rencontre une balise Pendant l’analyse, il pause le Html analyse et commence à télécharger le script.
• Ce processus de téléchargement de script bloque davantage l’analyse du HTML jusqu’à ce que le script soit entièrement téléchargé et exécuté.
• En conséquence, ceci retard de rendu peut négativement affecter le expérience utilisateurcar la page est maintenue jusqu’à ce que le script ait terminé le chargement et l’exécution. Ce comportement par défaut peut provoquer des temps de chargement plus lents et avoir un impact sur la réactivité de la page.

Façon asynchrone de charger un script

Comme nous l’avons vu dans le cas par défaut, le processus d’analyse HTML a été bloqué car le navigateur a dû attendre le téléchargement et l’exécution du script, ce qui a entraîné un rendu plus lent de l’application. Cependant, il existe une meilleure façon de gérer cela. En ajoutant le attribut asynchrone Pour la balise , nous pouvons améliorer ce processus. Lorsqu’un script est inclus avec l’attribut asynchronisé, il demande au navigateur de télécharger le script de manière asynchrone tout en analysant le document HTML. Cela signifie que le script est récupéré en arrière-plan, sans interrompre ni bloquer l’analyse HTML, conduisant à un rendu de page plus rapide.

Utilisons une analogie simple pour expliquer la programmation asynchrone

Imaginez que vous êtes dans un service de restauration rapide. Pendant que votre nourriture est en cours de préparation, le Drive-Thru continue de servir d’autres clients. Une fois que votre nourriture est prête, vous la ramassez et chosez. Tout se passe indépendamment et rapidement. En programmation, Async permet aux tâches de fonctionner en même temps, sans attendre que les autres se terminent. Chaque tâche est effectuée dès qu’elle est prête.

Revoyons le même exemple du cas par défaut pour mieux comprendre ce comportement par rapport au code:

<!----============Code============----> 
<p>content before script...</p> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap" async></script> 
<p>content after script...</p>

Comportement asynchrone

Décomposons ce qui se passe lorsque nous ajoutons l’attribut asynchrone à la balise dans l’exemple ci-dessus. Voici comment le navigateur gère cela dans le cas asynchrone:

• Le navigateur commence à analyser le HTML pour rendre le contenu.
• Quand le asynchrone l’attribut est ajouté à un élément , le navigateur télécharge le script dans parallèle avec le reste du contenu de la page.
• Une fois le Le script termine le téléchargementle navigateur l’exécute immédiatement, sans attendre Pour que la page entière terminer l’analyse.
• Cela signifie que le script peut s’exécuter à tout moment de la charge de page, sans bloquer l’analyse du HTML.
• Le attribut asynchrone est particulièrement utile pour les scripts qui sont indépendant D’autres scripts et contenu de page, car leur chargement n’interrompt pas l’expérience de l’utilisateur.

Remarque: Cependant, comme les scripts asynchrones ne bloquent pas l’analyse et peuvent être exécutés à tout moment, rien ne garantit qu’ils exécuteront dans l’ordre dans lequel ils apparaissent dans le HTML.

Différer la façon de charger un script

L’attribut de report offre une autre solution pour gérer le chargement des scripts plus efficacement. Lorsque nous utilisons l’attribut Defer dans une balise , il permet au navigateur de télécharger le script de manière asynchrone tout en analysant le document HTML. Cependant, contrairement à l’attribut asynchrone, l’exécution du script est retardée jusqu’à ce que l’ensemble du document HTML ait été entièrement analysé. Cela garantit que le script ne bloque pas le processus de rendu de la page, tout en exécutant dans l’ordre correct après le chargement du contenu HTML.

Utilisons une analogie simple pour expliquer la programmation asynchrone

Maintenant, imaginez un restaurant assis où les cours sont servis dans l’ordre: apéritif d’abord, puis principal plat et enfin dessert. Vous attendez le bon moment avant que chaque cours n’arrive. En programmation, reportez-vous les tâches de retard jusqu’à ce que le HTML soit complètement chargé, garantissant qu’ils s’exécutent dans le bon ordre sans bloquer le rendu de la page.

Revoyons le même exemple du cas par défaut pour mieux comprendre ce comportement par rapport au code:

<!----============Code============----> 
<p>content before script...</p> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap" defer></script> 
<p>content after script...</p>

Comportement de différence

Décomposons ce qui se passe lorsque nous ajoutons l’attribut de report à la balise dans l’exemple ci-dessus. Voici comment le navigateur gère cela dans le cas différé:

• Le navigateur commence à analyser le HTML pour rendre le contenu.
• Quand le reporter L’attribut est inclus dans une balise , le navigateur est invité à Téléchargez le script en arrière-plan Bien qu’il continue d’analyser le document HTML.
• L’exécution du script est reporté Jusqu’à ce que l’ensemble du document HTML soit entièrement analysés’assurer que le contenu de la page est affiché à l’utilisateur sans attendre le script à charger et à exécuter.

Remarque: L’attribut de différence conserve l’ordre de l’exécution du script en fonction de leur position dans le HTML, ce qui le rend idéal pour les scripts qui dépendent les uns des autres ou qui nécessitent que le Dom soit entièrement analysé avant l’exécution.

Quand utiliser l’async et quand utiliser un report?

Asynchrone:
Nous utiliserons la méthode d’attribut async lorsque nous voulons charger les scripts simultanément sans bloquer l’analyse et le rendu HTML.

Considérons certains scénarios où l’utilisation asynchrone est bénéfique:

• Suivi des scripts ou analytiques: Des scripts comme Google Analytics sont souvent chargés de manière asynchrone. Ces scripts n’interagissent pas avec le DOM et peuvent être retardés sans affecter l’expérience utilisateur, ce qui en fait des candidats idéaux pour le chargement asynchrone.
• Widgets tiers: Les boutons de médias sociaux ou les sections de commentaires des services tiers peuvent être chargés de manière asynchrone car ils ne dépendent pas du contenu de la page pour fonctionner.
• Modules indépendants: Par exemple, un widget météo ou un ticker d’information qui fonctionne indépendamment du reste de la page peut être chargé d’async, garantissant qu’il ne bloque pas le rendu d’autres éléments.

Reporter:
Nous utiliserons la méthode d’attribut de différence lorsque nous voulons permettre aux scripts de charger de manière asynchrone, mais garantit qu’ils ne sont exécutés qu’une fois l’analyse HTML terminée, les empêchant de bloquer le processus de rendu.

Considérons certains scénarios où l’utilisation reporter est bénéfique:

• Scripts qui manipulent le dom: Si un script modifie ou interagit avec les éléments DOM, il ne doit exécuter qu’une fois que l’ensemble du document HTML est entièrement analysé. L’utilisation de Defer garantit que le script s’exécute uniquement après que le DOM soit prêt.
• Bibliothèques ou frameworks: Pour les bibliothèques comme jQuery ou les cadres qui interagissent avec largement le dom, le report est un bon choix. Il garantit que la bibliothèque ou le cadre est chargé et disponible pour d’autres scripts en cas de besoin.
• Code d’initialisation du site Web: Les scripts d’initialisation qui configurent les écouteurs d’événements ou effectuent des manipulations DOM doivent s’exécuter après l’analyse de l’ensemble du document HTML, qui peut être réalisé en utilisant un repère.

Conclusion

Async et Defer permettent à l’analyse HTML de continuer sans attendre le téléchargement du script, améliorant la vitesse de chargement de la page. La différence clé est lorsque le script s’exécute. Avec Async, le script s’exécute dès qu’il est téléchargé, potentiellement avant que le HTML ne soit entièrement analysé. Ceci est idéal pour les scripts indépendants qui ne reposent pas sur le DOM. En revanche, Defer garantit que le script s’exécute uniquement après l’analyse du HTML, mais avant l’événement DomContent. Utilisez Async pour les scripts qui peuvent s’exécuter indépendamment et différer pour les scripts qui ont besoin du DOM ou qui nécessitent l’ordre d’exécution.

Vous avez trouvé cela utile? PARTAGEZ-LE