E 'difficile fare ipotesi in merito al rallentamento delle prestazioni e la questione di reindirizzamento. Qui di seguito puoi trovare alcuni aspetti che a mio parere influenzano le prestazioni di un'applicazione mobile che consiste in HTML5, CSS3, JavaScript e dovrebbero essere presi in considerazione nell'analisi, nella fase di progettazione e di sviluppo.
Durante lo sviluppo di piccole applicazioni mobili l'utilizzo di una singola pagina HTML utilizzando la pagina interna di collegamento-AJAX è consigliabile
Transizioni di pagina
Come indicato nella jQM 1.1.1 Docs, per impostazione predefinita, tutte le transizioni, ad eccezione di dissolvenza richiedono 3D trasforma il supporto. I dispositivi privi del supporto 3D torneranno a una transizione di dissolvenza, indipendentemente dalla transizione specificata. jQM fa questo per escludere proattivamente piattaforme poco performanti come Android 2.x da transizioni avanzate e assicurare che abbiano ancora un'esperienza fluida. Si noti che esistono piattaforme come Android 3.0 che supportano tecnicamente le trasformazioni 3D, ma hanno ancora prestazioni di animazione scadenti, pertanto non è garantito che ogni browser sia privo di sfarfallio del 100%. Decidi il tipo di transizione che userai dopo aver considerato quanto sopra.
Minify JS e file CSS
Ogni pagina deve essere il più leggero possibile. L'obiettivo del minisito è quello di preservare le qualità operative del codice riducendo al contempo il suo footprint complessivo. Ci sono molti strumenti disponibili sul WEB come lo YUI Compressor, lo Minify e molti altri. Inoltre ci sono strumenti come il JLint che viene utilizzato per verificare se il codice sorgente JavaScript è conforme alle regole di codifica. JLint è uno strumento di qualità del codice che verifica la presenza di problemi nel codice JavaScript. I problemi segnalati non sono necessariamente errori di sintassi ma possono essere problemi strutturali. Nota che JLint non dimostra che il tuo codice sia corretto. Consideralo come uno strumento di aiuto. Inoltre ci sono strumenti per eseguire l'ottimizzazione CSS. L'ottimizzazione ti aiuta a ottenere file di dimensioni CSS più piccole e codice scritto migliore. È possibile trovare molti ottimizzatori CSS disponibili sul WEB come CleanCSS e CSSTidy.
Componenti limita
Le pagine HTML si raccomanda di essere limitato a 25kb al fine di ottenere il vantaggio ottimale di cache per la maggior parte dei browser web per cellulari. Il limite di memorizzazione nella cache varia a seconda della versione del sistema operativo. Ad esempio, Android 2.1 ha un limite di memorizzazione nella cache di circa 2 Mb.
HTML5 CSS3 &
Tentare di creare facile da leggere, per estendere e codice riutilizzabile. È importante sfruttare appieno l'utilizzo di HTML5 e CSS3. La dichiarazione DocType HTML5 (<!DOCTYPE html>) dovrebbe essere la prima cosa nel documento HTML5 prima del tag html. È un'istruzione per il browser web su quale versione di HTML della pagina è scritta in.
Utilizzare la W3C mobileOK Checker
Il W3C mobileOK Checker è un servizio gratuito da parte del W3C che aiuta a controllare il livello di cordialità mobile Web documenti, e in particolare asserire se un documento Web è mobileOK. Una pagina Web è mobileOK quando supera tutti i test. I test sono definiti nel dispositivo mobileOK Basic Tests 1.0 specification. Per capire perché il controllo di un documento Web per l'ottimizzazione della mobilità sia davvero importante, è probabilmente opportuno sottolineare alcuni punti sul cosiddetto mondo mobile. Rispetto ad un normale computer desktop, un dispositivo mobile può essere considerato come limitato a prima vista: dimensioni dello schermo più piccole, potenze di elaborazione inferiori, quantità di memoria inferiore, nessun mouse e così via. Rispetto alle connessioni dati fisse, le reti mobili possono essere lente e spesso hanno una latenza più elevata. Rispetto ad un utente seduto davanti al suo computer, l'utente in movimento ha un tempo limitato ed è facilmente distratto. Oltre a questi limiti, il mondo mobile è molto frammentato: molti dispositivi diversi, ognuno dei quali definisce un insieme unico di funzionalità supportate.
consideri la comparsa sullo schermo diverse dimensioni
La densità schermate e le dimensioni viewport e la scala di pagine web dovrebbero essere prese in considerazione quando si mira diverse dimensioni dello schermo. I metadati della vista possono essere utilizzati per definire la dimensione del viewport dove viewport è l'area del contenitore in cui viene disegnata la pagina. La scala del viewport definisce il livello di zoom applicato alla pagina web. La proprietà viewport density-densitydpi e le tecniche CSS, JS possono essere utilizzate per modificare la densità dello schermo di destinazione per la pagina web. Ci sono molti articoli sul WEB riguardanti l'aspetto su diverse dimensioni dello schermo.
Identificare i flussi con ritardo potenziale
Il PageSpeed Firefox/Chrome extension può essere utilizzato per controllare le pagine velocità. Quando si profila una pagina Web con Velocità pagina, viene valutata la conformità della pagina a un numero di regole diverse. Queste regole sono best practice generali front-end che puoi applicare in qualsiasi fase dello sviluppo web. L'estensione fornisce suggerimenti e suggerimenti specifici su come implementare al meglio le regole e incorporarle nel processo di sviluppo.
Spero che questo aiuti.
Quale versione di jQuery Mobile? Quale versione di PhoneGap? Cosa hai fatto finora per tentare una correzione? Puoi mostrare del codice, ad esempio, l'ordine di JS include? – Jasper