Webkit NW/Node - L'immagine viene decodificata anche se è già visibile

Question

Attualmente sto lavorando a un gioco basato su JavaScript(pure js). Il gioco contiene 5 grandi fogli di sprite (ad esempio 2861 × 768 e 4096 × 4864). All'inizio del gioco, tutti e 5 i fogli sprite sono precaricati su elementi canvas. Tre di quei 5 sprite rappresentano insieme un'animazione, in cui ogni sprite contiene 75 fotogrammi. Quando uno sprite termina con la sua animazione, lo nascondo e mostro il prossimo sprite. Quando il secondo sprite finisce di animare, lo nascondo e visualizzo il terzo/ultimo.

Quando il secondo o il terzo sprite sta per essere visualizzato, si verifica un piccolo ritardo di 0,5 s - 1 s. L'immagine viene decodificata.

Non è qualcosa che accade solo la prima volta, è qualcosa che succede sempre. E quell'animazione si ripete ogni 5 minuti e il piccolo ritardo si verifica sempre.

Il motivo per cui utilizzo gli elementi canvas per il precaricamento è che pensavo che WebKit avrebbe semplicemente gettato via le immagini decodificate per qualche tempo non utilizzato e che l'elemento canvas avrebbe impedito a WebKit di cancellarlo dalla memoria. Ma questo non funziona.

Ho provato quasi tutte le ottimizzazioni di cui sono a conoscenza. Ho anche rifattorizzato tutti i miei CSS rimuovendo selettori discendenti ecc.

Il renderer che sto usando per disegnare quelle animazioni è costruito da me stesso e funziona perfettamente, quindi non potrebbe essere il problema, dal momento che sta funzionando molto bene in Firefox.

MODIFICA [2016/03/04]: Ho creato una modalità con tela e il risultato è ancora peggiore. Si assesta molto. E il ritardo rimane lo stesso. Solo in NW, il problema non persiste in Chrome né in Firefox.

modalità Canvas - Ritardi:

Modalità predefinita (HTML) - funziona perfettamente:

Codepen: mio renderer http://codepen.io/anon/pen/JXPWXX

Nota: Se mi nascondo quelle altre elementi con opacity:0.2 anziché opacity:0, il problema non si verifica. Ma, non posso nasconderli così poiché rimangono ancora visibili. Non dovrebbero essere visibili. Se aggiungo opacity:0.01 non è visibile e il problema non si verifica in Chrome, ma persiste ancora in NW.

In NW, quando si passa dall'opacità: 0,2 all'opacità: 1, viene elaborata una decodifica dell'immagine. La stessa cosa non accade nel browser Chrome.

Sto usando la seguente versione:

nw.js v0.12.3 
io.js v1.2.0 
Chromium 41.0.2272.76 
commit hash: 591068b-b48a69e-27b6800-459755a-2bdc251-1764a45 

I tre sprite di immagine sono 14.4MB, 14,9 MB e la dimensione 15.5MB. Ogni sprite contiene 75 frame.

Perché questo potrebbe accadere e come posso impedirlo?

Answer 1

Provare a passare direttamente a google-chrome poiché la nuova versione di nw è stata rilasciata il 19.04.2016. Dopo di ciò, speriamo che NW continui a seguire tutte le versioni di Chromium.

Non dovresti avere gli stessi problemi in Chrome.

Answer 2

Si consiglia di utilizzare idata = ctx.getImageData(0, 0, canvas.width, canvas.height) per recuperare l'array di dati dalle tele, quindi ctx.putImageData(idata, 0, 0) per passare da sprite, anziché nascondere le tele.

Answer 3

Dato che mantenere il Webkit pensando che l'immagine sia ancora visualizzata, il problema scompare (come mostra l'esperimento di opacità), lo sposterei quasi completamente fuori dall'area visibile, con solo una singola riga trasparente che si sovrappone al viewport (utilizzando overflow nascosto).

Si noti che un foglio sprite spacchettato 4000x4000 utilizzerà 64 megabyte di RAM (4 byte (= RGBA) per pixel), quindi forse potrebbe essere meglio assicurarsi che l'immagine successiva si "scaldi" un po 'prima del tempo , senza tenerli tutti disfatti per tutto il tempo?