Optimiser rapidement son jQuery 1.x

02/03/2015

Quand vous avez peu de temps pour diminuer le temps d’exécution d’un gros bloc de jQuery, le plus rapide est d’optimiser le code pour respecter les bonnes pratiques.

Les optimisations suivantes sont valides pour jQuery 1.x vu que la page était initialement avec cette version.

[][1]

Selecteur

Facilitez le parcours du DOM, identifier la zone où chercher puis les éléments à trouver.

// mal
$(".allp");
// bien
$("#container p.allp");
//mieux (les deux notations sont équivalentes)
$("#container").find("p.allp");
$("p.allp", "#container");

// non optimisé
$( "div#container .allp" );
// optimisé
$( "#container p.allp" );

Chaining

Enchainez les actions sur le même selecteur quand c’est possible.

// mal
$("#object").addClass("myClass");
$("#object").css("color","#f00");
$("#object").height(806);

// bien
$("#object").addClass("myClass").css("color", "#f00").height(806);

Caching

Stockez vos éléments dans une variable avant de faire vos opérations dessus.

// bien
var myElements = $("#container").find("li");
$("#hideElements").click(function() {
   myElements.fadeOut();
});
$("#showElements").click(function() {
   myElements.fadeIn();
});

Event delegation

Attachez la gestion d’événement sur le container et ciblez les éléments déclencheurs.

// mal
$('#container').find('td.trigger').click(function() {
   $(this).toggleClass('bang');
});

// bien
$('#container').on('click','td.trigger',function() {
   $(this).toggleClass('bang');
});

http://learn.jquery.com/events/event-delegation/

Manipulation du DOM

Assemblez dans une boucle mais ajoutez hors de celle-ci

// mal
$.each(array, function(count, item) {
   var newElement = buildNewElement(item);
   $('#Elements').append(newElement);
});

// bien
var tmp = '';
$.each(array, function(count, item) {
   tmp += buildNewElement(item);
});
$('#Elements').append(tmp);</pre>

# Boucle {#boucle}

  1. Préférez le for au each

  2. Mettez en cache la taille de la collection

<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#75715e">// mal
</span><span style="color:#75715e"></span><span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">each</span> (<span style="color:#a6e22e">array</span>, <span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">i</span>) {
   <span style="color:#a6e22e">doSomething</span>(<span style="color:#a6e22e">i</span>);
});

<span style="color:#75715e">// bien
</span><span style="color:#75715e"></span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">arrLength</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">array</span>.<span style="color:#a6e22e">length</span>;
<span style="color:#66d9ef">for</span> ( <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">arrLength</span> ; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span> ) {
   <span style="color:#a6e22e">doSomething</span>(<span style="color:#a6e22e">i</span>);
}
</code></pre></div>

# Manipulation de CSS {#manipulation-de-css}

Utilisez AddClass plutôt que css() pour plusieurs éléments.

Nous sommes d’accord que cela ne vaut pas une optimisation en bonne et dûe forme.

Mais si comme dans mon cas, votre code initial est loin d’être propre, vous serez surpris du gain inhérent à règles.

 [1]: /wp-content/uploads/2015/02/fastersnail.png