Insertion dynamique d'un fichier script

PapyJP

9 May 2017 à 10:52

Bonjour à tous

J'utilise assez fréquemment l'insertion dynamique d'un fichier script dans la balise <head> d'une page, ce qui permet d'avoir un ensemble de scripts adaptés à une page particulière sans que l'auteur ait à s'en préoccuper: les scripts à insérer sont calculés en fonction du contexte.
Le code que j'utilise est quelque chose comme


(function(){
    var newScript = document.createElement('srcipt');
    newScript.src = "...";
    document.head.appendChild(newScript);
})();

ce qui insère le nouveau script juste APRÈS le fichier script qui contient cette fonction qui se déroule immédiatement au chargement de celui-ci.

En regardant en détail comment Google Analytics effectue cette même action, je constate que le code


function (i, s, o, g, r, a, m) { i[ 'GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
		(i[r].q = i[r].q ||[]).push(arguments)
	},
	i[r].l = 1 * new Date();
	a = s.createElement(o),
	m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-63328855-1', 'auto');
ga('send', 'pageview');

insère le script "//www.google-analytics.com/analytics.js" AVANT le premier fichier script de la balise <head>, soit avant le script "isogram" lui même.

Je me pose quelques questions sur la raison de cette insertion, sur la façon dont les navigateurs la traitent, sur l'intérêt que je pourrais avoir à effectuer une insertion "avant" plutôt qu'après le fichier en cours...
Pourriez vous éclairer ma lanterne?
Merci de votre aide.

JavaScript, DOM et API Web HTML5

Insertion dynamique d'un fichier script