Sempre più spesso le app HTML5 sembrano “lente” e la risposta classica è “vabbe’.. sono app ibride, è normale..”. Come in ogni leggenda metropolitana c’è un fondo di verità in un mare di fantasia.

La verità è che le app HTML girano su un ulteriore strato di astrazione: la WebView del browser. Come ogni strato software la WebView aggiunge il proprio overhead che a seconda dei casi può produrre effetti più o meno visibili. La fantasia è che qualsiasi app, anche semplice, debba per forza sembrare lenta, laggosa e scattosa. Eppure… eppure molte app lo sono.

Il perché è presto detto: la nostra generazione di sviluppatori non nasce come programmatore Javascript ma inizia a sviluppare siti Web e usa javascript per mostrare degli alert e fare client-side validation. Una cosa bellissima e utilissima ma fare un’intera app vuol dire tutt’altro. Si aggiunga che abituati a programmare per browser desktop, dove cpu e memoria abbondano anche nel più infimo dei Celeron, non ci siamo mai posti il problema delle performance: anche il più zozzo dei selettori in meno di un secondo produce il risultato voluto.

Oggi le cose sono cambiate e per fare un’app che giri smooth su dispositivi smartphone è necessario porsi il problema dell’ottimizzazione ogni volta che si scrive codice, soprattutto quando si scelgono i selettori jQuery da utilizzare. Vediamo quindi qualche consiglio su cosa fare e non fare.

Scegliere i selettori giusti

Attraversare il DOM (scorrere gli elementi della pagina HTML alla ricerca di quelli che ci interessano) è laborioso perché in una pagina, anche piccola, ci sono decine se non centinaia o migliaia di elementi. Occorre quindi farlo il meno possibile, cachando i selettori e riutilizzandoli:

Dare alle variabili lo scope minimo possibile

Evitate variabili globali e confinate le variabili anche all’interno di funzioni self-invoked se necessario:

Usare sempre “on” piuttosto che “click” o “bind”

E soprattutto per gli schermi touch è meglio intercettare l’evento “tap” piuttosto che “click”: il click viene intercettato dal sistema operativo dopo un lag forzato di 300ms e appare quindi meno responsivo rispetto al tap.

Localizzare i selettori jQuery

Meno DOM si attravesa meglio è. Soprattutto lavorando col single-page pattern di jQuery Mobile in cui ogni query viene matchata sull’intero index.html e non solo sulla pagina visualizzata in quel momento.

Il modo migliore per indirizzare gli elementi è per ID perché jQuery smetterà di cercare al primo match, mentre indirizzando per classe la ricerca proseguirà comunque su tutto lo scope. Lo scopre deve quindi essere il più piccolo possibile ad es. per cercare solo all’interno di una certa pagina:

Minimizzare il numero di cambiamenti al DOM

Ogni volta che inseriamo o modifichiamo un elemento nel DOM causiamo un redraw della pagina, operazione abbastanza complessa perché occorre disporre e misurare ogni elemento e ricalcolare i selettori CSS. Risparmiamo quindi il più possibile le modifiche:

Se il tuo quotidiano ha a che fare con le problematiche descritte in questo articolo probabilmente dovresti leggere anche Ottimizzare i cambi di pagina con jQuery Mobile e Sito mobile, app html5 o nativa.