画布层...性能影响是什么？

Question

画布层...性能影响是什么？

javascripthtmlcanvas

5

我想知道在HTML中使用叠加画布是否会影响性能？

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

由于我不需要重新绘制任何静止的东西，因此明智的做法是不要清除它并重新绘制它。所以我想在一个画布上放置另一个画布...但不确定这是否会导致某种性能下降？

有人对此进行过基准测试吗？

- Sir

我认为你可以将较小画布的内容复制到较大的画布上，这样比在其他“画布”元素的顶部叠加绝对定位的“画布”元素要快。 - c69

画布分层目前在一些画布库中得到成功应用，比如我自己创作的 Fabric.js 和 Kinetic.js。它确实能够通过分离渲染来提高速度。例如，在 Fabric.js 中，对象选择会被绘制在顶部图层，而所有对象则绘制在底部图层。这样一来，无论画布上有多少对象（以及这些对象有多复杂），对象选择的速度都是一样快的。 - kangax

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Sarris · Accepted Answer

这可能是一个非常微妙的问题，以至于我担心给出一个通用的基准来告诉你该做什么，因为你应该始终对自己应用程序的代码进行基准测试，以查看它在哪里可能更快或更慢。一旦你的产品完成，无论你选择哪种方式，我都建议你另一种方式重建它，并进行真正的基准测试并查看结果。

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

如果你在背景和前景中大致绘制相同数量的内容，那么我认为你会预计单画布比使用两个画布慢约50％。

实际上就是这样：

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

但请稍等一下。您有一个静态背景吗？为什么要使用两个画布呢？为什么不将该背景制作成PNG并将其设置为一个画布的CSS background-image，这样就可以完成了呢？这样会更快，并且会使DOM更加整洁，您还可以避免这个问题！您应该注意到，您拥有的图层数量不一定会很好地扩展。画布是DOM对象，而触摸DOM是很慢的，所以对于位置和使用30个画布作为30个图层来说，这将会产生一定的影响。有一些画布数量，当使用图层时变得不那么值得，但是这个数字通常比5要高。如果您计划使用超过5个画布，我强烈建议您使用自己的代码进行基准测试，以查看哪种方法更值得。IE9分析器和JSperf都提供非常好的结果（JSperf提供跨浏览器数字和IE9提供详细信息，说明究竟是什么在占用时间）。