代码之家 › 专栏 › 技术社区 › Darko RiÄiÄ

NW/节点Webkit-即使图像已经可见,也会进行解码

large-files node-webkit html5-canvas performance javascript

19

Darko RiÄiÄ · 技术社区 · 8 年前

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

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

这不是第一次发生的事情,而是总会发生的事情。动画每5分钟重复一次,小延迟总是发生。

我之所以使用canvas元素进行预加载,是因为我认为WebKit会在一段时间内丢弃未使用的解码图像,而canvas会阻止WebKit从内存中删除它。但这行不通。

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

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

编辑[2016/03/04]: 我用画布做了一个模式,结果更糟。它落后了很多。而且延迟时间保持不变。只有在西北地区,这个问题在Chrome和Firefox中都不存在。

画布模式-滞后:

默认(HTML)模式-完美工作:

代码笔: 我的渲染器 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帧。

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

3 回复 | 直到 8 年前

1

swolfish 8 年前

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

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

2

1

Stefan Haustein 8 年前

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

请注意,一个解压缩的4000x4000小精灵工作表将使用64兆字节的RAM(每像素4字节(=RGBA)),因此,也许最好确保下一个图像提前“预热”一点,而不必一直解压缩所有图像?

3

0

aecend 8 年前

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