html 5 canvas和css动画出现奇怪的帧率问题

Question

我正在制作一个2d平铺级别的编辑器（您在已加载的spritesheet上单击一个平铺，然后可以将其绘制到主区域）。虽然它在桌面上运行良好，但移动性能错误慢，所以我一直在测试各种性能调整。使用chrome dev工具（桌面）监视帧率监视器的结果，我发现了一些我不理解的东西。当我单击菜单图标并弹出覆盖菜单（在屏幕截图左侧可见，使用css transform：translate for the animation）时，即使在绘制画布时，帧速率也会快速达到监视器刷新同步速率。

如果我还没有触摸菜单图标，那么在绘制画布时，framrate大约是40fps，大约是15fps，但只是触发菜单动画就会消除帧速率下降。它似乎也有持久的效果，当菜单关闭时，40fps的空闲帧速率不再下降，当菜单打开时，帧速率保持在60fps附近。

所以问题是双重的：为什么触发这个css动画对画布绘制性能（15fps vs 60）有如此巨大的影响，有没有办法强制一致的60fps而没有菜单一直打开？

PS *菜单的可见性无关紧要，让它在页面上没有任何区别，但动画效果似乎会大大影响帧速率。该菜单包含“null变换黑客”＃39;应用因为它触发了重叠画布覆盖，但删除只会在过程的每个阶段略微降低fps，程序的不同状态的相对性能是相似的。

Answer 1

可能问题在于你用来触发动画的方法......究竟是什么启动了动画？我想这是一些javascript事件？可能是它当时触发的次数超过一次吗？

Answer 2

Chrome有这样的东西，在使用css转换后，它可以实现硬件加速。

通过使用js移动菜单位置而不是使用css转换来验证它是很容易的。

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