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圖層...什麼是性能效果？

回答

相關問題