JavaScript asynchrone : Exécution après chargement
Le code des scripts du service de statistiques Analytics de Google est asynchrone. Il ne ralentit pas les pages, car il est exécuté après leur affichage. Cela sans recourir à Ajax, avec juste du code JavaScript asynchrone qui fonctionne sur tous les navigateurs... Mais comment fonctionne-t-il?
HTML 5 a définit un attribut async qui fait que l'exécution des scripts est désolidarisée de l'affichage de la page.
<script async>
...
</script> Elle est prise en compte depuis Firefox 3.6 et par Webkit, donc Chrome et Safari.
Analytics utilise donc un procédé différent pour la compatibilité avec tous les navigateur.
JavaScript asynchrone pour tout navigateur
Description de son fonctionnement dans une démonstration...
Le code coté client, dans la page web
Le code HTML est juste un calque dans lequel seront insérées les données à afficher.
<div id="storage"></div>
Le code JavaScript est constitué de deux parties...
<script type="text/javascript">
var demo = demo || [];
demo.push(['myfunc'], ['12345']);
demo.push(['func2'], ['hello']);
(function()
{
var myscript = document.createElement('script');
myscript.src = 'async.js';
myscript.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(myscript);
})();
</script>La première partie est un tableau qui contient les commandes et les paramètres. Ce tableau est un objet propre à votre page et qui contient les paramètres le concernant.
La deuxième partie est un script qui génère dynamiquement un autre script, qui charge le script distant (sur votre site, ou s'il s'agit d'Analytics, sur le site de Google).
Le script ainsi généré est lui ajouté dynamiquement au contenu de la page et donc exécuté après l'affichage de celle-ci.
L'URL async.js est pour la démonstration, elle peut être remplacée par l'URL d'un script sur le même site ou un autre site.
Le code distant, sur le site web ou un autre site
Le code de Google n'est pas public. J'ai donc du imaginer mon propre code il exécute les commandes placées dans le tableau et celles-ci affichent des paramètres qui y sont placés...
var storage = document.getElementById("storage");
storage.innerHTML = "The remote script...<br><br>";
demo.myfunc = function(x)
{
storage.innerHTML += "Account : " + x + "<br>";
}
demo.func2 = function(y)
{
storage.innerHTML += "Message : " + y + "<br>";
}
storage.innerHTML += demo.length + " items in demo array<br>";
demo.myfunc(demo[1]);
demo.func2(demo[3]);Le script sur le serveur (sur le site de Google lorsqu'il s'agit d'Analytics), associe des méthodes à l'objet demo pour créer les actions requises.
Ce code est dans le fichier async.js tandis que le code de la page est dans le source de la démonstration...
Démonstration
La démonstration affiche les données passées par le script coté client au script distant, en l'occurence un pseudo-numéro de compte et le message "hello".
Pour les besoins de la démonstration, le script distant est sur le même site.
Pour Analytics, voir le tutoriel sur le site de Google: Asynchronous Tracking Usage Guide.
Voir aussi: JavaScript asynchrone vs. Ajax.
Archive du forum: Utilisation du script JavaScript asynchrone.