NW / Node Webkit - 图像解码，即使它已经可见

Question

我目前正在开发基于JavaScript(pure js)的游戏。该游戏包含5个大型精灵表（例如2861×768和4096×4864）。游戏开始时，所有5个精灵表都预先加载到画布元素。这5个精灵中的三个一起表示一个动画，其中每个精灵包含75个帧。当一个精灵以其动画结束时，我隐藏它并显示下一个精灵。当第二个精灵完成动画时，我隐藏它并显示第三个/最后一个。

当即将显示第二个或第三个精灵时，会发生0.5秒-1秒的小延迟。图像正在被解码。

这不是第一次发生的事情，它始终是发生的事情。并且该动画每5分钟重复一次，并且总是发生小延迟。

我使用canvas元素进行预加载的原因是我认为WebKit会丢弃解码图像一段时间未使用，而canvas元素会阻止WebKit将其从内存中删除。但这不起作用。

我已经尝试了几乎所有我所知道的优化。我甚至通过删除后代选择器等来重构我的所有CSS。

我用来绘制这些动画的渲染器是由我自己构建的，它工作得很完美，所以这不是问题，因为它在Firefox中工作得非常好。

编辑[2016/03/04]： 我用画布制作了一个模式，结果更糟。它落后很多。而延迟仍然是一样的。仅在NW中，Chrome中的问题并不存在。

画布模式 - 拉格：

默认（HTML）模式 - 完美的作品：

Codepen：我的渲染器http://codepen.io/anon/pen/JXPWXX

注意：如果我使用opacity:0.2而不是opacity:0隐藏其他元素，则问题不会发生。但是，我无法隐藏它们，因为它们仍然可见。它们不应该是可见的。如果我添加opacity:0.01，则该内容不可见，并且问题不会在Chrome中发生，但仍会在NW中出现。

在NW中，当我从不透明度开始：0.2到不透明度：1时，正在处理图像解码。在Chrome浏览器中也不会发生同样的事情。

我使用的是以下版本：

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

三个图像精灵分别为14.4MB，14.9MB和15.5MB。每个精灵包含75帧。

为什么会发生这种情况，我该如何预防？

Answer 1

考虑到保持Webkit认为仍然显示图像会使问题消失（正如您的不透明度实验所示），我将它几乎完全移出可见区域，只有一个透明行与视口重叠（使用溢出隐藏）。

请注意，解压缩的4000x4000精灵表将使用64兆字节的RAM（每个像素4个字节（= RGBA）），因此可能更好的是确保下一个图像提前“预热”一点，没有让所有人一直打开包装？

Answer 2

尝试直接切换到google-chrome，因为新的nw版本可能已于2016年4月19日发布。之后NW将有望跟上每个Chromium的发布。

您在Chrome中不应该遇到同样的问题。

Answer 3

我建议使用idata = ctx.getImageData(0, 0, canvas.width, canvas.height)从画布中检索数据数组，然后ctx.putImageData(idata, 0, 0)在精灵之间切换，而不是隐藏画布。