Ero a caccia di trucchi per ottimizzare le prestazioni di jQuery che uso in una mia pesante applicazione web dinamica. Dopo aver scavato in un sacco di articoli ho deciso di fare una lista con i migliori suggerimenti e utilizzi comuni.

Prestazioni sui selettori

⤽
  1. Sempre discendenti da un #id Questa è la regola d’oro per i selettori jQuery. Il modo più veloce per selezionare un elemento in jQuery è da un ID univoco:
    Copia codice 
    
#
$('#content').hide();
#
    o selezionare gli elementi multipli che discendono da un ID
    Copia codice 
    
#
$('#content p').hide();
#
  2. Usare i tags prima delle classi Il secondo selettore più veloce in jQuery è il selettore tag $(‘head’), perch’è associato a un metodo nativo JavaScript, getElementsByTagName(). Il modo migliore è prefissare una classe con un nome di tag (e discendente da un ID):
    Copia codice 
    
#
var receiveNewsletter = $('#nslForm input.on');
#
    Il selettore per le classi sono i più lenti tra selettori di jQuery, in IE si scorre l’intero DOM. Evitare di utilizzarla il meno possibile. Mai prefissare un ID con un nome di tag. Per esempio: questo è lento perché dovrà scorrere tutti gli elementi

    cercando l’ID del ‘content’:
    Copia codice 
    
#
var content = $('div#content');
#
    Inoltre, NON discendere mai da più ID:
    Copia codice 
    
#
var traffic_light = $('#content #traffic_light');
#
  3. Usare Sub-queries Mettere nella cache l’oggetto padre poi eseguire le query su di esso:
    Copia codice 
    
#
var header = $('#header');
var menu = header.find('.menu');
// o anche
var menu = $('.menu', header);
#
  4. Ottimizzare i selettori da ‘destra a sinistra’ tipo Sizzle A partire dalla versione 1.3, jQuery ha utilizzato la Sizzle Javascript Selector Library che funziona un po’ diverso dal motore di selezione utilizzato nelle versioni precedenti. Vale a dire che utilizza il modello da ‘destra a sinistra‘ piuttosto che da ‘sinistra a destra‘. Assicurarsi che il selettore più a destra sia quello specifico e tutti gli altri selettori a sinistra siano i più generici:
    Copia codice 
    
#
var linkContacts = $('.contact-links div.side-wrapper');
#
    invece di:
    Copia codice 
    
#
var linkContacts = $('a.contact-links .side-wrapper');
#
  5. Usare find() al posto del contesto Infatti, la funzione .find() sembra essere più veloce. Ma questo conta di più quando si deve attraversare una pagina con tanti elementi nel DOM:
    Copia codice 
    
#
var divs = $('.testdiv', '#pageBody');      // 2353 sec. con Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 sec. con Firebug 3.6
var divs = $('#pageBody .testdiv');         // 2469 sec. con Firebug 3.6
#
  6. Sfruttare la potenza del concatenamento È meglio concatenare i metodi jQuery e poi la cache dei selettori:
    Copia codice 
    
#
$('li.menu-item').click(function () {
		alert('test click');
	})
    .css('display', 'block')
    .css('color', 'red')
    .fadeTo(2, 0.7);
#
  7. Scrivere i propri selettori Se si dispone di selettori che si utilizzano spesso nello script extend jQuery object $.expr[':'] scrivere il proprio selettore. Nel prossimo esempio si crea un selettore ‘abovethefold’ che restituisce un insieme di elementi che non sono visibili:
    Copia codice 
    
#
$.extend($.expr[':'], {
	abovethefold: function(el) {
		return $(el).offset().top < $(window).scrollTop() + $(window).height();
	}
});
var nonVisibleElements = $('div:abovethefold');
#
Manipolazioni nel DOM
⤽
  1. Cache di oggetti jQuery Fare la cache degli elementi che si interrogano spesso:
    Copia codice 
    
#
var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');
#
  2. Avvolgere tutto in un singolo elemento per fare qualsiasi tipo di inserimento nel DOM La manipolazione del DOM è molto lenta. Cercare di modificare la struttura HTML il meno possibile.
    Copia codice 
    
