我很好奇,如果在画布顶部使用画布’在html中会影响性能吗？

我的想法是将任何东西固定在一个画布上,然后在另一个画布中移动任何东西……有效地减少了重绘的数量.

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

有没有人对此进行过台架测试？

最佳答案 这可能会成为一个非常微妙的问题,我担心会给你一个通用基准,告诉你做任何一个 – 或者因为你应该总是对你自己的应用程序的代码进行基准测试,看看它可能更快或更慢.一旦你的产品完成,无论你选择哪种方式,我都敦促你以另一种方式重建它,并做一个真正的基准测试,看看.

使用jsperf可以轻松地设置一个测试,将一个画布上的绘制背景前景与一个画布上的绘制背景进行一次比较,然后在第二个画布上绘制前景.

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

确实这就是你所看到的：

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

但拿着电话一秒钟.你有静态背景吗？为什么要使用两幅画布呢？为什么不将该背景设为PNG并将其设置为一个画布的CSS背景图像并完成它？那会更快,它会让DOM变得更乱,你完全避免这个问题！

您应该注意,您拥有的图层数量不一定能够很好地扩展.画布是DOM对象,触摸DOM的速度很慢,因此定位和使用30个画布作为30层将会造成损失.有一些画布使用图层变得不那么值得,但这个数字通常高于,比如说5.如果你计划使用超过5幅画布,我强烈建议你自己做基准测试.代码,看看哪个是值得的. IE9探查器和JSperf都给出了非常好的结果(跨浏览器数字中的JSperf和IE9详细说明了正在耗费的时间).