Publié le 14 janvier 2011 par eroan dans Développement | 7 commentaires »

Suite à cet article publié par la Ferme du web, je me suis intéressé à une nouvelle librairie javascript baptisée Head.js. Encore très jeune comparée aux ténors que sont Mootools, Prototype ou Jquery, cette dernière propose un angle d’attaque différent. Elle a en effet un objectif simple : remplacer tous les appels de fichiers javascripts du header par un seul et unique script très léger (2.3 ko gzippé).

Une fois appelé, ce dernier va charger dynamiquement vos fichiers javascript, en parallèle de la page, comme s’il s’agissait de simples images. Pour autant, et c’est là toute la force de head.js, vos scripts développés sur la base de Jquery resteront entièrement opérationnels. Dès que les fichiers seront chargés par le navigateur (depuis le serveur, un cdn ou le cache du navigateur), vos scripts deviendront opérationnels, qu’ils soient appelés depuis les fichiers ou la page en elle-même.

Si ce changement n’est pas considéré comme une évolution positive par les Yslow et autres Page Speed (plug-ins Firefox), les résultats sont bien là côté performances. Les pages s’affichent beaucoup plus rapidement, avec un gain de 100% à 400% selon les sites et le nombre de fichiers javascript appelés. J’ai déployé head.js sur Scooter System hier, et ai constaté un gain de plusieurs centaines de millisecondes sur les temps de chargement.

Au delà de cette fonctionnalité extrêmement prometteuse, la librairie Head.js permet d’autres acrobaties fort pratiques : prise en charge des balises html5 sur les anciens navigateurs, création de classes permettant de cibler les visiteurs en fonction de leur navigateur ou de la résolution de leur écran directement depuis un fichier css… bref, de quoi simplifier le développement d’un site tout en améliorant significativement l’expérience utilisateur.

Je vous propose ci-dessous un exemple d’appel à Head.js dérivé de mes « travaux » sur Scooter System. Pour une efficacité maximale, ce dernier est à placer dans le header de la page (bien qu’il puisse également être appelé à la fin) :

<script src="http://static.monsite.com/js/head.js"></script>
<script>
head.js("http://static.monsite.com/js/jquery.js","http://static.monsite.com/js/jquery_perso.js");
</script>


Il s’agit de l’appel le plus simple, qui permet de charger une série de scripts les uns à la suite des autres. En l’occurrence ici, Jquery suivi de divers plug-ins et de mes scripts maison (regroupés dans un unique fichier). Simple à mettre en oeuvre, Head.js devrait faire parler de lui dans les prochains mois. S’il est pour le moment toujours en cours de développement (version 0.8.0), il a déjà été adopté par de nombreux sites plus ou moins importants.

Vous pouvez suivre les avancées de Head.js sur Github.

---