Adobe Animate HTML5 Canvas 问题仅使用 Google Chrome。动画滞后答案

【问题标题】：Adobe Animate HTML5 Canvas issue w/ Google Chrome only. Animation is LaggingAdobe Animate HTML5 Canvas 问题仅使用 Google Chrome。动画滞后
【发布时间】：2017-05-26 21:41:13
【问题描述】：

我们已通过 Adobe Animate 发布了 HTML5 Canvas。并且已将文件大小减少到总共不到 2MB，并且在所有浏览器上加载时间不到 3 秒。但我们仅在 Google Chrome 上存在帧 (FPS) 滞后问题。

我们在 Chrome Flags 中停用了 2D 画布 chrome 加速器，但仍然无法让动画在更大的屏幕尺寸下流畅运行。

有没有办法在 Animate 中发布画布，这样就不会发生这种情况？或者是否有一些 JavaScript 代码允许 Chrome 以正确的 FPS 加载动画？

我们已经在 IE、Edge 和 FF 中进行了测试，所有这些浏览器都运行流畅。只有 Google Chrome 遇到了这个问题。

【问题讨论】：

经过进一步的实验，似乎我们在 4k 的设备上也遇到了延迟。
请在问题本身的minimal reproducible example 中提供所有相关代码。

标签： javascript jquery google-chrome html5-canvas adobe-edge

【解决方案1】：

分析完后，我发现代码对 drawImage 进行了大量调用。在我的机器上，它花费了 86% 的时间来调用 drawImage。

它可能每帧都重绘大图像。看看有没有办法阻止这种情况发生。

尝试删除背景图像并只保留线条，如果滞后消失，您就有答案了。

【讨论】：

drawImage 应该是画布上最快的操作之一。
如果它被调用了十亿次。这似乎是问题所在。正如我所说，基于分析，它使用了 86% 的 CPU 周期。随意在不同的硬件上重复测试。