将画布大小增加一个像素会导致Chrome中的性能下降

Question

我的应用程序多次在画布上绘制相同的图形。我们发现我们可以在隐藏的画布上绘制一次，然后将它们复制到目标画布上。我正在做一些性能比较。我面临着一些我无法解释的奇怪现象。

简而言之：我对两张相同尺寸的画布进行了测试。在第一个画布中，我多次绘制图形。在第二个：我首先在隐藏的画布上绘制，然后将其复制到可见的画布中。结果应该是一样的。这是有趣的部分：隐藏画布的方法与画布400x164的尺寸很好。分别绘制每个图形的速度快60％。但是一旦我将尺寸增加一倍到400x165 - bam！ Chrome的冲压速度降低了60％。在IE中，它仍然更快（问我怎么发现164-165阈值）。

以下是JsPerf测试的链接：

• 尺寸400x165：http://jsperf.com/draw-vs-stamping/7
• 尺寸400x164：http://jsperf.com/draw-vs-stamping/8

Chrome 46.0.2490.80 32位在Windows Server 2008 R2 / 7 64位上

任何帮助表示赞赏。

Answer 1

答案就是这个，不幸的是很愚蠢。多年来我一直对此感到困惑。你的问题帮助我找到答案。

当且仅当画布包含> = 60,000像素时，Chrome才允许硬件加速。

我有一个200x200迷你地图坐在webgl应用程序的顶部。 webgl应用程序将以60fps渲染150,000个多边形没问题。一旦玩家开始移动，帧速率将下降到~30fps。禁用小地图可以保持平稳的60fps。我很惊讶我的小超级基本小地图会引起如此巨大的打击。

在搜索SO寻找解决方案（而不是真正找到解决方案）后，我开始使用发布的jsfiddles。画布尺寸似乎有所不同。在一个特别的小提琴（来自HTML5 drawImage slow on Chrome），我尝试了大小256x256（面积65,536），跑得非常糟糕。尝试257x257（面积66,049）的速度大约快了6倍......

所以我在257x257尝试了我的小地图（使用CSS缩放将其缩小到原始尺寸的外观）。很棒，移动时性能几乎达到了0。

就是这样。谷歌选择了60,000像素的阈值，以便加速硬件加速。

烦人。

版本63.0.3239.84（官方版）（64位）