将 canvas 的大小增加一个像素会导致 Chrome 中的性能下降
Increasing size of the canvas by one pixel is causing performance regression in Chrome
我的应用多次在 canvas 上绘制相同的图形。我们发现我们可以在隐藏 canvas 上绘制一次，他们只需将它复制到目标 canvas。我正在做一些性能比较。我正面临着一些我无法解释的怪事。
简而言之：我用两个相同大小的 canvases 进行了测试。在第一个 canvas 中，我多次绘制图形。第二个：我先在隐藏的 canvas 上绘制，然后将其复制到可见的 canvas 中。结果应该是一样的。
这是有趣的部分：隐藏 canvas 的方法适用于 canvas 400x164 的大小。比单独绘制每个图形快 60%。
但是一旦我将尺寸增加一次像素到 400x165 - 砰！ 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 位
感谢任何帮助。
答案是这样的，不幸的是它很愚蠢。多年来我一直对此感到困惑。你的问题帮助我找到了答案。
当且仅当 canvas 包含 >= 60,000 像素时，才会 Chrome 允许硬件加速。
我在 webgl 应用程序上放置了一个 200x200 的迷你地图。 webgl 应用程序将以 60fps 的速度渲染 150,000 个多边形没有问题。一旦玩家开始移动，帧率就会下降到 ~30fps。禁用小地图将使画面保持在 60fps 的流畅速度。我很惊讶我小小的超级基本迷你地图会造成如此巨大的打击。
在 SO 上搜索解决方案（并没有真正找到解决方案）后，我开始使用发布的 jsfiddles。 Canvas 尺寸似乎决定了一切。在一个特别的fiddle（来自HTML5 drawImage slow on Chrome）中，我尝试了256x256（面积65,536）的大小，运行非常糟糕。尝试了 257x257（66,049 的区域）运行 大约快了 6 倍...
所以我尝试了 257x257 的小地图（使用 CSS 缩放将其缩小到原始大小的外观 运行ce）。 运行 很棒，移动时性能几乎为 0。
就是这样。 Google 选择 60,000 像素的阈值以便启动硬件加速。
烦人。
版本 63.0.3239.84（正式版）（64 位）
我的应用多次在 canvas 上绘制相同的图形。我们发现我们可以在隐藏 canvas 上绘制一次，他们只需将它复制到目标 canvas。我正在做一些性能比较。我正面临着一些我无法解释的怪事。
简而言之：我用两个相同大小的 canvases 进行了测试。在第一个 canvas 中，我多次绘制图形。第二个：我先在隐藏的 canvas 上绘制，然后将其复制到可见的 canvas 中。结果应该是一样的。 这是有趣的部分：隐藏 canvas 的方法适用于 canvas 400x164 的大小。比单独绘制每个图形快 60%。 但是一旦我将尺寸增加一次像素到 400x165 - 砰！ 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 位
感谢任何帮助。
答案是这样的，不幸的是它很愚蠢。多年来我一直对此感到困惑。你的问题帮助我找到了答案。
当且仅当 canvas 包含 >= 60,000 像素时，才会 Chrome 允许硬件加速。
我在 webgl 应用程序上放置了一个 200x200 的迷你地图。 webgl 应用程序将以 60fps 的速度渲染 150,000 个多边形没有问题。一旦玩家开始移动，帧率就会下降到 ~30fps。禁用小地图将使画面保持在 60fps 的流畅速度。我很惊讶我小小的超级基本迷你地图会造成如此巨大的打击。
在 SO 上搜索解决方案（并没有真正找到解决方案）后，我开始使用发布的 jsfiddles。 Canvas 尺寸似乎决定了一切。在一个特别的fiddle（来自HTML5 drawImage slow on Chrome）中，我尝试了256x256（面积65,536）的大小，运行非常糟糕。尝试了 257x257（66,049 的区域）运行 大约快了 6 倍...
所以我尝试了 257x257 的小地图（使用 CSS 缩放将其缩小到原始大小的外观 运行ce）。 运行 很棒，移动时性能几乎为 0。
就是这样。 Google 选择 60,000 像素的阈值以便启动硬件加速。
烦人。
版本 63.0.3239.84（正式版）（64 位）