NW/Node Webkit - Image decodes even if it is already visible

Question

I am currently working on a JavaScript(pure js) based game. The game contains 5 large sprite sheets(e.g. 2861 × 768 and 4096 × 4864). When the game starts, all 5 sprite sheets are preloaded to canvas elements. Three of those 5 sprites represent together one animation, where each sprite contains 75 frames. When one sprite ends with its animation, I hide it and display the next sprite. When the second sprite finishes animating, I hide it and display the third/last one.

When the second or third sprite is about to be displayed, a small delay of 0.5 s - 1 s happens. The image is being decoded.

It is not something that happens just the first time, it is something that happens always. And that animation repeats every 5 minutes, and the small delay happens always.

The reason why I'm using canvas elements for preloading is that I thought WebKit would just throw away decoded images for some time being unused and that the canvas element would prevent WebKit from deleting it from memory. But that does not work.

I've tried almost every optimization I'm aware of. I have even refactored all my CSS by removing descendant selectors etc.

The renderer I'm using to draw those animations is built by myself and it is working perfect, so that could not be the problem, since it is working very well in Firefox.

EDIT [2016/03/04]: I made a mode with canvas and the result is even worse. It laggs a lot. And the delay remains the same. Only in NW, the problem does not persist in Chrome neither in Firefox.

Canvas mode - Lags:

Default(HTML) mode - Works perfect:

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

Note: If i hide those other elements with opacity:0.2 rather than opacity:0, the problem does not happen. But, I can not hide them like that since they remain still visible. They shouldn't be visible. If I add opacity:0.01 it is not visible and the problem does not happen in Chrome, but still persists in NW.

In NW, when I swtich from opacity:0.2 to opacity:1, an image decode is being processed. The same thing does not happen in Chrome browser.

I am using the following version:

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

The three image sprites are 14.4MB, 14.9MB and 15.5MB size. Each sprite contains 75 frames.

Why could this be happening and how can I prevent it?

Answer 1

Try to switch to google-chrome directly since the new nw version is probably released 19.04.2016. After that NW will hopefully keep up with every Chromium release.

You should not have the same problems in Chrome.