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

尝试直接切换到 google-chrome，因为新的 nw 版本可能会在 2016 年 4 月 19 日发布。之后，NW 希望能够跟上每个 Chromium 版本的步伐。

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