Voici une liste d’astuce / bonnes pratiques concernant JQuery :

Utiliser la dernière version de JQuery

JQuery est en développement permanent et de nouvelles versions sortent régulièrement, plus rapide et plus puissante. N’oubliez pas de mettre à jour votre version de JQuery afin de profitez de nouvelles fonctionnalités et de gain de performance.

id > tags > class

Il faut savoir que la sélection via le sélecteur de Jquery (Sizzle) sera plus rapide si vous utiliser un id par rapport à un tag (p, div, table, …). De la même manière, il est préférable d’utiliser un tag qu’une classe.

Utiliser un contexte

Afin d’éviter de parcourir tout le document, on peut utiliser la notion de contexte qui va définir le scope de recherche. Pour cela, il vaut mieux utiliser find au lieu de spécifier le contexte au sélecteur. En effet, dans la cas où on passe le contexte au sélecteur, c’est la méthode find qui sera appelée.

//On passe le contexte au sélecteur
$('li', '#monContext')
//idem mais avec find
$('#monContext').find('li')

Mettre en cache / Chaîner vos appels

La sélection des éléments est coûteux en terme de temps. Il faut mieux ainsi mettre en cache les élements sélectionné afin de gagner en performance. Un des principes de base de JQuery est que la majorité des fonctions et plugins renvoie la liste des éléments à traiter. Ainsi, on peut chaîner les appels de fonctions.

//Peu performant
$('#item').show();
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');

// On chaîne les appels
$('#item').show().html('hello').css('background-color', '#ffffff');

// ou on met en cache l'élément
var item = $('#item');
item.show();
item.html('hello');
item.css('background-color', '#ffffff');

Dans le même esprit, pensez à naviguez dans le DOM de l’élément sélectionné au lieu de faire plusieurs sélection. Pour cela, JQuery propose les méthodes Traversing comme :

• siblings : permet de récupérer les éléments frère (de même niveau)
• childrens : permet de sélectionner les enfants
• next : permet de sélectionner l’élément frère suivant
• prev : permet de sélectionner l’élément frère précèdent
• nextAll et prevAll : permet de sélectionner respectivemnt tous les élément frères suivant et précèdent
• first et last: permet de sélection du premier et du dernier élément sélectionné
• …

Cerise sur le gâteau, ces méthodes accepte un sélecteur afin de filtrer les données !!!

//On récupère le permier élément p de l'élément #content
$('#content').first('p')

Les méthodes end et addSelf sont particulièrement utiles. End permet de remonter aux éléments précédemment sélectionnés et addSelf permet de rajouter l’élément père.

// On veut modifier le 1er et le dernier élément
$('ul').first().css('color', '#F00').end().last().css('color', '#F00')

// On veut sélectionner les 2 derniers éléments d'une liste
// On sélectionne le dernier, on récupère le précèdent et on s'ajoute soit même
$('li:last').prev().addSelf();

Limiter la manipulation du DOM

Afin d’avoir un script rapide, il faut limiter la manipulation du DOM au maximum (comme prepend(), append(), after()).

Eviter :

var myList = $('#myList');

for (i=0; i<1000; i++){
myList.append('This is list item ' + i);
}

Utiliser plutôt

var myList = $('.myList');
var myListItems = '';

for (i = 0; i < 1000; i++) {
    myListItems += '<li>This is list item ' + i + '</li>';
}
myList.html(myListItems);

Une autre astuce consiste à encapsuler dans un élément unique les éléments à insérer dans le DOM.

var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i &lt; 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>'; }
myListItems += '</ul>';
myList.html(myListItems);

Documentation de Jquery dans Visual Studio

Il suffit de rajouter jquery vs-doc disponible sur le CDN de Microsoft pour avoir la documentation de JQuery intégrée dans visual studio.

Veuillez à ne l’utiliser qu’en développement, le fichier pesant près de 216Ko contre 31Ko pour la version minifiée.

Liens

Voici les liens (en anglais) qui m’ont permis de faire l’article :

• http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/
• http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
• http://dumitruglavan.com/jquery-performance-tips-cheat-sheet/

En JavaScript, la récupération d’un élément passe souvent par les méthodes getElementById, getElementByTagsName ou getElementsByClassName.

Les derniers navigateurs prennent en charge une nouvelle méthode plus puissante querySelectorAll (compatibilité de la méthode) qui permet de récupérer des éléments en fonction d’un sélecteur CSS3, un peu à la manière de Sizzle, la librairie de sélection utilisée par JQuery.

Utilisation de querySelectorAll

Cette méthode est beaucoup plus intéressante car elle permet de filtrer plus facilement les éléments sur lesquelles on souhaite interagir.

La méthode querySelectorAll prend en paramètre un chaine de caractère qui représente une expression CSS et renvoie une NodeList. Afin de parcourir les éléments renvoyés, vous pouvez le parcourir avec une boucle for (document.querySelectorAll(‘#maDiv)[0]) ou en transformant le résultant en tableau.

Voici un exemple permettant d’alterner les couleurs des lignes d’un tableau avec une transformation en tableau.

Array.prototype.slice.call(document.querySelectorAll('#maincontent table tr'))
.filter(function(element, index, array){
  return index % 2 === 0;
})
.forEach(function(element, index, array){
  element.style.backgroundColor = 'Grey'
});

J’ai utilisé la fonction filter afin de ne sélectionner que les éléments paires, chose que j’aurais pu directement pu faire via le selecteur CSS tr:nth-child(odd).

A noter également que, comme dans la syntaxe CSS, on peut sélectionner plusieurs éléments en les séparant via une virgule :

document.querySelectorAll('#maDiv, .maClasse')

La méthode querySelector fonctionne de la même façon mais ne revoie que le premier élément vérifiant la ou les règles.

Avantage de Sizzle / JQuery

Sizzle est un projet mené par John Resig, qui n’est autre que le père de JQuery. Ce projet est un sélecteur CSS en Javascript. Ce projet est autonome et sans dépendance.

Quel est l’intérêt d’utiliser Sizzle me direz-vous. L’intérêt est multiple.

• compatibilité avec les vieux navigateurs
• Ajout de filtre de sélection :
• contient (texte) :contains
• contient (element) :has
• position :first, :last, :even, :odd, :gt, :lt, :eq
• négation :not
• élément de formulaire :input, :text, :checkbox, :file, :password, :submit, :image, :reset, :button
• Extensible

Avec JQuery, vous possédez en plus de fonction de manipulation de ces éléments rapide et puissante.

Ainsi, le code ci-dessus peut s’écrire avec JQuery :

$('table tr:odd').css('backgroundColor', 'Grey');

Simple non ?

Conclusion

La méthode querySelectorAll est maintenant bien supportée dans les navigateurs les plus récents et je ne peux que vous conseiller son utilisation si vous ne voulez pas utiliser des librairies additionnelles comme Sizzle/JQuery, qui apporte un support des anciens navigateurs et de plus grandes fonctionnalités. Pour les autres, JQuery c’est bon, mangez-en 😉