The Tech Guy FR

jQuery est aujourd’hui un incontournable et semble avoir pris le dessus sur Prototype, Dojo, etc.  et ne cesse de s’améliorer, notamment grâce à Sizzle, le nouveau moteur de sélecteur CSS. Cependant comme toute librairie son efficacité dépend en premier lieu de la manière dont on l’utilise.

Voici donc un petit panaché d’astuces d’optimisation de jQuery, un peuplus poussées que de combiner et minifier les sources.

Payez-vous le meilleur des CDN !

Grâce à Google AJAX API, vous allez pouvoir utiliser le plus puissant, le plus rapide et le plus stable des CDN, j’ai nommé Google !

Les avantages sont énormes :

• Vous réduisez le délai de connexion et de téléchargement de vous utilisateurs : Google a forcément des serveurs près de chez eux, voir dans leur garage ;
• Vous réduisez la charge de votre serveur : Une requête en moins sur votre serveur, c’est plein de ressources laissées libres ;
• Vous réduisez le temps de chargement : Vous êtes probablement pas le premier site consulté utilisant Google AJAX API, jQuery est probablement déjà dans le cache de votre utilisateur ;
• Vous réduisez vos frais de bande passante : jQuery, c’est quand même 94Ko de code javascript. Sur un million de visiteurs, c’est presque 100Go économisé.

L’intégration est super simple, après avoir inclut le fichier source :

Il ne reste plus qu’a loader jQuery (avec la version voulue, c’est mieux) :

google.load('jquery', '1.2.6');

Utiliser des ID le plus souvent possible

Spécifier ses éléments dans le sélecteur en précisant leur ID est beaucoup plus rapide. L’explication est logique :

• Quand il peut, jQuery se base sur getElementById(), qui (théoriquement) est optimisé ;
• En cas de parcours du DOM, il s’arrête, quoi qu’il arrive sur le premier élément trouvé, ID devant être unique.

Un petit test sous firebug sur la home page du blog nous en dit long :

console.time('Selector on id');
for (var i = 0; i < 10000; i++) {
	jQuery('#imonline');
}
console.timeEnd('Selector on id');

	 // Selector on id: 236ms

console.time('Selector on class');
for (var i = 0; i < 10000; i++) {
	jQuery('div.sidebarboxbottom');
}
console.timeEnd('Selector on class');
	// Selector on class: 5266ms

Contextualiser les sélecteurs

Par défaut, lorsque l'on définit un sélecteur, typiquement $('div.cssClass'), jQuery va traverser TOUT le DOM à la recherche des éléments respectant ce sélecteur. Or, il arrive souvent que notre recherche ne soit pertinente qu'à un certain niveau du DOM, par exemple, à l'intérieur d'un <div> et l'on a souvent l'habitude (parce que la lisibilité est accrue et que c'est plus rapide à taper) de garder le parcours entier du DOM avec l'écritude $('div.cssClass').

Cependant, grâce au concept d'enchaînement de jQuery, on peut contextualiser un sélecteur dans un ou plusieurs éléments donnés. Cela permet non seulement d'éviter des erreurs lorsque la conception d'un page change et surtout d'optimiser le code, jQuery ayant moins d'éléments à traverser.

Exemple :

/**
 * Ne recherche des input que dans des forms (évidemment)
 */
$('form').find('input');
/**
 * Écriture alternative, recherche les li qu'a l'intérieur d'un ul nommé
 */
$('ul#myList', $('li'));

Réduire au maximum les opérations de sélécteur (surtout celles qui sont inutiles)

Le résultat d'un selecteur n'est pas forcément un donnée volatile à chainer, type $('div#errorBox').hide().remove(); Cette écriture est certes très pratique mais nous perdons le résultat de $('div#errorBox'). Cette erreur de conception typique vient du nommage de la fonction $ qui, certes, rend le code beaucoup plus lisible, mais induit le codeur en erreur ; lui faisant penser que $('div#errorBox') est une variable et non un appel de fonction.

Un développeur doit toujours se demander lors de l'utilisation du sélecteur $ si ce resultat va être utilisé à nouveau après cette ligne ou pas.

Exemple :

/**
 * jQuery va retraverser le DOM 100 fois à la recherche de ul#list
 */
for (var i = 0; i < 100; i++) {
	$('ul#list').append('
Numéro ' + i + '

');
}
/**
 * jQuery va retraverser le DOM une seule fois à la recherche de ul#list
 */
var	list = $('ul#list');
for (var i = 0; i < 100; i++) {
	list.append('
Numéro ' + i + '

');
}

Inutile de dire que dans ce cas, le gain de ressource est énorme !