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

Question

我目前正在开发一款基于 JavaScript(纯 js) 的游戏。游戏包含 5 个大 Sprite 表(例如 2861 × 768 和 4096 × 4864)。游戏开始时，所有 5 个 Sprite 表都会预加载到 Canvas 元素中。这 5 个 Sprite 中的 3 个一起代表一个动画，其中每个 Sprite 包含 75 帧。当一个 Sprite 以其动画结束时，我将其隐藏并显示下一个 Sprite 。当第二个 Sprite 完成动画时，我将其隐藏并显示第三个/最后一个。

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

这不是第一次发生的事情，而是经常发生的事情。该动画每 5 分钟重复一次，并且总是会出现小延迟。

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

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

我用来绘制这些动画的渲染器是我自己构建的，并且运行完美，所以这不可能是问题，因为它在 Firefox 中运行得很好。

编辑[2016/03/04]:我用 Canvas 做了一个模式，结果更糟。它落后了很多。并且延迟保持不变。仅在 NW 中，该问题在 Chrome 和 Firefox 中都不会持续存在。

Canvas 模式 - 滞后:

默认(HTML)模式 - 完美运行:

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

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

在 NW 中，当我从 opacity:0.2 切换到 opacity: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

三个图像 Sprite 的大小分别为 14.4MB、14.9MB 和 15.5MB。每个 Sprite 包含 75 帧。

为什么会发生这种情况以及如何防止它发生？

Answer 1

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

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