Tour complet de Head.js

Mathieu ROBIN

Je vous propose ici de faire un tour que j'espère le plus exhaustif possible de la librairie Head.js. Cette libairie à intégrer dans votre site permet d'optimiser la vitesse de chargement des pages de votre site. De plus, elle ajoute à vos pages des effets et des fonctionnalités qui peuvent se révéler très intéressantes.
Commentez

- Titre : Tour complet de Head.js

- Auteur : Mathieu ROBIN

- Parution : 26 mars 2011

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2011 Mathieu ROBIN. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Présentation

- II. Pré-requis

- III. Loader

- III-A. Décomposition

- IV. Autres fonctionnalités Javascript

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

- V. Fonctionnalités CSS

- V-A. Modernisateur CSS

- V-B. Détection de navigateur

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

- V-D. CSS Dynamiques

- VI. Fonctionnalités HTML 5

- VI-A. Activateur HTML 5

- VII. Pour terminer

- VIII. Remerciements

I - Présentation

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.com

II - Pré-requis

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.js

- Version loader seul minified (3.03 Ko) : head.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.

III - Loader

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

Pour rendre la chose plus sympathique et plus pratique, vous pouvez diviser les appels dans votre page et les répartir à votre guise. Vous pouvez même les mettre dans le désordre, ça ne dérange pas la librairie qui réorganise tout cela d'elle même.

IV - Autres fonctionnalités Javascript

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

Chaque page chargée avec Head.js a accès à un certain nombre de variables supplémentaires créées par la librairie (toutes des booléens) et ajoutées à l'objet head. Vous pouvez détecter l'existence d'une caractéristique via un tel code :

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

Voilà la liste non-exhaustive des caractéristiques par défaut :

Variable

Utilité

borderimage

True si votre navigateur autorise l'utilisation d'une image comme bordure (propriété CSS 3)

borderradius

True si votre navigateur supporte les coins arrondis (propriété CSS 3)

boxshadow

True si votre navigateur supporte les ombres (propriété CSS 3)

browser.ie

True si votre navigateur est Internet Explorer

browser.mozilla

True si votre navigateur est Firefox

browser.version

Donne le numéro de version de vôtre navigateur (n'est exceptionnelement pas un booléen)

browser.webkit

True si votre navigateur utilise Webkit

cssreflections

True si votre navigateur supporte la réflection d'un objet (propriété CSS 3)

csstransforms

True si votre navigateur supporte le changement d'échelle d'un objet (propriété CSS 3)

csstransitions

True si votre navigateur supporte les transitions animées (propriété CSS 3)

domloaded

True si le DOM est complètement chargé

fontface

True si votre navigateur supporte l'utilisation de polices personnalisées (propriété CSS 3)

multiplebgs

True si votre navigateur supporte l'utilisation de plusieurs images d'arrière plan (propriété CSS 3)

opacity

True si votre navigateur supporte l'usage de la transparence (propriété CSS 3)

rgba

True si votre navigateur supporte la possibilité de définir une opacité pour une couleur (propriété CSS 3)

textshadow

True si votre navigateur supporte la possibilité d'affecter une ombre à un texte (propriété CSS 3)

En plus de détecter si elles sont disponibles, vous pouvez bien entendu en ajouter. Celà se fait assez simplement :

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

V - Fonctionnalités CSS

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

V-A - Modernisateur CSS

Head.js ajoute des classes CSS en tête de votre document HTML pour permettre d'afficher une ombre aux éléments du DOM dans un navigateur qui ne supporte pas la propriété box-shadow. Voilà le code ajouté :

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

V-B - Détection de navigateur

Certains navigateurs n'implémentent pas correctement, voire même pas du tout, certains éléments graphiques. Head.js vous propose de définir des correctifs/remplacements/compléments de code CSS en fonction du navigateur. Voilà un exemple :

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

Ici, on impose aux éléments de classe "box" d'avoir un padding de 10px sur toutes les versions d'Internet Explorer inférieures à la version 9. On indique aussi aux listes sous IE 6 de ne pas afficher de puces en début de ligne.

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

Il est souvent difficile de prévoir des styles CSS suffisamment souples pour s'adapter élégamment à toutes les tailles d'écran. Head.js vous propose de mettre des classes CSS en fonction de la taille de l'écran. Voilà quelques exemples :

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

L'idée est simple, vous définissez plusieurs styles CSS pour un id ou une classe (ici, l'id "monLogo"). Puis vous ajoutez une classe lt-x, où x est la taille maximale pour appliquer les règles CSS définies dans le bloc concerné. Ici nous avons donc une règle pour les écrans de moins de 1024px et une pour ceux de moins de 640px (pratique pour les mobiles).

V-D - CSS Dynamiques

Head.js propose d'appliquer le concept d'"états" à vos applications web. En se basant sur la détection de caractéristiques, vous pouvez appliquez des CSS spéciales à chaque caractéristique. Vous pouvez avoir ce code CSS :

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

Dans le cas de base, si vous n'avez absolument rien mis comme code javascript, vous allez avoir votre #login-box grise affichée. Dans le cas où vous avez fait ça :

head.feature("logged", true);

Votre #login-box ne s'affichera pas/plus.

VI - Fonctionnalités HTML 5

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

J'espère que c'est le genre de fonctionnalités dont vous n'aurez jamais l'utilité, sinon ça veut dire que le message "Mettez à jour votre navigateur!" n'est toujours pas passé auprès de vos clients. Head.js offre la possibilité d'utiliser quelques balises de HTML 5 dans les navigateurs qui ne gèrent pas la dernière version de HTML. On retrouve notamment :

- article

- section

- header

- footer

VII - Pour terminer

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 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.

VIII - Remerciements

Je tiens à remercier 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 : Commentez