#
var menu = '<ul id="menu">';
for (var i = 1; i < 100; i++) {
    menu += '<li>' + i + '</li>';
}
menu += '</ul>';
$('#header').prepend(menu);
// Invece di fare:
$('#header').prepend('<ul id="menu"></ul>');
for (var i = 1; i < 100; i++) {
    $('#menu').append('<li>' + i + '</li>');
}
#
  3. Utilizzare il rilevamento di oggetti anche se jQuery non genera un errore È grande che i metodi di jQuery non lanciano gli errori agli utenti, ma questo non significa che uno sviluppatore deve fare affidamento solo a questa caratteristica. Anche se non genera un errore, jQuery dovrà eseguire una serie di funzioni inutili prima di determinare se un oggetto non esiste. Quindi, utilizzare una rapida rilevazione dell’oggetto prima di chiamare i metodi su l’oggetto jQuery che può o non può esistere.
  4. Usare le funzioni dirette, piuttosto che le loro convenienti controparti Per migliorare le prestazioni utilizzare la funzione diretta $.ajax() anziché $.get(), $.getJSON(), $.post(), perché gli ultimi sono scorciatoie che chiamiamo la stessa funzione $.ajax().
  5. Memorizzare i risultati JQuery per usarlo più tardi Di solito si ha un oggetto generale par l’applicazione javascript – App. Mantenete il vostro jQuery di uso frequente per un suo posteriore utilizzo:
    Copia codice 
    
#
App.hiddenDivs = $('div.hidden');
// dopo, nella vostra applicazione:
App.hiddenDivs.find('span');
#
  6. Utilizzare i dati interni del metodo data() di jQuery per memorizzare lo stato Non dimenticare l’utilizzo della funzione .data() per memorizzare della roba per gli elementi:
    Copia codice 
    
#
$('#head').data('name', 'value');
// dopo, nella vostra applicazione:
$('#head').data('name');
#
  7. Utilizzare le funzioni di utilità di jQuery Non dimenticare le jQuery Utilities functions che può essere molto utile. I miei preferiti sono $.isFunction(), $.isArray() e la funzione $.each().
  8. Aggiungere una classe JS per l’attributo HTML Prima di tutto, non appena ha caricato jQuery utilizzarlo per aggiungere una classe “JS” al tag HTML.
    Copia codice 
    
#
$('HTML').addClass('JS');
#
    Visto che questo succede solo quando javascript è attivato, è possibile utilizzarlo per aggiungere stili CSS che funzionano solo se l’utente ha lo JavaScript attivato, in questo modo:
    Copia codice 
    
#
/* Nel file css */
.JS #myDiv{
    display:none;
}
#
    Quindi, ciò significa che possiamo nascondere il contenuto solo se JavaScript è attivato e quindi utilizzare jQuery per mostrarlo quando è necessario (ad esempio quando si collapsa o si espande alcuni pannelli se l’utente fa clic su di essi), mentre quelli con Javascript disattivato (e i motori di ricerca spider) fa’ vedere tutti i contenuti, in quanto non è nascosto. Userò questo molto in futuro.   
    Per saperne di più su questo argomento
Prestazioni con gli eventi
⤽
  1. Rimandare $(window).load A volte è più veloce da usare $(window).load che $(document).ready(), perché quest’ultima si verifica prima che tutti gli elementi DOM vengano scaricati. Si consiglia di testarla prima di usarla.
  2. Sfruttare la delegazione dell’evento (anche nota come Bubbling) Quando si ha diversi elementi in un contenitore e si desidera assegnare un evento a tutti loro, utilizza la delega per gestirli. La delegazione vi offre la possibilità di associare un solo evento a un elemento padre e poi controllare su ciò quale figlio ha agito sull’evento (target). È molto utile quando si dispone di una grande tabella con tanti dati e si desidera impostare gli eventi su ogni cella o . Catturare la tabella, impostare l’evento delega per tutti i TDs:
    Copia codice 
    
#
$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});
#
    Per saperne di più su questo argomento →
  3. Scorciatoia per l’evento ready Se si vuole risparmiare un po’ di bit sulla compressione del plugin in js, sostituire l’evento $(document).onready():
    Copia codice 
    
