Pourquoi utiliser un marqueur asynchrone ?

Lorsqu’on tague une page web, il est possible d’utiliser un marqueur synchrone ou asynchrone. L’avantage du marqueur asynchrone est de permettre au navigateur de traiter le code correspondant en parallèle du reste du code de la page.

Alors qu’avec le marqueur synchrone, le navigateur traite le code correspondant et attend un résultat avant de s’occuper du reste du code, avec le marqueur asynchrone, le navigateur traite le code correspondant puis créé un callback pour récupérer la réponse plus tard, ce qui lui permet de commencer à traiter le reste du code de la page.

Le chargement de la page est alors plus rapide puisque le navigateur execute 2 tâches en même temps, en parallèle (dans les faits ces 2 tâches ne sont pas éxécutées en simultané, mais la deuxième tâche est traitée en attendant une réponse pour la première tâche, d’où le gain de temps).

En plus d’optimiser le temps de chargement de la page, l’avantage du code asynchrone est de ne pas bloquer l’éxécution du reste de la page si une erreur survient lors du traitement.

Nous allons voir comment sont structurés les codes synchrone et asynchrone. Pour cela, nous prendrons comme exemple le marqueur de Google Analytics.

Le marqueur de Google analytics peut être utilisé de manière synchrone avec le code ci-dessous :

<script type="text/javascript">
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();
</script>

<script type="text/javascript" src="http:www.google-analytics.com/ga.js">
</script>

Dans ce code, la première partie consiste à créer les variables qui vont contenir les données à envoyer. Et la deuxième partie consiste à appeler le fichier de Google Analytics qui compilera les données pour générer le hit.

Avec le marqueur asynchrone ci-dessous, on retrouve ces deux parties. La différence consiste à déclarer que le code doit être utilisé de manière asynchrone et l’emplacement du code correspondant à l’appel du fichier de Google Analytics est renseigné de manière dynamique.

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); 
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ?
 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(ga, s);
  })();

</script>

Avec ga=document.createElement(« script), on déclare l’ajout dans le code de l’appel du fichier de Google Analytics (ga.js). On précise le type de code (« type »), ainsi que l’adresse du fichier (« src »). L’emplacement de ce code à ajouter est précisé à l’aide de la variable « s » (noeud DOM). Et on précise qu’il s’agit d’un appel asynchrone avec « ga.async=true »

Le navigateur, en lisant le code, créé les variables pour les données à envoyer. Puis il rajoute le code pour l’appel du fichier de Google Analytics dans le code de la page. Il éxécute ensuite l’appel au fichier en mode asynchrone : il envoie la requête, mais n’attend pas de réponse et continue à lire et exécuter le reste du code de la page en attendant la réponse. Lorsque la réponse est recue (réception du fichier de Google Analytics), il la traite alors (éxécution du code du fichier).

Pour plus d’infos :

Explications sur le marqueur de Google Analytics

 

Web analytics Article écrit par

Vous avez une remarque ? une idée ? Laissez un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s