2012-08-06 13 views
32

Ho un problema in cui Mobile Safari si arresta in modo anomalo durante il caricamento e la manipolazione del DOM con jQuery quando le pagine diventano troppo grandi.Mobile Safari su iOS si blocca sulle grandi pagine

Ho lo stesso problema su iPhone e iPad.

Quali sono il modo migliore per risolvere i problemi relativi alle pagine per dispositivi mobili? Ci sono problemi noti che potrebbero bloccare Mobile Safari?

+0

Che cosa è troppo grande? È riproducibile? Hai un esempio funzionante per mostrare il crash? Hai o puoi provare su altri browser (Chrome, FF)? Stesso problema? – rene

+0

È un sito di forum e succede sempre quando un thread ottiene più di circa 100 commenti. Non riesco a farlo su un browser desktop che ho provato, ma sempre su Safari mobile quando l'utente è autenticato. –

+0

Penso di averlo ristretto a un pezzo di codice JavaScript, ma ancora non capisco veramente quale sia la causa. Immagino che dovrò rimuovere tutto e quindi abilitare bit per bit e vedere quando si rompe. –

risposta

27

Ho effettivamente trovato il problema. Non era con JS come pensavo, ma con il CSS. Ho aggiunto la classe per fare in modo che una transizione CSS svanisca in alcuni elementi. Per gli utenti anonimi questi elementi avevano display: none; e probabilmente non hanno mai eseguito la transizione di opacità.

La cosa strana è che le transizioni erano esattamente su due elementi. Quindi, perché questo si arresta solo su thread lunghi con oltre 100 commenti?

Quindi la linea di fondo è: -webkit-transition ha bloccato la pagina su Safari mobile.

12

Il problema principale con qualsiasi app iOS è l'utilizzo della memoria. Pertanto, è probabile che le tue pagine utilizzino troppa memoria.

Mobile Safari utilizza una tecnica intelligente in modo che non tutta la pagina debba risiedere in memoria in un dato momento, solo una parte di esso. Forse potresti controllare se qualcosa nella tua pagina sconfigge questo meccanismo o lo rende meno efficace.

In ogni caso, per dare più suggerimenti al punto, maggiori informazioni sulla tua pagina sarebbero davvero grandiose.

A proposito, è possibile avere alcuni suggerimenti dal registro di crash che memorizza il dispositivo. Controllare per vedere se si può trovare in Impostazioni:

  1. generale
  2. Chi
  3. Diagnostica & Uso
  4. Diagnostica & dati di utilizzo

Se si tratta di un problema di memoria, si dovrebbe trovare qualcosa come "signal (0)"; Non sono sicuro se questo possa significare solo "ucciso a causa dell'uso della memoria", ma di solito lo do per scontato quando ho trovato un segnale (0).

In caso contrario, si potrebbe dire che cosa è sbagliato ...

Spero che questo aiuti.

+1

per favore, controlla la mia modifica sull'ispezione dei registri degli arresti anomali ... – sergio

+0

Come potresti, come dici tu, "controllare se qualcosa nella tua pagina sconfigge [meccanismo di risparmio della memoria intelligente di Mobile Safari] o lo rende meno efficace"? – davidtheclark

3

Ci sono sia limiti di memoria che limiti di tempo di esecuzione Javascript, anche se è un po 'confuso da come potresti effettivamente colpirli. Rapporti comuni derivano dal fatto che una pagina con una dimensione superiore a 10 MB presenta problemi e l'esecuzione di Javascript è limitata a 10 secondi.

Vedere Apple's documentation per ulteriori informazioni.

+0

Questa è una conseguenza inevitabile di una piattaforma incorporata senza scambio. Una volta che la memoria principale è piena, gli errori di memoria esaurita inizieranno a verificarsi. Se 10 MB suona abbastanza piccolo, ricorda che Safari può essere aperto in alcune schede in qualsiasi momento, anche se ignora silenziosamente il contenuto delle pagine delle schede nascoste in risposta alla pressione della memoria. – marko

+0

