Questo articolo richiede una revisione stilistica. Scopri come puoi essere d’aiuto.`
Gli smartphone entry-level possono disporre di hardware limitato e spesso sono usati in ambienti con connettività scadente e problemi nell'acquisire la posizione. Questa guida espone i vari fattori che impattano sulle performance e sulla stabilità delle applicazioni in modo che gli sviluppatori possano fare test specifici sulle performance su questi dispositivi. Verranno inoltre elencati gli strumenti per ispezionare questi problemi e per ottimizzare i colli di bottiglia.
Questa guida è rivolta agli sviluppatori di app ed ai revisori che devono determinare quanto bene un'app performerà su dispositivo Firefox OS di fascia bassa e quali fattori cercare per determinarlo. Si suppone che non tutti gli utilizzatori della guida avranno accesso ad un tale dispositivo.
Nota: Le linee guida di sviluppo aiutano se durante il lavoro si fanno controlli frequenti con il browser desktop, il simulatore Firefox OS e eventualmente un dispositivo fisico (vedi Different ways to run Gaia). Potresti aver bisogno di cambiare strumenti quando testi il tuo lavoro su di una versione diversa di Firefox OS. Scegli lo strumento più potente a disposizione per la versione che vuoi provare.
Memoria
Questa sezione espone come eseguire il debug e l'ottimizzazione nel caso di vincoli della memoria disponibile.
Sul dispositivo
Firefox DevTools WebIDE Monitor (2.1+)
Il nuovo WebIDE Monitor mostra in tempo reale grafici sull'utilizzo della memoria dai vari processi in esecuzione sul dispositivo Firefox OS connesso. Lo strumento di monitoraggio viene tuttora sviluppato ed è disponibile solo nella versione Nightly di Firefox. Per usarlo è necessario un dispositivo con Firefox OS almeno alla versione 2.1 ( non funzionerà su versioni precedenti e nemmeno nel simulatore). Per usarlo apri WebIDE, connetti il tuo dispositivo Firefox OS 2.1 e una volta rilevato nel WebIDE clicca su Runtime, quindi su Monitor.
Una volta attivato vedrai la memoria media in uso e dei picchi. Le cadute nell'utilizzo di memoria sono dovute all garbage collector che si disfa di tutto ciò che non viene più usato. Siccome c'è un minimo di interazione tra i processi attivi un po' della memoria è sempre condivisa.
Firewatch (1.1+)
Firewatch è il predecessore di WebIDE Monitor — è uno strumento da riga di comando basato su node per vedere un grafico della memoria usata dal dispositivo Firefox OS connesso (supporta tutte le versioni fino ad 1.4). Può essere usato per generare performance profiles e recuperare about:memory details. Segui le istruzioni sulla pagina GitHub per installarlo e usarlo.
Controllare la memoria in uso è un processo a impatto basso quindi puoi mantenerlo in funzione mentre testi la tua app.
Developer HUD sul dispositivo (1.4+)
il Developer Hud è uno strumento integrato nel dispositivo che è disponibile dalla versione 1.4. Mostra i dettagli di performance e piattaforma in tempo, mostrandoli sul display del dispositivo. Può mostrare la memoria dell'App divisa nelle categorie: JS objects, JS strings, JS other, DOM, Style e Other.
Puoi mantenerlo in funzione durante il test per avere delle indicazioni sulla memoria usata in generale. Conoscendo questa informazione puoi riscontrare se hai veramente diminuito l'utilizzo della memoria quando cerchi di ottimizzare. Inoltre puoi subito controllare quali interazioni incrementano o decrementano la memoria in uso.
Sul desktop
about:memory
Senza usare altri strumenti puoi andare alla url about:memory per vedere un rappporto sulla memoria in uso sul tuo Firefox per desktop. Uno strumento a riga di comando ti permette di avere i rapporti che avresti per Firefox OS tramite altri strumenti.
Chrome Devtools
Finchè l'ispettore della memoria non viene aggiunto agli strumenti per sviluppatori di Firefox puoi usare il Chrome’s Heap Profiler per avere informazioni sull'uso della memoria sul desktop.
Larghezza di banda
Questa sezione espone gli strumenti disponibili per risolvere problemi di utilizzo inteso di grosse porzioni della banda disponibile.
Desktop
Network Monitor
La maggior parte degli sviluppatori tiene traccia delle richieste di rete tramite il Network Monitor che può misurare quanto bene il tuo server conserva nella cache dati statici (primed cache) e quanto è intensoand how heavy the initial payload is for the user (Empty cache). Avendo in mente che i telefoni di fascia bassa avranno spesso a disposizione solo la rete EDGE (150 KB/s in pratica) devi tenere le richieste totali il più contenute possibile. I limiti suggeriti sono: con la cache vuota 1.5 MB e 500 KB sulla primed cache, ma meno la tua app è esosa migliore è l'esperienza utente.
Specifiche dei dispositivi
Questa sezione espone i limiti e le capacità conosciute che devi conoscere e rispettare quando esegui il debug su dispositivi con poca memoria.
App Storage
Lo spazio disponibile per le app sul dispositivo è di circa 80 MB. Per rispettarlo e non abusarne la regola principale è di non eccedere i 5MB con le packaged application.
Memoria
La quantità di memoria RAM minima per Firefox OS è 128 MB nella configurazione chiamata Tarako. Anche nella versione da 256 MB le app in background sono spesso terminate per recuperare memoria. Il dispositivo di riferimento Flame può essere configurato variando la memria accessibile da 1 GB fino a 256 MB per permettere di testare le diverse configurazioni hardware.
Geolocalizzazione
I dispositivi Firefox OS di fascia bassa non hanno a disposizione il A-GPS e quindi possono solo fornire dati sulla posizione tramite il posizionamento Wi-Fi. Se non hai bisogno della posizione precisa ma ti basta anche solo la città allora sei a posto ma se hai bisogno di più accuratezza potresti considerare delle alternative.
Connettività
Nei mercati dove i dispostivi di fascia bassa sono utilizzati la connessione 2G è scadente e spesso non permette di fare affidamento a servizi online per ottenere dati. Ottimizza la tua app per funzionare offline scaricando i dati per l'uso senza connessione, minimizzando le richieste ai server e aggiungengo dei messaggi per comunicare all'utente che una richiesta non è andata a buon fine. Se la tua app richiede di accedere al tuo server ciclicamente per avere i nuovi dati usa le notifiche push di Firefox per gestire le richieste solo quando sono necessarie.
Migliori pratiche per l'uso della memoria
Quando la memoria RAM si esaurisce le app in background saranno chiuse e la loro memoria sarà liberata. Questo strumento è chiamato Low-Memory-Killer (LMK) e le soglie di attivazione dipendono dalla configurazione del telefono, dalla versione e dalla priorità delle app. Un'app in esecuzione ha priorità maggiore ed è chiusa solamente quando la memoria è pericolosamente bassa. Per evidenziare quanto sia importante questa situazione questo task-killer è chiamato Out-Of-Memory (OOM) è apparirà all'utente come un crash di sistema.
Nota: Per saperne di più su come la gestione della memoria è trattata in Firefox OS leggi Out of memory management on Firefox OS.
Per evitare che il task-killers chiuda la tua app sii molto critico sull'uso della memoria. Prendi solo ciò che serve e non abusarne. Ecco alcune pratiche da seguire.
DOM
Image resampling
Sii responsive e fai in modo che le tue immagini siano “cucite su misura”! Riscalare le immagini porta ad un consumo eccessivo di memoria e dovrebbe essere evitato. Comincia sempre con immagini a bassa risoluzione e sostituiscile con altre a più alta risoluzione quando necessario.
Image sprites
Combina le icone e le immagini in una CSS sprites per minimizzare il numero di oggetti immagine in memoria, questo riduce la banda necessaria a caricare visto che usi un solo file ben compresso che è mandato in una sola volta.
Images in <img> vs CSS
Minimizza il numero di immagini a cui fai riferimento dai CSS al numero che serve per il layout ed il design dell'app. Tutte le immagini definite nei CSS sono caricate anche quando non sono usate al momento. Casi d'uso come le emoticon in una app di messaggistica sono molto meno intesivi usando un elemento <img> che carica le immagini al momento e che può essere rimosso dalla memoria quando non più richiesto.
Icon fonts
I fonts sono il modo consigliato di implementare le icone dell'applicazione e anche le emoticon. Le alternative sono le sprite CSS e SVG che usano più memroia e sono meno performanti. Prendi in considerazione l'idea di usare un generatore di font per caricare in memoria solo le icone di cui farai uso; scaricare più font glyphs di quanti ne userai è uno spreco di memoria e di banda.
Rimuovi o ricicla elementi
Comunemente vengono mantenuti elementi DOM in memoria per un uso successivo. Alcuni siti mantengono in memoria la pagina precedente per poi riusarla al bisogno. Un altro errore di gestione è aggiungere un bottone ad una lista per caricare altri elementi; gli elementi nascosti sono spesso il maggior consumo di memoria su una pagina, specialmente quando contiene molte immagini.
Anche se tenere le pagine in memoria può velocizzare la navigazione il bisogno di bilanciare prestazioni e memoria è primario. Una alternativa alle liste infinite è la paginazione, ovvero rimpiazzare i vecchi elementi con i nuovi nella stessa lista, un'altra soluzione più elaborata è riciclare i vecchi elementi cambiandone il contenuto quando si caricano i nuovi elementi.
Storage
Storage vs memory cache
Una tecnica comune per aumentare le performance è caricare i dati da un database lato client come IndexedDB e mantenerli in memoria per un uso seguente. Questo non si limita ai dati strutturati ma anche ai template e alle stringhe di localizzazzione. A seconda della quantità e della complessità dei dati questi posssono occupare buona parte della memoria
Se la memoria è un problema carica i dati quando servono e sacrifica le performance.
Audio
La Web Audio API è la soluzione raccomandata e più efficente per mantenere in memoria e riprodurre file sonori, specialmente per un gioco. Questa API permette di maneggiare i buffer che hai caricato e aggiunto alla coda, dandoti un controllo assoluto sulla memoria usata. L'elemento HTML5 <audio> ha comunque i suoi casi di utilizzo, come ad esempio lo streaming. Entrambe le specifiche possono essere combinate per avere il meglio di entrambe.