Javascript 画布层。。。什么是绩效效应？

我很好奇，在html中使用画布之上的画布是否会影响性能

我的想法是把任何静止的东西放在一张画布上，然后把任何移动的东西放在另一张画布上。。。有效地减少发生的重绘量

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

---

有人做过这方面的台架测试吗？

这可能会成为一个非常微妙的问题，我担心会给你一个通用的基准，告诉你要做什么，或者因为你应该始终对你自己的应用程序代码进行基准测试，看看它在哪里更快或更慢。一旦您的产品完成，无论您选择哪种方式，我敦促您以另一种方式重新构建它，并进行真正的基准测试，然后查看

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

如果你在背景和前景中绘制大致相同数量的东西，那么我认为你会看到单个画布比使用两个画布慢50%

事实上，这就是你所看到的：

---

但是，请等一下电话。你有静态背景吗？那为什么要用两张画布呢？为什么不将该背景设置为PNG，并将其设置为一个画布的CSS

背景图像

，然后使用它呢？这会更快，而且会使DOM更不混乱，而且您将完全避免这个问题

---

您应该注意，您拥有的层的数量不一定能够很好地缩放。画布是DOM对象，触摸DOM的速度很慢，因此定位和使用30个画布作为30个层将要付出代价。在一些画布上，使用图层变得不值得，但这个数字通常高于，比如说，5。如果您计划使用5个以上的画布，我强烈建议您使用自己的代码进行自己的基准测试，看看哪个是值得的。IE9 profiler和JSperf都提供了非常好的结果（JSperf在跨浏览器的数字中，IE9在消耗时间的细节中）。

我认为您可以将较小画布的上下文复制到较大画布上，它应该比将绝对定位的

canvas

元素覆盖在其他“canvas”元素上要快。目前，canvas分层已成功应用于少数画布库中，如Fabric.js（我是作者）和Kinetic.js。它确实允许通过分离渲染来加快速度。例如，在Fabric.js中，对象选择在顶层绘制，所有对象在底层绘制。这样，无论画布上有多少对象（以及这些对象有多复杂），对象选择都同样快速。感谢您的回复，目前背景是静态的，但我不打算在将来保持这种状态。我只是想先想想。但什么定义了基准？FPS？CPU使用率或内存使用率或三者的组合：S我使用请求动画帧，在所有浏览器中似乎限制为30 FPS。