画布尺寸对性能至关重要吗?

时间:2015-10-16 14:00:48

标签: html5 performance canvas jsperf

在构建一个小游戏时,出现了一个与Canvas API有关的一般性能相关问题:我正在清理和绘制一个大画布的小空间。在这种情况下,画布的大尺寸是否会降低性能,或者仅绘制的像素数量是否重要?例如。当某些东西发生变化时,整个画布会重新绘制吗?

1 个答案:

答案 0 :(得分:2)

作为一般经验法则,性能取决于您绘制的图像的分辨率和画布的大小。但是大多数设备都有硬件来处理绘图,并且可以轻松刷新他们使用的显示器,并有足够的时间用于额外的钻孔。

最大的瓶颈是图形硬件和设备主存之间的接口。如果您的所有图形都适合设备的GPU内存,那么您将不会遇到任何真正的性能问题。但是,如果您开始绘制的图像数量超过图形存储器中的图像数量,则当设备将数据移入和移出图形存储器时,您将看到主要的性能下降。没有简单的方法可以通过javascript知道设备的内存容量。

因此,简而言之,它不是您绘制的像素数,而是您绘制的唯一像素/图像的数量。效果可能非常引人注目,在GPU容量上仅增加1K的额外像素可以超过帧速率的一半,即使您实际上可能总共绘制的像素更少。

缩小单个图像的大小有助于系统管理资源。可能不得不换出一个大的位图来为一个小位图腾出空间,而是将较大的位图切割成较小的位图,以便更快地进行转换。

GPU在像素块2,4,8,16,32,64,128 ......中工作,并且在宽度和高度为2的幂上工作。使用这些尺寸的图像效率更高。具有130 * 130像素的图像实际上可能需要256 * 256(或256 * 196,具体取决于GPU的类型)内存像素存储在GPU内存上,同时将图像缩小到128 * 128将整齐地适合而不是腰部GPU RAM

不要参考您不使用的模式,字体和SVG图像也会占用GPU内存中与像素大小相关的空间,而不是实际的内存占用空间。不要让画布状态准备好画一个大字体。您可能在开始时设置它,然后不打算再次使用它,但是当那个字体准备就绪时可能会被绘制,它正在使用有价值的RAM