Avvisi di memoria/arresto anomalo con l'app per iPad PhoneGap

Question

Ho provato diversi approcci per creare un'app nativa di una pagina utilizzando PhoneGap e sto cercando alcuni consigli generali sulla risoluzione dei problemi.

Primo approccio: E 'fondamentalmente un gruppo di diverse pagine e sotto pagine caricate con jQuery in contenitori che vivono nella pagina indice. Quindi, nessuna pagina viene caricata, basta caricare i frammenti di pagina dalle pagine in una shell, usando .load().

Secondo approccio: Ho fatto una pagina html di una pagina con tutti i contenuti, quindi mostrare e nascondere che in base alla corrispondenza della classe di un elemento di navigazione per un id di un contenitore di contenuti.

Entrambi gli approcci funzionano perfettamente meccanicamente. Il problema sembra essere dovuto al fatto che tutte le mie sottopagine hanno una galleria o 2-6 immagini (quindi ho complessivamente un totale di oltre 215 immagini, 660 x 440) per le quali ho usato il ciclo jquery, e Touchwipe per attivare lo scorrimento con i gesti. Le gallerie funzionano bene, ma dopo un po 'di scorrere circa 35 gallerie, l'app riceve sempre un livello di avviso di memoria 1, quindi 2, quindi si blocca. L'uso della mia memoria negli strumenti sembra ok ... la versione del frammento caricato ajax rimane circa 2 megabyte di byte live, il pager rimane costantemente a circa 5 mega. Le gallerie sono composte da immagini di sfondo CSS in div, in quanto ciò sembra funzionare meglio dei tag.

Non vedo perdite di memoria o altri problemi al di fuori degli avvisi di memoria. Sono un po 'bloccato su come rintracciarlo. Ho fatto prove ed errori assolutamente a morte. Hanno ridotto la javascript al minimo indispensabile. Qualcosa sembra crescere nel tempo.

Qualche idea su come capire cosa sta succedendo? Ci sono alcuni primi approcci per assicurarsi che nulla stia succedendo con il javascript che sta causando qualche tipo di perdita di memoria?

È molto frustrante che tutto funzioni abbastanza bene, tranne che sull'iPad.

La mia prossima tattica potrebbe essere quella di provare a riscrivere le immagini di sfondo della galleria in una gif vuota quando non sono in uso.

Ecco il codice che sto utilizzando per l'uno-cercapersone:

$(document).ready(function(){ 

    document.addEventListener('touchmove', function(e){ e.preventDefault(); }); 

    $('div#mainpages > div').hide(); 

    $("ul#mainnav li").click(function() { 
     $("#mainpages > div").hide(); 
     var navClass = $(this).attr('class'); 
     var target='#'+navClass; 
     $(target).show(); 
     $('[id^=subpages] > div').hide(); 
     $(target).find('[id^=subpages_] div:first').show(); 
    }); 


    $('[id^=subnav] li').click(function() { 

     $('[id^=subnav_] li').removeClass('current'); 
     $('[id^=subpages_] > div').hide(); 

     var subnavClass = $(this).attr('class'); 
     var subtargeted='#'+subnavClass; 
     $(subtargeted).show(); 

     $(this).addClass('current'); 

     $(subtargeted+' .gallery_div_shell').cycle({ 
      timeout: 0, 
      speed: 700, 
      speedIn: 300, 
      speedOut: 300, 
      fx: 'scrollHorz' 
     }); 

     $(subtargeted+' .gallery_div_shell').touchwipe({ 
      wipeLeft: function() { 
       $('.gallery_div_shell').cycle("next"); 
      }, 
      wipeRight: function() { 
       $('.gallery_div_shell').cycle("prev"); 
      } 
     }); 
    }); 
}); 

Grazie per qualsiasi consiglio, sto tirando fuori i miei capelli.

Answer 1

A prima vista non vedo niente di sbagliato. Si potrebbe provare a distruggere esplicitamente la galleria ciclo jQuery quando si apre il prossimo e vedere se questo aiuta

$(youridentifier).cycle('destroy'); 

Answer 2

Credo che il problema non era legato a JavaScript, ma correlato alla quantità di immagini webkit in grado di mantenere in attivo memoria. Sembra legato a questa domanda: Crashing when loading images

La mia soluzione era usare una combinazione di cose menzionate lì. Prima di tutto, sto usando div con un'immagine di sfondo per le mie gallerie. In secondo luogo, sto iniziando con tutte le immagini di sfondo impostate come GIF vuote. Quando mostro una sottosezione e attivo una galleria, utilizzo jquery per riscrivere l'immagine di sfondo css sull'origine dell'immagine effettiva, quindi quando faccio clic su una nuova sottolink, la reimposta per utilizzare la GIF vuota. Questo sembra mantenere il numero di immagini di sfondo div "attive" solo 3-7 alla volta, a parte l'interfaccia gfx. Nel frattempo gli altri 200 circa div con immagini di sfondo nelle gallerie (non mostrati comunque) sono solo una gif vuota.

Penso che questo problema sia in generale correlato alle limitazioni in UIWebview, piuttosto che a qualcosa di specifico per PhoneGap o jquery. Non sono sicuro che questa sia la soluzione finale, ma sono in grado di eseguire l'app senza arresti anomali fino ad ora, e i miei byte attivi nello strumento Allocations rimangono costantemente attorno a 1,3 meg.