Linux上的Firefox使用Canvas2D表现不佳

Question

在使用Canvas2D做一些相当密集的渲染时,我只是特别难以调试.我使用各种各样的东西,从globalCompositeOperation多个屏幕外画布,中间有一些drawImage魔法.

它的工作完美无缺:

• Chrome(26)[OSX 10.7.5]
• Safari(6.0.2)[OSX 10.7.5]
• Firefox(18和20极光)[OSX 10.7.5]
• Chrome(24)[Windows 7]
• Firefox(12)[Windows 7]
• 铬(24)[Archlinux,Gnome 3]

编辑:为Windows 7添加了测试.奇怪的是,它适用于FF12(我的双启动时有旧版本),但升级到FF18后有一定的性能影响.它在Windows上并不像在Linux上那么糟糕,而且OSX上的相同版本完美无瑕.回归可能吗？

出于某种原因,在Firefox和Linux上(我尝试了18和20 Aurora),在同时拖动和渲染时我的渲染性能很差.

如果我发射并忘记动画,它与Chrome/Safari相同,但如果我拖动并渲染,我经常最终只能在释放拖动后看到结束帧.

• requestAnimationFrame鼠标事件处理程序上的直接呈现都不起作用.
• 在分析之后,报告的渲染部分的时序在可接受的范围内(在绝对最差的情况下最多100ms),并且绝对不符合我在屏幕上看到的内容.
• 我尝试通过删除一些东西减少负载,最终报告的渲染时间低于15ms,但我看到的并没有改变.

令我感到困惑的是,除了 Linux上的Firefox 之外,它几乎可以在其他任何地方使用.知道我应该在哪里看,错误报告或我的问题的解决方案？

Answer 1

我想我知道你应该根据这个看哪里：

如果我“即发即忘”动画，它与 Chrome/Safari 相当，但如果我拖动并渲染，我通常在释放拖动后只能看到结束帧。

这可能是Linux 上 Firefox 的双缓冲错误。

Canvas 实现内置了双缓冲。您可以通过一个简单的示例在任何浏览器上看到它的运行情况，如下所示： http: //jsfiddle.net/simonsarris/XzAjv/（它使用setTimeoutvs 额外的工作来说明清除确实不会立即发生）

这些实现尝试通过将其渲染到内部位图来延迟所有渲染，然后一次（在下一次暂停时）将其渲染到画布。这可以在重新绘制场景之前清除画布时停止“闪烁”效果，这很好。

但 Linux Firefox 中似乎存在一个明显的老错误。在拖动和渲染期间，它似乎没有更新画布，可能是为了尝试缓冲，但似乎在不应该更新的情况下这样做。这可以解释为什么它在“即发即忘”场景中有效。

所以我认为错误报告是适当的。我周围没有任何 Linux 机器，所以我无法复制它并自己提交一些东西来确定，抱歉。

这是对评论的回复：您可以在鼠标移动期间将绘图部分分派给一个小计时器。

例如：

// The old way
theCanvas.addEventListener('mousemove', function() {
  // if we're dragging and are redrawing
  drawingCode();
}, false);

// The new way
theCanvas.addEventListener('mousemove', function() {
  // if we're dragging and are redrawing

  // in 1 millisecond, fire off drawing code
  setTimeout(function() { drawingCode(); }, 1);
}, false);

没有这样的方法，它完全隐藏。你可以做的是，在鼠标移动期间，调度