jQuery ad elevata performance

Possiamo aumentare significativamente la performance dei nostri script jQuery seguendo alcune pratiche raccomandate per ottenere il meglio dal nostro codice. In questo articolo vedremo quali sono queste pratiche e come possiamo utilizzarle per migliorare la performance del nostro codice jQuery.

Usare selettori specifici e contestuali

In jQuery selettori più specifici hanno una migliore performance di selettori meno specifici:


$('.test') // più lento
$('div.test') // più veloce
$('#test') // molto più veloce

Possiamo usare il contesto dei selettori per migliorarne la performance:


$('div.test') // più lento
$('div.test', '#page') // più veloce

Mettere in cache i selettori e gli oggetti

Conservare i selettori e gli oggetti in variabili aumenta di molto la performance perchè riduce il numero di lookup all'interno delle query:


$('li', '#nav').each(function {

    var $li = $(this);
    var $a = $('a', $li);

});

Evitare each() e $.each()

Qualora si dovesse operare un ciclo su un insieme di elementi molto numeroso o su oggetti con molti membri, l'uso di each() e $.each() andrebbe evitato in favore di for e for...in:


var $li = $('li', '#test'), i = 0, len = $li.length;

for(i = 0; i < len; i += 1) {

  //...

}

Evitare html()

Il metodo html() di jQuery esegue un parsing preliminare della stringa HTML passata come argomento utilizzando il metodo privato clean(). Questa fase preliminare può rallentare l'esecuzione dei nostri script ed è per questo che si raccomanda l'uso di innerHTML.

Nota

jQuery converte una stringa del tipo <div/> in <div></div> anche se, da un punto di vista del parsing HTML, la stringa citata è perfettamente valida.

Usare gli array per creare tabelle

Si è notato che in alcuni browser come Internet Explorer usare degli array dinamici per creare tabelle aumenta di molto la velocità di esecuzione. L'array viene costruito con un indice incrementale e in ciascuna voce viene inserita una stringa HTML. Alla fine del processo l'array viene convertito in stringa tramite il metodo join() e passato alla proprietà innerHTML. Un esempio:


$(function() {

    var i = 0, html = [];
    
    html[i++] = '<table>';
   
    html[i++] = '<tr><th scope="col">A</th><th scope="col">B</th>' +
                '<th scope="col">C</th><th scope="col">D</th></tr>';
  
    for(var j = 1; j < 1001; j += 1) {
  
      html[i++] = '<tr><td>' + j + '</td>' +
                 '<td>' + j + '</td>' +
                 '<td>' + j + '</td>' +
                 '<td>' + j + '</td></tr>';
  
  
    }
  
    html[i++] = '</table>';
  
    $('#test')[0].innerHTML = html.join('');
       
  
  

});

In questo esempio viene creata una tabella con 4 colonne e 1000 righe. Come si può notare, il rendering nei browser è molto più performante di quello ottenuto con altre soluzioni.

Torna su