Canvas图层...什么是性能效果？

我很好奇，如果在canvas上使用画布'在html中会影响性能？Canvas图层...什么是性能效果？

我的想法是将任何东西静止放置在一个画布中，然后在另一个画布中移动任何东西......有效减少重绘的次数。

因为我不需要重绘任何固定的东西，所以不要清理它并重新绘制它是明智的。所以我想把画布放在画布上......但不确定这是否会导致某种性能下降？

有没有人对此做过台架测试？

2012-03-17 Sir

我认为你可以将较小的画布上下文复制到较大的画布上，并且应该比在其他“画布”元素顶部叠加绝对定位的“画布”元素更快。 – c69 2012-03-17 08:57:32

Canvas分层正被成功地用于少数画布库 - Fabric.js（我是作者）和Kinetic.js。它确实允许通过分离渲染来加速事情。例如，在Fabric.js中，对象选择绘制在顶层上，所有对象都绘制在底层上。这样，无论画布上存在多少个对象（以及这些对象的复杂程度），对象选择都同样快速。 – kangax 2012-03-17 11:30:30

这可能会成为一个非常细微的问题，我担心给你一个通用的基准，告诉你要么做 - 要么因为你应该总是基准你自己的应用程序的代码，看看它可能会更快，或者比较慢。一旦你的产品完成了，无论你选择哪一种方式，我都会敦促你以另一种方式重建它，并且做一个真正的基准测试并看看。

它很容易使用jsperf来设置一个测试，比较一个画布上的绘制背景+前景与一个画布上的背景绘制一次，然后在第二个画布上绘制前景。

如果您在背景和前景中绘制的东西大致相同，那么我认为您会希望单画布比使用两个画布慢50％左右。

事实上这就是你看到：

http://jsperf.com/one-vs-two-canvases

但拿着手机一秒钟。你有一个静态背景？为什么要使用两个画布呢？为什么不把这个背景设置为PNG并将其设置为一个画布的CSS background-image并且完成它？这会更快，并且会使DOM不那么混乱，你完全可以避免这个问题！

您应该注意，您拥有的图层数量不一定很好。画布是DOM对象，触摸DOM速度很慢，所以定位和使用30个画布作为30层将会产生收费。有一些画布使用图层的价值不大，但是这个数字通常高于5。如果你计划使用5个以上的画布，我强烈建议你自己做一个基准测试代码看看哪个值得。 IE9分析器和JSperf都给出了非常好的结果（JSperf在跨浏览器中的数字和IE9中详细描述了什么是消耗时间）。

来源

2012-03-18 02:02:42

感谢您的回复，目前背景是静态的，但我不打算在未来保持这种状态。我只是想提前思考。但是什么定义了一个基准？ FPS？ CPU使用率或内存使用率或所有3的组合？：S我使用请求动画帧，无论如何，它似乎在所有浏览器中都限制为30 FPS。 – Sir 2012-03-18 02:08:55

Canvas图层...什么是性能效果？

回答

相关问题