Toujours faire une recherche à partir d’un ID
Le sélecteur le plus rapide de jQuery est le sélecteur d’ID ($(‘#mon-id’)) car elle est directement mappée sur une méthode Javascript native : getElementById().Sélection d’un élément unique
<div id="content"> <form method="post" action="/"> <h2>Traffic Light</h2> <ul id="traffic_light"> <li><input type="radio" name="light" value="red" />Red</li> <li><input type="radio" name="light" value="yellow" />Yellow</li> <li><input type="radio" name="light" value="green" />Green</li> </ul> <input class="button" id="traffic_button" type="submit" value="Go" /> </form> </div>
var traffic_button = $(‘#traffic_button’);
Que celle-ci :
var traffic_button = $(‘#content .button’);
Sélection d’éléments multiples
La sélection d’éléments multiples parcours le DOM de manière transversale, cela peut être très long et très couteux en ressources.Pour minimiser les pertes de performances, toujours effectuer une recherche à partir de l’ID du parent le plus proche :
var traffic_lights = $(‘#traffic_light input’);
Utiliser des balises avant les classes
Le second sélecteur le plus rapide de jQuery est le sélecteur de balises ($(‘head’)). Toujours parce qu’il s’agit d’un mappage vers une méthode native de JavaScript, getElementsByTagName().<pre lang="html4strict" escaped="true"><div id="content"> <form method="post" action="/"> <h2>Traffic Light</h2> <ul id="traffic_light"> <li><input type="radio" name="light" value="red" />Red</li> <li><input type="radio" name="light" value="yellow" />Yellow</li> <li><input type="radio" name="light" value="green" />Green</li> </ul> <input id="traffic_button" type="submit" value="Go" /> </form> </div>
var active_light = $('#traffic_light input.on');
Note : Le sélecteur de classe est l'un des plus lents dans jQuery, sous Internet Explorer il boucle sur le DOM complet. Evitez de l'utiliser chaque fois que c'est possible.
Il ne faut jamais préfixer un ID par une balise. Cela ralenti le processus de recherche car jQuery va boucler sur tous les div à la recherche de l'ID 'content' :
var content = $('div#content');
De la même manière il est inutile est redondant de faire une recherche à partir de
plusieurs ID :
var traffic_light = $('#content #traffic_light');
Cacher les objets jQuery
Prenez l'habitude de sauver vos objets jQuery dans des variables (comme dans les exemples précédents).Par exemple, il ne faut jamais faire cela :
$('#traffic_light input.on').bind('click', function(){...}); $('#traffic_light input.on').css('border', '3px dashed yellow'); $('#traffic_light input.on').css('background-color', 'orange'); $('#traffic_light input.on').fadeIn('slow');
var $active_light = $('#traffic_light input.on'); $active_light.bind('click', function(){...}); $active_light.css('border', '3px dashed yellow'); $active_light.css('background-color', 'orange'); $active_light.fadeIn('slow');
Souvenez-vous : ne faite jamais deux fois la même sélection !!
Garder le résultat d'une sélection pour plus tard
Si vous prévoyez d'utiliser le résultat d'une sélection dans une autre partie de votre programme ou devez utiliser la même fonction plusieurs fois, cacher ce résultat dans une variable globale.En définissant un conteneur global de résultats jQuery nous pouvons les utiliser depuis l'intérieur d'autres fonctions :
// Définissez un objet global (c.à.d. l'objet window) window.$my = { // Initialisez toutes les requêtes qui vont vous servir plus d'une fois. head : $('head'), traffic_light : $('#traffic_light'), traffic_button : $('#traffic_button') }; function do_something() { // maintenant vous pouvez utiliser les résultats stockés et les manipuler. var script = document.createElement('script'); $my.head.append(script); // Quand vous travaillez dans les fonctions, continuez de sauvegarder // vos résultats de requête jQuery dans votre conteneur global. $my.cool_results = $('#some_ul li'); $my.other_results = $('#some_table td'); // Utilisez votre conteneur global comme un résultat de requête classique : $my.other_results.css('border-color', 'red'); $my.traffic_light.css('border-color', 'green'); }
(Dé)chaînez la fureur
L'exemple du précédent peut également être accompli de la façon suivante :var $active_light = $('#traffic_light input.on'); $active_light.bind('click', function(){...}) .css('border', '3px dashed yellow') .css('background-color', 'orange') .fadeIn('slow');
Utilisez des sous-requêtes
Par exemple, nous pouvons utiliser des sous-requêtes pour récupérer et cacher les champs actifs et inactifs de notre exemple :<div id="content"> <form method="post" action="/"> <h2>Traffic Light</h2> <ul id="traffic_light"> <li><input type="radio" name="light" value="red" />Red</li> <li><input type="radio" name="light" value="yellow" />Yellow</li> <li><input type="radio" name="light" value="green" />Green</li> </ul> <input id="traffic_button" type="submit" value="Go" /> </form> </div>
var $traffic_light = $('#traffic_light'), $active_light = $traffic_light.find('input.on'), $inactive_lights = $traffic_light.find('input.off');
Limiter les manipulations directes du DOM
L'idée de base ici est de créer exactement ce dont vous avez besoin en mémoire, et ensuite mettre à jour le DOM. Il ne s'agit pas que d'un conseil pour jQuery mais pour Javascript en général.Par exemple, si vous avez besoins de créer dynamiquement une liste d'éléments,
ne faite pas ça :
var top_100_list = [...], // On suppose qu'il y a 100 strings différents $mylist = $('#mylist'); // jQuery sélectionne notre <ul> for (var i=0, l=top_100_list.length; i<l; i++) { $mylist.append('<li>' + top_100_list[i] + '</li>'); }
var top_100_list = [...], // On suppose qu'il y a 100 strings différents $mylist = $('#mylist'), // jQuery sélectionne notre <ul> top_100_li = ""; // C'est ici qu'on va stocker notre liste for (var i=0, l=top_100_list.length; i<l; i++) { top_100_li += '<li>' + top_100_list[i] + '</li>'; } $mylist.html(top_100_li);
var top_100_list = [...], // On suppose qu'il y a 100 strings différents $mylist = $('#mylist'), // jQuery sélectionne notre <ul> top_100_ul = '<ul id="#mylist">'; // On stock toute notre liste for (var i=0, l=top_100_list.length; i<l; i++) { top_100_ul += '<li>' + top_100_list[i] + '</li>'; } top_100_ul += '</ul>'; // On ferme notre liste $mylist.replaceWith(top_100_ul);
Exploiter la délégation d'événement
En Javascript, chaque événement est remonté aux éléments parents le long de l'arborescence du DOM.C'est extrêmement pratique quand nous voulons que plusieurs éléments fils (nodes) appellent une même fonction.
Plutôt que d'associer une fonction de listener d'événements à plusieurs nodes (très peu efficace) vous pouvez l'associer une fois pour toute à leur parent, en le laissant se débrouiller avec l'élément fils qui a déclenché l'événement.
Par exemple, nous développons un gros formulaire avec beaucoup de champs, et nous voulons changer la classe d'un champ lorsque ce dernier est sélectionné.
Une association telle que celle-ci n'est pas du tout optimisée :
$('#entryform input).bind('focus', function(){ $(this).addClass('selected'); }).bind('blur', function(){ $(this).removeClass('selected'); });
$('#entryform).bind('focus', function(e){ var cell = $(e.target); // e.target récupère l'élément qui a cell.addClass('selected'); // déclenché l'événement. }).bind('blur', function(e){ var cell = $(e.target); cell.removeClass('selected'); });
Eliminez les requêtes superflues
Même si jQuery échoue proprement quand il ne trouve pas d'élément, cela ne veux pas dire qu'il ne perd pas de temps à les chercher !Si vous avez un fichier Javascript global pour votre site, il est tentant d'exécuter toutes vos recherches dans
$(document).ready(function(){ // tout mon joli code })
La façon la plus efficace de faire cela est d'utiliser des fonctions d'initialisation légère pour que votre template ait le contrôle complet sur où etquand est exécuter votre Javascript.
Par exemple, vous pouvez inclure le code suivant avant la fermeture de la balise body :
<script type="text/javascript> mylib.article.init(); </script> </body>
<ul id="traffic_light"> <li><input type="radio" name="light" value="red" /> Red</li> <li><input type="radio" name="light" value="yellow" /> Yellow</li> <li><input type="radio" name="light" value="green" /> Green</li> </ul> <script type="text/javascript> mylib.traffic_light.init(); </script>
var mylib = { article_page : { init : function() { // Mes fonctions jQuery spécifiques à la page d'article. } }, traffic_light : { init : function() { // Mes fonctions jQuery spécifiques à la page trafic. } } }
Déléguez à $(window).load
Il y a une tentation parmi tous les développeurs jQuery à associer toutes leurs fonctions à l'événement $(document).ready.Après tout, il est utilisé dans la plupart des exemples que vous trouverez sur le web, pourquoi changer ?
$(document).ready se déclenche pendant le rendering de la page par le navigateur, c'est-à-dire au même moment où des éléments sont encore téléchargé par ce dernier.
Si vous remarqué un ralentissement du navigateur durant le chargement de la page, toutes ces fonctions $(document).ready en sont peut-être la raison.
Vous pouvez réduire l'utilisation CPU en affectant toutes vos fonctions jQuery à l'événement $(window).load qui est déclenché après que tous les objets appelés par le HTML soit téléchargés. (Y compris le contenu des iframes).
$(window).load(function(){ // Fonctions jQuery a initialiser après que la page ait été chargée. });
RSS Feed (xml)
