Tour complet de Head.js

Head.js se présente comme un petit script qui permettrait de charger tous les autres fichiers de script de votre site comme si il s'agissait d'images et donc de ne pas bloquer le chargement de la page. De plus, il permet d'optimiser le temps de chargement de vos pages. Cependant, il ne fait pas que cela et j'aborderai ses différentes fonctionnalités au cours de ce tutoriel. Pour plus d'informations, n'hésitez pas à consulter le site officiel : headjs.comhttp://headjs.com/

Vous devez avoir chargé la librairie (ou l'utiliser via le hot-linking), elle existe en deux versions :

• Version complète minified (6.32 Ko) : head.min.jshead.min.js
• Version loader seul minified (3.03 Ko) : head.load.min.jshead.load.min.js

Je vous conseille de bien définir votre besoin, si vous comptez ne vous servir que du Loader, ne prenez pas la version complète. Je sais qu'une différence de 3Ko ne changera pas grand chose, mais si on veut vraiment optimiser son site, il faut commencer par optimiser l'usage de l'optimiseur.

C'est la fonction principale de Head.js, son fond de commerce, on commence donc logiquement par elle. L'idée de ce composant est de charger tous les fichiers de script comme s'il s'agissait d'images afin de permettre la parallélisation des téléchargements et éviter ainsi le blocage de vos pages. Vous n'incluez donc plus basiquement vos scripts, vous n'importez que Head.js puis lui indiquez ce qu'il faut charger. Voilà comment faire avec un exemple simple :

<script src="https://github.com/headjs/headjs/raw/v0.9/dist/head.min.js" type="text/javascript"></script> 
<script type="text/javascript">
head.js(
	"https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js",
	"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js",
	function() {
		$(document).ready(function(){
			alert('Hello world!');
		});
	}
);
</script>

Dans cet exemple, je charge (via hotlinking) la librairie complète, puis charge jQuery et jQuery UI sur le CDN de Google. Au passage, je demande à jQuery de m'afficher une alerte sur l'événement DOM.ready pour me dire qu'il est bien chargé.

Avoir un optimiseur de chargements, c'est bien, mais cela ne dispense pas de suivre les conseils classiques d'optimisation des pages. Pas besoin d'y aller comme des boeufs, vous perdriez tout l'intérêt d'un optimiseur.

III-A. Décomposition▲

Cette section est appelée à être modifiée au fur et à mesure du temps et des évolutions de la librairie.

IV-A. Détection/Ajout de caractéristiques▲

if (head.logged) {
   if (head.browser.webkit) {
	   alert('Navigateur utilisant webkit')
	}
	else {
	   alert('Navigateur n\'utilisant pas webkit')
	}
}

head.feature("nouvelleCaracteristique", function() {
	return true; // ou false, selon votre besoin/code/jugement arbitraire
});

Cette section est appelée à être modifiée au fur et à mesure du temps et des évolutions de la librairie.

V-A. Modernisateur CSS▲

.no-boxshadow .box {
   border: 2px solid #ddd;
}

V-B. Détection de navigateur▲

.lt-ie9 .box { padding: 10px; }
.ie6 ul  { list-style: none; }

V-C. Détection de la taille du navigateur▲

.lt-1024 #monLogo { background-image:(medium.jpg); }
.lt-640 #monLogo { background-image:(small.jpg); }

V-D. CSS Dynamiques▲

#login-box { background-color : grey; }
.logged #login-box { display: none; }

head.feature("logged", true);

Cette section est appelée à être modifiée au fur et à mesure du temps et des évolutions de la librairie.

VI-A. Activateur HTML 5▲

Malgré de nombreux tests, je reste assez sceptique sur la réelle efficacité de cette librairie. En tout cas, pas dans sa version complète. J'ai publié les résultats de mes tests sur mon blog, ici : HeadJS - Tests de performancesHeadJS - Tests de performances. Je ne dis pas que vous ne devez pas l'utiliser, dans certains cas (IE et Firefox), le script a une utilité. A vous de voir selon les besoins du client si l'utilisation de Head.js a un intérêt ou si celui-ci ne sera qu'une charge de plus. Certains vont se demander pourquoi je vous présente cette librairie bien que je vous annonce mon scepticisme sur sa réelle efficacité. Il y a une raison simple à cela, pour certains navigateurs, elle s'est révélée utile et les fonctionnalités fournies autour sont plutôt intéressantes. J'aime beaucoup l'idée qu'elle véhicule et j'espère un jour pouvoir éditer cette publication pour en retirer toute critique négative.

Je tiens à remercier ram-0000Profil public de ram-0000 pour la relecture attentive de cette publication.

Votre avis et vos suggestions sur cet article m'intéressent ! Alors, après votre lecture, n'hésitez pas : 5 commentaires