在Linux上使用Firefox的Canvas2D性能很差 [英] Poor Canvas2D performance with Firefox on Linux

问题描述

当我用Canvas2D做一些相当密集的渲染时，我只是特别难以调试。我使用各种各样的东西，从 globalCompositeOperation 到多个离屏画布，有一些 drawImage 魔术。

I just hit something particularly hard to debug when doing some pretty intensive rendering with Canvas2D. I use all kinds of things, from globalCompositeOperation to multiple off-screen canvases, with some drawImage magic in-between.

它的工作原理很完美，平滑：

It works perfectly fine and smooth on :

• OSX 10.7.5]


• Firefox（18和20 Aurora）[OSX 10.7] .5]


• Chrome（24）[Windows 7]


• li> Chromium（24）[Archlinux，Gnome 3]

• Chrome (26) [OSX 10.7.5]
• Safari (6.0.2) [OSX 10.7.5]
• Firefox (Both 18 and 20 Aurora) [OSX 10.7.5]
• Chrome (24) [Windows 7]
• Firefox (12) [Windows 7]
• Chromium (24) [Archlinux, Gnome 3]

编辑：添加了Windows 7测试。工程为FF12（我有一个旧版本在我的双引导），但是有一个确定的性能命中后升级到FF18。它在Windows上没有像在Linux上一样糟糕，而在OSX上的同一版本无瑕疵。回归可能吗？

Added tests for Windows 7. Strangely enough, it works for FF12 (I had an old version on my dual boot) but there's a definite performance hit after upgrading to FF18. It's not as bad on Windows as it is on Linux though, and the same version on OSX works flawlessly. Regression maybe?

由于某种原因，在Firefox和Linux上（我试过18和20 Aurora），拖曳和渲染时

For some reason, on Firefox and Linux (I tried both 18 and 20 Aurora), I have bad rendering performances when dragging and rendering at the same time.

如果我触发并忘记一个动画，它与Chrome / Safari一样，但是如果我拖动和渲染，我通常最终只有

If I fire-and-forget an animation, it is on par with Chrome/Safari, but if I drag and render, I often end up only seeing the end frame after I release the drag.

• requestAnimationFrame 也不是直接


• 在分析之后，渲染部分的报告时间完全在可接受的范围内（绝对最差时为100ms），并且绝对不会


• 我尝试通过删除一些东西来减少负载，最终报告的渲染时间低于15ms，但我看到的没有改变。 li>
  

• Neither requestAnimationFrame nor a direct rendering on the mouse event handler work.
• After profiling, the reported timings for the rendering parts are well within the range of acceptable (up to 100ms at the absolute worst), and definitely do not correspond to what I see on the screen.
• I tried reducing the load by removing some stuff, ending up with reported render times under 15ms, but what I saw didn't change.

令人困惑的是，它几乎在除了之外的其他任何地方在Linux上使用Firefox。关于我应该在哪里，错误报告或解决我的问题的任何想法？

What baffles me is that it works almost everywhere else except with Firefox on Linux. Any idea as to where I should look, a bug report or a solution to my problem?

推荐答案

我想我知道你在哪里应该看起来基于这样：

I think I know where you should look based on this:

如果我触发并忘记一个动画，它与Chrome / Safari相同，但如果我拖动和渲染，我通常只是在我释放拖动后看到结束帧。

If I fire-and-forget an animation, it is on par with Chrome/Safari, but if I drag and render, I often end up only seeing the end frame after I release the drag.

Canvas实现具有双缓冲内置功能，您可以在任何浏览器上看到它在一个简单的例子中这一个： http://jsfiddle.net/simonsarris/XzAjv/ （使用 setTimeout vs多余的工作，说明清除不会马上发生）

Canvas implementations have double-buffering built in. You can see it in action on any browser in a simple example like this one: http://jsfiddle.net/simonsarris/XzAjv/ (which uses a setTimeout vs extra work to illustrate that clearing does not happen right away)

实现尝试通过渲染它来延迟所有渲染一个内部位图，然后立即（在下一个暂停）将其渲染到画布。这会在重画一个场景之前清除画布时停止闪烁效果，这是好的。

The implementations try to delay all rendering by rendering it to an internal bitmap, and then all at once (at the next pause) render it to the canvas. This stops the "flickering" effect when clearing a canvas before redrawing a scene, which is good.

但是在Linux Firefox中似乎有一个普通的老错误。在你的拖动和渲染它似乎没有更新的画布，可能试图缓冲，但似乎是这样做时，它不应该。这将解释为什么它在火和忘记的情况下工作。

But it seems there's a plain old bug in the Linux Firefox. During your drag and render it seems to not be updating the canvas, probably in an attempt to buffer, but seems to be doing so when it should not be. This would explain why it works in fire-and-forget scenarios.

所以我认为一个错误报告是有序的。我没有任何linux机器躺在那里，所以我不能重现它，并提交自己，以确定虽然，对不起。

So I think a bug report is in order. I haven't got any linux machines lying around so I can't reproduce it and submit something myself to be certain though, sorry.

这是回复一个注释：您可以在鼠标移动期间将绘图部分分派到一个小计时器。

This is in reply to a comment: You could, during the mouse move, dispatch the drawing portion to a tiny timer.

例如：

// 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);

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

There isn't such a method, its totally hidden. What you could do is, during mouse move, dispatch

这篇关于在Linux上使用Firefox的Canvas2D性能很差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！