Ho eseguito un sacco di numeri su drawi in HTML ng rispetto al disegno su tela. Potrei fare un enorme post sui benefici di ciascuno, ma darò alcuni dei risultati rilevanti dei miei test da considerare per la tua applicazione specifica:
Ho realizzato pagine di test Canvas e HTML, entrambi avevano "nodi" mobili. I nodi Canvas erano oggetti che ho creato e tenuto traccia di in Javascript. I nodi HTML erano <div> s, sebbene potessero essere <image> o <video>.
Ho aggiunto 100.000 nodi a ciascuno dei miei due test. Si sono comportati in modo molto diverso:
La scheda di test HTML ha richiesto un caricamento per sempre (cronometrata a poco meno di 5 minuti, chrome ha chiesto di chiudere la pagina la prima volta). Il task manager di Chrome afferma che la scheda occupa 168 MB. Quando lo guardo, occupa il 12-13% della CPU, lo 0% quando non guardo.
La scheda Canvas è caricata in un secondo e occupa 30 MB. Inoltre, occupa il 13% del tempo di CPU tutto il tempo, indipendentemente dal fatto che lo si guardi o meno.
Trascinando nella pagina HTML è più liscia, che suppongo è previsto, dal momento che la configurazione attuale è quello di ridisegnare TUTTO ogni 30 millisecondi nel test Canvas. Ci sono molte ottimizzazioni da fare per Canvas per questo. (l'invalidazione della tela è la più semplice, anche le regioni di ritaglio, il ridisegno selettivo, ecc.dipende solo da quanto hai voglia di implementare)
Il video sulla pagina HTML, mentre non sto spostando oggetti, è in realtà perfettamente liscio.
Su tela il video è sempre lento, dal momento che sto ridisegnando costantemente perché ho disattivato l'invalidazione della tela di disegno. C'è ovviamente molto spazio per migliorare.
Il disegno/caricamento da solo è lontano da più veloce nella tela e ha molto più spazio per le ottimizzazioni (ad esempio, escludere le cose fuori dallo schermo è molto semplice).
Hai una demo che potresti fornire per ciascuno come esempio? – Steropes