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

【问题标题】：Increasing size of the canvas by one pixel is causing performance regression in Chrome将画布大小增加一个像素会导致 Chrome 中的性能下降
【发布时间】：2016-01-26 07:26:06
【问题描述】：

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

简而言之：我用两个相同大小的画布进行了测试。在第一个画布中，我多次绘制图形。第二个：我先在隐藏的画布上绘制，然后将其复制到可见的画布中。结果应该是一样的。这是有趣的部分：使用隐藏画布的方法适用于画布大小 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

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

感谢任何帮助。

【问题讨论】：

绘制不均匀大小的画布可能会减慢速度，具体取决于 GPU，但 60% 是原因所在。我可以建议您更改大小并渲染几帧，然后清除并重新渲染奇数大小的画布。我注意到最近在 chrome 画布上出现了一些奇怪的行为，这些行为在重新渲染后似乎消失了。我怀疑新画布没有被添加到 GPU 内存中，需要在将其呈现到 GPU 表面后进行一些渲染调用以说服它移动。
没用，结果一样 :( jsperf.com/draw-vs-stamping/13
我也试过 -webkit-transform: translate3d(0,0,0);强制画布进入另一层
当我使用屏幕外画布保存预渲染内容时，我有两个应用程序可以每秒 2、4 帧（仅 chrome）。我所做的是监视帧速率，如果它慢了一秒钟以上，那么我只为一个屏幕外的画布重新渲染所有内容。这似乎在剩下的时间里解决了它。我可以有许多屏幕外画布，但只需要重绘一个即可解决减速问题。我一直在寻找一个原因，但到目前为止没有人知道为什么。希望你有同样的问题。我正在使用当前的 Chrome Beta。 IE和FF都没有问题

标签： html google-chrome canvas internet-explorer-11

【解决方案1】：

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

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

我在 webgl 应用程序上放置了一个 200x200 的迷你地图。 webgl 应用程序将以 60fps 的速度渲染 150,000 个多边形没有问题。一旦玩家开始移动，帧率就会下降到约 30fps。禁用小地图将使事情保持在平稳的 60 fps。我很惊讶我小小的超级基本小地图会造成如此巨大的打击。

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

所以我尝试了 257x257 的小地图（使用 CSS 缩放将其缩小到原始大小的外观）。跑得很好，移动时性能几乎为零。

原来如此。为了启动硬件加速，Google 选择了 60,000 像素的阈值。

烦人。

版本 63.0.3239.84（正式版）（64 位）

【讨论】：