@Marko Questo è un bug di Safari ovvio e un potenziale problema di sicurezza. Le applicazioni sono necessarie per liberare più memoria possibile quando il sistema le notifica e non si blocca.Safari dovrebbe forse scattare istantanee e visualizzarle quando non ha memoria, o addirittura disabilitare le immagini o troncare le pagine quando è troppo. (Nota fuori tema: lo swap è horror sotto SSD, ecco perché ho acquistato la RAM più grande per il mio MBP equipaggiato con SSD, quindi posso evitare il più possibile lo swap. Buono per Apple non abilitarlo sui nostri dispositivi mobili.) –

+0

The la memoria e i limiti di tempo sembrano applicarsi solo a JavaScript. Ci sono anche alcuni limiti su tele e JPEG. Colpendo un limite si ferma la pagina web, non Safari. Chiaramente, Apple avrebbe dovuto mettere più limiti per prevenire arresti anomali. –

21

Aveva lo stesso problema, per me era -webkit-transform: translateZ(0); che ha causato il crash di Safari.

+0

Questo ha fatto il trucco per me! – Mohammer

+0

La stessa cosa, ha fatto il trucco. – Ben

19

So che questa domanda è stato risposto con successo ma volevo solo mettere i miei cinque centesimi troppo come mi è stato sbattere la testa contro il muro sopra questo un bel paio di volte:

Come la maggior parte delle risposte hanno sottolineato fuori già di solito si tratta di problemi di memoria. Quasi tutto può essere l'ultimo bit che finalmente punta sul "mucchio di memoria" molto simile a uno translateZ o altro.

Tuttavia nella mia esperienza non ha nulla a che fare con il comando CSS (o JS) in specifico. Capita solo che l'ultima transizione sia stata troppo.

Ciò che tende ad aiutarmi molto è quello di mantenere tutto ciò che non è visibile in questo momento sotto display: none. Questo potrebbe sembrare primitivo, ma in realtà fa il trucco. È un modo semplice per dire al renderer del browser che non hai bisogno di questo elemento in questo momento e quindi rilascia la memoria. Ciò consente di creare scroller verticali lunghi miglia con tutti i tipi di effetti 3D purché si nascondano elementi che non si stanno utilizzando in questo momento.

+0

Display: nessuno era la soluzione per me. Grazie – Crerem

+0

come nascondi tutto ciò che non è visibile in quel momento? C'è qualche modo JS per farlo? – bphilipnyc

+0

@bphilipnyc c'è, ma devi gestirlo manualmente. Non esiste un modo semplice per nascondere semplicemente tutti gli oggetti visibili. In sostanza, devi scrivere la logica che tiene traccia di ciò che è sullo schermo e cosa no. Senza conoscere la struttura generale del sito, è difficile dire quale sia il modo più rapido per farlo. – Mathias

0

Ho avuto un problema simile, la pagina Web ha funzionato come un fascino su dispositivi Android e si è bloccata su IOS (iphone e simulatore).

Dopo molte ricerche (utilizzando anche ios_webkit_debug_proxy) ho scoperto che il problema era connesso all'evento jQuery ready.

L'aggiunta di un piccolo timeout ha risolto il problema. La mia applicazione utilizzava anche iframe.

$(document).ready(function() { 
    window.setTimeout(function() { ready(); }, 10); 
}); 
+2

se pronto è una funzione che non accetta argomenti, quindi puoi semplicemente: window.setTimeout (pronto, 10); – Dtipson

+0

Grazie per aver menzionato 'ios_webkit_debug_proxy', questo è un bel progetto! – ken

1

Recentemente ho avuto un problema con Safari Mobile che si infrangono sulle pagine web-app che contengono un sacco di immagini (30+ bastasse) e un paio di trasformazioni per il menu. Dopo un sacco di tentativi ed errori, ho optato per una soluzione simile a quella che fa LinkedIn, ma per lo scrolling infinito usando angularjs. Ho usato requestAnimFrame e due div espansione/restringimento (con attributi di stile js) nella parte superiore e inferiore dell'elenco per rimuovere tutti i contenitori di immagini (con altre cose sovrapposte in alto) ad eccezione di alcuni che sono vicini al viewport. Le prestazioni di scorrimento (native, no js) sono soddisfacenti e il consumo di memoria è sotto controllo.

Problemi correlati