畫布層…什么是性能效果？

Question

我很好奇，如果在html中在canvas上使用canvas會完全影響性能？

我的想法是將任何靜止的東西放在一塊畫布上，然后將任何移動的東西放在另一塊畫布上……有效地減少了重畫的次數。

由於我不需要重繪靜止的任何東西，因此最好不要一直清除並重繪它。 所以我想在畫布上放一塊畫布...但是不確定這是否會導致某種形式的性能下降？

有沒有人做過基准測試？

Answer 1

我擔心這可能會成為一個非常細微的問題，我恐怕會給您提供一個通用基准以告訴您執行此操作-或因為您應該始終始終對自己的應用程序代碼進行基准測試，以查看在哪里更快或更慢。 一旦您的產品完成，無論您選擇哪種方式，我都敦促您以其他方式重新構建它，並進行實際的基准測試。

使用jsperf輕松設置一個測試，該測試將一個畫布上的繪圖背景+前景與一個畫布上的繪圖背景僅進行一次比較，然后在第二個畫布上繪制前景。

如果您在背景和前景中繪制大致相同數量的內容，那么我認為您會希望看到單個畫布比使用兩個畫布慢大約50％。

確實，這就是您所看到的：

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

---

但是請稍等一下。 您有固定背景嗎？ 為什么要使用兩個畫布？ 為什么不將該背景設置為PNG並將其設置為一個畫布的CSS background-image並完成呢？ 這樣會更快，並且將使DOM的混亂程度降低，並且您將完全避免這個問題！

您應該注意，您擁有的層數不一定能很好地縮放。 畫布是DOM對象，接觸DOM的速度很慢，因此定位和使用30個畫布（共30層）會造成很大的損失。 有一些畫布使用圖層變得不那么值得了，但是該數量通常比5個要高。如果您計划使用5個以上的畫布，我強烈建議您使用自己的基准進行基准測試代碼看哪個值得。 IE9探查器和JSperf都給出了很好的結果（跨瀏覽器編號的JSperf和IE9精確占用時間的詳細信息）。