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.Webkit NW/Node - L'immagine viene decodificata anche se è già visibile
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à 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?
Si noti che ciò si verifica solo in Node Webkit. Funziona perfettamente in Chrome. –
Hai guardato il netturbino? Sembra che sia in esecuzione il garbage collector che sta causando la pausa. O il modo in cui hai a che fare con le tele o forse il tuo renderer sta creando più spazzatura di quanto pensi. – Bill
Potresti condividere del codice o metterlo su [JsFiddle] (https://jsfiddle.net/)? –