畫布尺寸是否適合性能？

Question

製作小遊戲時，出現了與Canvas API有關的一般性能相關問題：我正在清理並僅繪製大型畫布的一個小空間。在這種情況下，畫布的大尺寸是否會減慢性能，或者只繪製像素的數量？例如。是什麼時候改變了整個畫布？

Answer 1

作爲一般的經驗法則，性能受所繪圖像分辨率和畫布大小的影響。但是大多數設備都具有硬件來處理繪圖，並且可以輕鬆刷新顯示屏，並且有足夠的時間用於額外的金光閃閃。

最大的瓶頸是圖形硬件和設備主內存之間的接口。如果所有的圖形都可以裝入設備的GPU內存中，則不會有任何實際的性能問題。但是，如果您開始繪製比圖形內存更多的圖像，則會在設備將數據移入和移出圖形內存時看到性能下降。沒有簡單的方法可以通過javascript知道設備的內存容量。

因此，簡而言之，它不是您繪製的像素數量，而是繪製的唯一像素/圖像的數量。效果可能非常顯着，即使您實際上可能繪製的像素總數較少，在GPU容量上增加1K的額外像素也可以超過幀速率的一半。

縮小個別圖像的大小有助於系統管理資源。而不是一個大的位圖可能不得不被換出來爲一個小位圖騰出空間，將較大的位圖切割成較小的位圖，以便轉換更快。

GPU以像素2,4,8,16,32,64,128，...的塊爲單位工作，並在寬度和高度上以2的冪次方式工作。使用這些尺寸的圖像效率更高。擁有130 * 130像素的圖像實際上可能需要內存中的256 * 256（或256 * 196取決於GPU的類型）像素以存儲在GPU RAM上，而將圖像縮小爲128 * 128將適合整齊而不是腰部GPU RAM 。

不要引用您不使用的模式，字體和SVG圖像也會佔用GPU內存中與其像素大小相關的空間，而不是其實際的內存足跡。不要讓畫布狀態準備好繪製大字體。您可能已經在開始時設置了它，然後不打算再次使用它，但是當該字體坐在那裏準備好繪製時，它正在使用有價值的RAM