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 reconnue par tous les navigateurs (Firefox depuis 3.6).
Analytics utilise donc un procédé différent pour la compatibilité avec les anciens navigateurs.
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...
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 la concernant.
La deuxième partie est une fonction qui génère dynamiquement un autre script, lequel charge charge le script distant coté serveur, votre site.
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.
<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>L'URL async.js est pour la démonstration, elle peut être remplacée par l'URL d'un script quelconque sur le même site, ou sur 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 qui 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>";
demo.myfunc = function(x){
storage.innerHTML += "Account : " + x + "<br>";
}
demo.func2 = function(y){
storage.innerHTML += "Message : " + y + "<br>";
}
storage.innerHTML += "array length " + demo.length + "<br>";
demo.myfunc(demo[1]);
demo.func2(demo[3]);Le script sur le serveur 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.
Archive du forum: Utilisation du script JavaScript asynchrone.
Compatibilité
| Async function | ECMAScript | Chrome | Firefox | Edge | Opera | Safari |
| Version | 55 | 52 | 15 | 42 | 10.1 | |
| Année | 2017 | 2016 | 2017 | 2017 | 2016 | 2017 |