2010-05-27 7 views
11

Sto sviluppando un'applicazione jQtouch e ogni richiesta fatta tramite ajax crea un nuovo div nel documento per il contenuto caricato. Viene mostrato un solo div in qualsiasi momento.quante div puoi avere prima che il dom rallenti e diventi instabile?

Quanti div posso avere prima che l'app inizi a non rispondere e a rallentare?

Qualcuno ha qualche idea in merito?

EDIT: La sua un app iPad in esecuzione su Safari, e sarebbe meno di 1000 div con un contenuto molto di base

+6

Test. Allora lo saprai. –

risposta

7

Per essere onesti, se davvero hai bisogno di una risposta assoluta a questa domanda, allora potresti voler riconsiderare il tuo design.

Nessuna risposta fornita qui sarà corretta, in quanto dipende da molti fattori specifici della vostra applicazione. Per esempio. pesantemente contro il piccolo uso di CSS, dimensione dei div, quantità di rendering grafico richiesto per div, browser di destinazione/piattaforma, numero di ascoltatori di eventi DOM ecc.

Solo perché è possibile non significa che si dovrebbe ! :-)

1

senza definire un ambiente particolare, non è possibile rispondere alla tua domanda.

E anche allora, tutto ciò che qualcuno ti dice è solo una supposizione. Devi fare i tuoi test su configurazioni del mondo reale con diversi browser e hardware. Dovrai anche stabilire alcuni parametri di riferimento delle prestazioni per decidere cosa significa "troppo lento".

15

Ho avuto decine di migliaia, forse anche centomila div, sullo schermo in una sola volta. La prestazione è soddisfacente o negativa a seconda di:

Analizzato da HTML o generato dinamicamente in JavaScript?

Analizzato da HTML significa che si dispone di un sorgente HTML molto grande, e questo può rendere i browser bloccati. Generato in JS è sorprendentemente veloce, anche su Internet Explorer, che è il più lento di tutti i browser per JS.

+0

Interessante ... ha senso, ma nella mia esperienza, niente congela il browser come un sacco di javascript. Quindi la sfida è quella di interrompere lo script di generazione e assicurarsi che ceda all'interfaccia utente nel mezzo. – harpo

+0

Infatti JS analizzato è sorprendentemente veloce! –

6

Come altri hanno già detto, non c'è davvero nessuna risposta.

Tuttavia, in questo parlare della API di Google Maps versione 3, l'altoparlante porta il numero ten thousand diverse volte, come una soglia di base per il browser infelicità.

http://code.google.com/apis/maps/documentation/javascript/

+4

Proviene dal Tao senza nome // Che il Cielo e la Terra siano nati // Il nome è ma // La Madre delle diecimila creature. –

0

Sono stato in grado di aggiungere diverse migliaia di div senza un problema. Dipende da cosa farai in seguito, ovviamente, e dalla memoria sul computer client. Tutti gli altri hanno ragione su questo.

Come diceva Harpo, il 10 K è probabilmente un buon soffitto. Una volta ho notato problemi di velocità a partire da circa 4K div, ma l'hardware è migliorato da allora.

E, come ha detto Neil N, aggiungere i div tramite script è meglio che avere un'enorme fonte HTML.

E, per rispondere al commento di Harpo, un modo per "interromperlo" in modo che JS non blocchi la pagina e produca un errore "la pagina sta lentamente" è quello di chiamare un timer alla fine di ogni "add" una "div" di routine, e il timer a sua volta chiama di nuovo la funzione "aggiungi un div".

Ora, la mia domanda è: è possibile "dipingere" in modo da non dover aggiungere migliaia di div? Questo può essere fatto con il tag canvas con alcuni browser, ma non penso sia possibile con VML (il progetto excanvas) su IE. O è? Penso che VML "dipinga" aggiungendo nuovi elementi al DOM, a quel punto si può anche usare DIV, a meno che non sia una forma semplice.

È possibile modificare la fonte di un'immagine tramite script? (l'immagine nel DOM, ovviamente - non l'immagine originale sul server.)

Problemi correlati