#
// Invede di:
$(document).ready(function (){
    // tuo codice
});
// si puo' fare:
$(function (){
    // tuo codice
});
#

Testando jQuery
⤽
  1. Unità di analisi jQuery Il modo migliore per testare un codice Javascript è il modo umano. Ma, è ancora possibile utilizzare alcuni strumenti automatizzati, come Selenium, Funcunit, QUnit e QMock per provare il codice (in particolare per i plugins). Ma si discuterà di questo thread in un altro post perché c’è molto da dire in proposito.
  2. Incrementare le performance del tuo codice jQuery Misurare sempre le prestazioni del tuo codice e vedere quale interrogazione è la più lenta per sostituirla. Si può raggiungere questo obiettivo con la console di Firebug.
    Copia codice 
    
#
// Scorciatoia per registrare i dati
// nella console di Firebug
$.l($('div'));
// Prendi il timestamp UNIX
$.time();
// Registra il tempo di esecuzione
// di un blocco JS per Firebug
$.lt();
$('div');
$.lt();
// Eseguie un blocco di codice in un ciclo
// che testa il tempo di esecuzione
$.bm("var divs = $('.testdiv', '#pageBody');");
// 2353 on Firebug 3.6
#

Prestazioni in generale
⤽
  1. Utilizzare l’ultima versione di jQuery La versione più recente di solito è la migliore. Inoltre non dimenticate di testare il codice dopo aver cambiato la tua versione di jQuery. A volte non è pienamente compatibile con il codice scritto in precedenza.
  2. Usare HTML 5 Il nuovo standard di HTML 5 è dotato di un DOM con una struttura più leggera. La struttura più leggera del DOM significa meno elementi da attraversare per jQuery e le prestazioni del carico è migliore. Quindi, passare quando possibile al nuovo standard.
  3. Appendere il tag stile quando ci sono 15 o più elementi Quando si aggiunge alcuni elementi allo stile è meglio usare semplicemente il metodo jQuery’s css(), tuttavia quando lo stile contiene 15 o più elementi è più efficiente aggiungere un tag stile al DOM. In questo modo è facile sbarazzarsi della codifica di stili al interno degli script.
    Copia codice 
    
#
$('<style type="text/css"> div.class { color: red; } </style>')
.appendTo('head');
#
  4. Non caricare codice che non è necessario È una buona tecnica congelare il vostro codice Javascript in multipli files e caricarli solo sulle pagine che ne hanno veramente bisogno. In questo modo non è necessario caricare il codice JS e selettori. Così rimane facile da gestire un codice in questo modo.
  5. Ridurre il tempi di download al minimo con un file maestro JS compresso. Dopo aver deciso quali file JavaScript sono da caricare, comprimerli e incollateli in un unico file. Questo può essere fatto automaticamente con degli strumenti open source come Minify integrato nel codice terminale o con la loro combinazione minimizzandoli con degli strumenti online come JSCompressor , YUI Compressor o Dean Edwards JS packer. Io preferisco il JSCompressor dagli strumenti on-line a disposizione.
  6. Combinate lo Javascript crudo con jQuery dove necessario È una bellezza di lavorare con jQuery ma non dimentichiamo che è solo un framework di Javascript. Così si può passare dal codice jQuery a funzioni Javascript crude, ove necessario per ottenere maggiori prestazioni.
  7. Caricare il framework da Google Code Caricare sempre jQuery dal sito CDN di Google nell’applicazione di produzione; questo garantisce il download più veloce dello script dalla località più vicina dell’utente.
    In questo modo si salva una richiesta dal priprio server ed anche il cliente ha la possibilità di caricare lo script jQuery istantaneamente dalla cache del suo browser già caricato da un altro sito che usa jQuery da Google CDN.
    Copia codice 
    
#
// Collegamento alla versione minificata
// da versione specifica
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
#
  8. Caricare il contenuto pigro per la velocizzare e beneficiare il SEO Caricare i pezzi dei vostri siti con Ajax per risparmiare del tempo lato server in fase di caricamento. Si può iniziare con il solito widget sidebar.

Per ora è tutto. Non appena individuo degli altri proseguo con questa lista di prestazioni.