Canvas vs DOM - Qual è il metodo di visualizzazione delle immagini più efficiente in HTML5?

Question

utenti StackOverflow

Pur facendo un'applicazione HTML5/sito web, per tali casi, come una galleria di immagini, in cui vengono visualizzati un gran numero di immagini in sequenza o contemporaneamente nel browser, è l'uso dell'elemento canvas giustificato ?

Finché si tratta solo di presentare un'immagine, è possibile utilizzare una tela e disegnare l'immagine su di essa anziché utilizzare l'elemento DOM < img> tag? Ci saranno anche alcune manipolazioni dell'immagine, come trasformazioni CSS3/spostamento/ridimensionamento/zoom e riconoscimento dei gesti (trascinamento, tocco/tocco, forse pizzico, ecc.) Che, per quanto ne so, sono applicabili sia alla tela che al tag img.

Sarebbe anche importante mantenere le cose il più "html5" -ish possibile e tenendo conto anche delle prestazioni. Ad esempio, sarebbe importante se in futuro l'elemento canvas fosse sempre più utilizzato e ottimizzato dai browser e sarebbe importante anche se per il momento lo < img> sia molto più veloce.

Poiché stiamo considerando lo sviluppo di un'applicazione html5 universale, lavorando su desktop e anche su dispositivi mobili, le prestazioni e la velocità sono un fattore molto importante. Tuttavia, i test di confronto su tela e < img erano rivolti principalmente ai browser game javascript. In questo caso, l'animazione non è così importante come il consumo di memoria e le prestazioni generali.

Esistono risorse/studi relativi a questo aspetto particolare?

Answer 1

UseCanvas = NeedCanvas ? true : false 

Non hai davvero bisogno di tele per questa operazione, e ci vorrà più tempo per svilupparlo con la tela perché è molto più complicato.

L'utilizzo dei tag <img> con javascript non solo aumenterà la compatibilità, ma anche la velocità e l'accessibilità - assolutamente tutto con un browser può eseguire CSS e Javascript. Inoltre ci sono anche fattori SEO, sono abbastanza sicuro che le immagini in una tela non vengano indicizzate.

Non utilizzare la tecnologia HTML5 per l'utilizzo della tecnologia HTML5. Quando vuoi iniziare a deformare le immagini e farle disegnare dall'utente in modo che tu possa esportare/salvare, è lì che hai bisogno di tela.