Migliorare le performance del nostro codice jQuery
Pagina 1 di 2
Ho sempre trovato interessante qualsiasi articolo e discussione su come rendere il codice più performante.
Mi sono sempre informato ogni volta in cui mi sono trovato ad affrontare un nuovo linguaggio, prima PHP, poi Java e poi con il framework jQuery. Non si tratta solo di ottimizzare i tempi di risposta, né solamente di rendere l'esperienza utente più rapida e coinvolgente.
Imparare ad ottimizzare il codice si riflette anche sulla qualità del codice stesso, cosa a cui ho sempre tenuto.
Credo sia necessario pensare al lavoro del programmatore come a quello dell'artigiano, il nostro prodotto è un artefatto e, come tale, può essere più o meno raffinato.
Ci sono mille modi per ottenere lo stesso risultato, ma alcuni sono migliori di altri e anche se non per tutti i progetti è vitale essere attenti alle performance, utilizzare sempre un buon approccio ci tornerà utile nel momento del bisogno.
Ci sono molte risorse online sull'ottimizzazione di jQuery, alcuni consigli sono onnipresenti, altri accademici, altri sembrano contradditori, quindi facciamo un pò di ordine ed elenchiamo secondo anche l'esperienza diretta del sottoscritto le best practice a cui non possiamo rinunciare.
Utilizzare l'ultima versione del framework
Non abbiate paura di passare alla nuova versione di jQuery, la retrocompatibilità è garantita e ogni release porta miglioramenti significativi nelle performance con la riscrittura di sezioni del core e miglioramenti percettibili nelle funzioni più utilizzate. Soltanto da una release alla successiva per alcune funzioni di parla di tempi di esecuzioni ridotti anche del 50%. Date uno sguardo all'immagine sottostante:
Utilizzare lo shortcut per il DOM ready
Al posto di:
$(document).ready(function(){ /* Logica */ })
risparmiate qualche byte utilizzando il relativo shortcut:
$(function() { /* Logica */ });
Deferire parte della logica al window load
Non è necessario scrivere tutto all'interno del document ready. Delegate parte della logica da eseguire al caricamento della finestra. Ad esempio il binding del click di un bottone al termine di un lungo form può attendere tranquillamente di essere definito.
$( function() {
// # qui parte la logica
});
$( window ).load( function() {
$( "buttonID" ).click( function() {
// # Qui la logica per il bind del bottone
});
});
Minificare gli script
Per prima cosa vi suggerisco di installare sul vostro Firefox ( come addOn di FireBug) e sul vostro Chrome il plugin di Google Page Speed che trovate qui. Questo utilissimo tools oltre a darvi dei consigli generali per migliorare le performance della vostra pagina ha una preziosa feature: vi propone la versione minificata di tutti gli script che vi trova all'interno. Lo fa anche per i CSS e fornisce anche le versioni ottimizzate delle immagini pesanti ma soffermiamoci sul nostro jQuery; allego di seguito due screenshots che spiegano meglio di mille parole quello che dovete fare:
Google page speed come appare all'interno di Firebug:
Cliccando su save as otterremo la versione minificata dello script:
Minificare ognuno degli script che avete sulla pagina può portare a salvare parecchie decine di Kb in scaricamento.
