È meglio avere una grande tela o fino a 100 tele di piccole dimensioni generate dinamicamente?

Sto lavorando su un simulatore di dadi web mobile. Il prototipo iniziale è qui: http://dicewalla.com È meglio avere una grande tela o fino a 100 tele di piccole dimensioni generate dinamicamente?

Attualmente ho una grande tela in cui disegno tutti i dadi. Sto pianificando di riscrivere il codice in modo che sia più MVC e più facile da aggiornare. Penso che sarebbe più facile per me generare una piccola tela per ogni oggetto che muore che disegnare tutti i dadi sulla grande tela e continuare ad aggiornare quella grande tela.

La mia domanda è se c'è un brutto colpo di prestazioni nel fare in modo che il browser crei molte piccole tele contro una grande. È difficile testare localmente, speravo che qualcuno qui potesse sapere qual è la migliore pratica.

fonte

2012-08-09 Ben Brophy

stai usando setInterval per controllare l'animazione sulla tua nuova build? Ho questa stessa domanda. Anche se, nel mio caso, ho un'animazione costante che viene controllata da setInterval. Avere diversi setIntervals su una pagina sarebbe decisamente meno desiderabile di avere tutte le animazioni su una tela, quindi l'approccio alla singola tela sembra un approccio più efficiente. – Joel

Direi, usare 6 oggetti di tela per disegnare i lati e quindi usarli come immagini di sfondo per i dadi tirati. C'è un enorme numero di tele in quanto non modifichi le grafiche in seguito. Diamine, potresti farlo anche senza la tela completamente, andando solo per gradienti radiali e div stile. –

Follow-up - Ho provato entrambi gli approcci. Anche se non ho misurazioni esatte, utilizzo più tele preformate notevolmente migliori. Non sto usando le animazioni, semplicemente ridisegnando le tele quando si fa clic su un pulsante. –

Più tele di solito consentono prestazioni migliori in quanto è possibile re-rendering in modo selettivo.

Se si dispone di una sola area di lavoro e si desidera aggiornare un dado, in genere è necessario ridisegnare l'intera area di disegno. D'altra parte, più tele ti permettono di aggiornare solo i dadi che devono essere ridisegnati. Questo è un aumento di efficienza.

Inoltre, non si dovrebbe vedere alcuna differenza notevole in carico 1 tela contro 100.

fonte

2012-08-09 13:36:24

Questo è di grande aiuto, grazie. Aggiornerò solo i dadi selezionati a volte. –

In termini di prestazioni, come è stato accennato in precedenza, ci dovrebbe essere poca differenza tra 1-100 elementi canvas se' non aggiornare la grafica su base regolare. (ad esempio: grafica statica/nessuna animazione)

La maggior parte dei riferimenti in rete relativi a più tele tendono a trattare casi in cui si hanno più livelli e occorre gestire il disegno sopra altre cose con trasparenza.

Detto ciò, quello che stai facendo con dicewalla non sembra che otterrà nulla dall'avere più tele.

Inoltre è possibile ridisegnare in modo selettivo le regioni di un singolo canvas per ottenere prestazioni migliori se l'aggiornamento dell'intero canvas è un collo di bottiglia. Ciò offre i vantaggi in termini di prestazioni di avere più tele senza dover gestire la gestione e la creazione di tali elementi.

fonte

2012-08-09 14:22:41 joekarl

Grazie. Gli aggiornamenti avverranno solo quando un utente agisce (ad esempio seleziona alcuni dei dadi da ripetere, senza toccare gli altri). Basandoti sulla tua risposta e su quella di @depot, sembra che non importi troppo il modo in cui lo faccio. Aggiungere eventi di tocco a singole tele è più facile per me codificarmi piuttosto che capire quali dadi sono stati toccati usando le coordinate x e y su una grande tela, quindi mi sto appoggiando a più tele. –

È meglio avere una grande tela o fino a 100 tele di piccole dimensioni generate dinamicamente?

risposta

Problemi correlati