performance - html 5 Canvas 和 css 动画的奇怪帧率问题

Question

我正在制作一个二维图 block 级别编辑器(您在加载的 spritesheet 上单击一个图 block ，然后可以将其绘制到主要区域)。虽然它在桌面上表现良好，但移动性能惊人地慢，所以我一直在测试各种性能调整。使用 chrome 开发工具(桌面)的帧率监视器监视结果，我注意到一些我不明白的东西。当我单击菜单图标并弹出叠加菜单时(在屏幕截图的左侧可见，使用 css transform:translate 动画)帧速率飙升至大约显示器刷新同步速率，即使在绘制 Canvas 时也是如此。

如果我没有触摸菜单图标，空闲时帧率约为 40fps，绘制 Canvas 时约为 15fps，但只需触发菜单动画即可消除帧率下降。它似乎也有持久的效果，当菜单关闭时，40fps 的空闲帧率不再因重新绘制而下降，而当菜单打开时，帧率保持在 60fps 附近。

所以问题是双重的:为什么触发这个 css 动画对 Canvas 绘图性能有如此巨大的影响(15fps vs 60)，有什么方法可以在没有菜单一直打开？

PS* 菜单的可见性无关紧要，将其留在页面上没有任何区别，但将其设置为动画似乎会极大地影响帧速率。菜单应用了“空转换 hack”，因为它触发了对其覆盖的 Canvas 的重绘，但删除只会在过程的每个阶段使 fps 下降一点，程序不同状态的相对性能是相似的。

Answer 1

Chrome 有这个东西，在使用 css 转换时它可以启用硬件加速。

不用css转换，用js移动菜单位置，验证起来很容易。

关于问题的第二部分，如果是这种情况，隐藏或屏幕外的转换应该具有相同的效果。