javascript - examples - NW/Node Webkit-La imagen se decodifica incluso si ya está visible
nw.js examples (3)
Dado que mantener el Webkit pensando que la imagen aún se muestra hace que el problema desaparezca (como lo muestra su experimento de opacidad), lo movería casi completamente fuera del área visible, con solo una fila transparente solapada con la ventana gráfica (utilizando el desbordamiento oculto) .
Tenga en cuenta que una hoja de sprite 4000x4000 desempaquetada utilizará 64 Megabytes de RAM (4 bytes (= RGBA) por píxel), por lo que quizás sea mejor asegurarse de que la siguiente imagen se "caliente" un poco antes de tiempo, sin mantener todo de ellos desempaquetado todo el tiempo?
Actualmente estoy trabajando en un juego basado en JavaScript(pure js) . El juego contiene 5 hojas grandes de sprites (por ejemplo, 2861 × 768 y 4096 × 4864). Cuando comienza el juego, las 5 hojas de sprites se cargan previamente en elementos de lienzo. Tres de esos 5 sprites representan juntos una animación, donde cada sprite contiene 75 cuadros. Cuando un sprite termina con su animación, lo escondo y muestro el siguiente sprite. Cuando el segundo sprite termina de animarse, lo escondo y muestro el tercero / último.
Cuando el segundo o tercer sprite está a punto de mostrarse, ocurre un pequeño retraso de 0.5 s - 1 s. La imagen está siendo decodificada.
No es algo que sucede solo la primera vez, es algo que sucede siempre. Y esa animación se repite cada 5 minutos, y el pequeño retraso ocurre siempre.
La razón por la que estoy usando elementos del lienzo para la precarga es que pensé que WebKit simplemente tiraría las imágenes descodificadas por un tiempo sin usar y que el elemento del lienzo evitaría que WebKit las elimine de la memoria. Pero eso no funciona.
He intentado casi todas las optimizaciones que conozco. Incluso he reformulado todo mi CSS eliminando los selectores de descendientes, etc.
El renderizador que estoy usando para dibujar esas animaciones está hecho por mí mismo y funciona perfectamente, por lo que no podría ser el problema, ya que funciona muy bien en Firefox.
EDITAR [2016/03/04]: hice un modo con lienzo y el resultado es aún peor. Se retrasa mucho. Y el retraso sigue siendo el mismo. Solo en NW, el problema no persiste en Chrome ni en Firefox.
Modo predeterminado (HTML) - Funciona perfecto:
Codepen: My renderer http://codepen.io/anon/pen/JXPWXX
Nota: Si oculto esos otros elementos con opacity:0.2 lugar de opacity:0 , el problema no sucede. Pero, no puedo ocultarlos así porque siguen siendo visibles. No deberían ser visibles. Si agrego opacity:0.01 no es visible y el problema no ocurre en Chrome, pero aún persiste en NW.
En NW, cuando cambio de opacidad: 0.2 a opacidad: 1, se está procesando una decodificación de imagen. Lo mismo no sucede en el navegador Chrome.
Estoy usando la siguiente versión:
nw.js v0.12.3
io.js v1.2.0
Chromium 41.0.2272.76
commit hash: 591068b-b48a69e-27b6800-459755a-2bdc251-1764a45
Los tres sprites de imagen son 14.4MB, 14.9MB y 15.5MB. Cada sprite contiene 75 cuadros.
¿Por qué podría estar pasando esto y cómo puedo prevenirlo?
Intente cambiar a google-chrome directamente, ya que la nueva versión de nw probablemente se lanzó el 19.04.2016. Después de eso, espero que NW se mantenga al día con cada lanzamiento de Chromium.
No deberías tener los mismos problemas en Chrome.
Recomiendo usar idata = ctx.getImageData(0, 0, canvas.width, canvas.height) para recuperar la matriz de datos de los lienzos, luego ctx.putImageData(idata, 0, 0) para cambiar entre sprites, en lugar de escondiendo los lienzos.