Sto sviluppando un'applicazione Web utilizzando jQuery Mobile sul lato client e PHP & MySQL sul lato server. L'applicazione funziona alla grande su browser desktop come Safari, Chrome e Firefox. Tuttavia, sull'iPad - dove l'applicazione viene aperta come una clip Web dalla schermata iniziale - l'applicazione si comporta molto peggio. Lo scorrimento funziona bene, ma toccare un link per caricare una pagina dal server diventa molto lento.jQuery Mobile molto lento su iPad
Una registrazione dello schermo dell'iPad mostra che, ad esempio, dopo averlo toccato, occorrono 0,3 secondi prima che l'elemento toccato venga evidenziato e venga visualizzato il caricatore. Dopo 1,0 secondi dall'inizio viene visualizzata/mostrata la parte inferiore della pagina aperta (sotto il caricatore). Poi ci vogliono altri 0,6 secondi prima che venga visualizzata la parte superiore della pagina, rendendo il tempo totale necessario per caricare la pagina 1,6 secondi. Un video che mostra questo processo (riprodotto al 25% della velocità originale) può essere trovato here.
Capisco che il caricamento di una pagina (tramite WiFi) richiede un certo tempo, ma non capisco il motivo per cui il rendering la metà superiore della pagina prende un extra di 0,6 secondi. Supponendo che la pagina sia completamente caricata dopo 1,0 secondi (perché la metà inferiore della pagina è già mostrata in quel momento), penso che ci vuole anche molto tempo, perché ci vogliono solo circa 0,5 secondi su Safari sul mio Mac . Ma ciò potrebbe causare il mio processore più lento nell'iPad e il ritardo della connessione WiFi.
Si spera che qualcuno conosca alcune ottimizzazioni (lato client) per far funzionare (o sentire) l'applicazione più velocemente. Ho già disabilitato le animazioni all'interno di jQuery Mobile e cercherò di ottimizzare personalmente il server.
Forse queste cose sono importanti da sapere:
- Tutte le pagine torno dal server hanno un pieno
<head>con più riferimento fogli di stile e script. JQuery Mobile ignora il<head>o consuma questa potenza di elaborazione? - Ho un'intestazione e un piè di pagina fissi nella maggior parte delle pagine. Sto usando
<div data-role="…" data-position="fixed" data-id="…" data-tap-toggle="false">per realizzare questo. L'intestazione e il piè di pagina sono inclusi anche in tutte le pagine. - La maggior parte delle intestazioni hanno un pulsante sul lato sinistro (
<a data-role="button">tag), un titolo nel mezzo (<h1>tag) e un controllo alimentati sul lato destro (<div data-role="controlgroup">) contenente due pulsanti (<a data-role="button">). - Un pulsante nell'intestazione è impostato per il precaricamento della pagina a cui si collega (
<a href="…" data-role="button" data-rel="dialog" data-prefetch>). Questo pulsante è incluso in ogni pagina, ma lohrefdel collegamento è lo stesso su ogni pagina. Questo potrebbe essere qualcosa ..? - Tutti i piè di pagina dispongono di una barra di navigazione (
<div data-role="navbar">) con diversi elementi (<li><a>). - Alcune pagine sono visualizzazioni elenco con funzionalità di filtro (
<ul data-role="listview" data-filter="true">). Questo attualmente contiene solo alcuni elementi (<li><a>, massimo 5) ed elenca i divisori (<li data-role="list-divider">). - Altre pagine sono moduli (
<form>) contenenti anche listview (<ul data-role="listview" data-inset="true">) con diversi campi modulo all'interno (<li data-role="fieldcontain">).
Bene, sono tutte cose "speciali" a cui riesco a pensare. Se hai bisogno di saperne di più o vedere qualche codice sorgente, per favore fammi sapere.
Ho usato jQuery Mobile per sviluppare un framework di sviluppo di app Web in-house. Sono contento di dire che la performance è stata alquanto radicale sia nel framework che nelle app web risultanti. Questo mi porta a pensare, potrebbe esserci qualcosa nelle tue pagine che potrebbe consumare un sacco di elaborazione? Potresti vedere, individuare e pubblicare tali parti in modo che SO possa avere un aspetto migliore? – kishu27
@ kishu27 Ho aggiunto alcuni dettagli tecnici che descrivono la mia domanda. – Jonathan
Se fossi alla tua situazione, inizierei a rimuovere parti del rendering della pagina (commentandolo), e vedere cosa influenza la performance. Le cose che hai menzionato sono ciò che ho fatto anche io, eccetto # 1. E non influenzano le prestazioni. – kishu27