KineticJS 在 iPad 2 上非常慢

Question

我刚刚重新实现了我正在开发的音乐应用程序的一个组件，以使用 KineticJS，而不是使用 DOM 元素和一些 JQuery 动画完成的原型 GUI。起初，我很高兴看到 Chrome 的帧率有 10-15% 的适度提升，但随后在 iPad 2 上进行了测试，我估计与 DOM 版本约 30fps 相比，我估计约 6fps。

我一定是做错了什么。我希望。

组件为 1000x300，有 2 层。一个是静态背景，另一个有大约 150 个形状，大多数大小约为 20-30 像素，少数沿着画布的长度。动画使用 Kinetic.Tween 同时为不透明度和宽度设置动画。大多数形状只是圆形，尺寸很小。没有任何东西被缓存，但这看起来如此少且如此简单的形状，以至于我没想到会如此缓慢（我估计大约 6 fps 是我所看到的）。我正在为单个音符创建新的 Tween 实例，并且可以使用一个池，因为总对象的数量是恒定的，但如果仅这一点导致速度如此缓慢，我会感到惊讶。直觉上我怀疑它的推动像素在某种程度上是问题所在？

该应用程序使用 WebAudio 和 JQuery UI 来处理简单的小部件（如按钮），但至少有 30 fps 的 DOM 实现，具有相同的音频，其他一切都相同。

对于 Tweens，渲染循环的默认行为是什么？我在文档中看不到指定所需帧速率的方法。 Kinect.Animation 看起来提供了更精细的粒度控制，但在我的情况下，这需要太多的状态，因为动画都是在 0.5-1.2 秒内消失的脉冲事件。出于某种原因，不透明度的动画制作成本是否极高？我的静态背景层是否因未缓存为图像而导致任何问题？

抱歉，没有可显示的代码。我可以创建一个 jsfiddle，但我希望在上面的描述中有一些明显的东西我应该做不同的事情。

哦，我不是在查找动画对象；从初始时间开始，它们都保存在数组中。再说一次，我认为这不是问题。

Answer 1

由于没有人敢对我的精彩而重要的问题发表评论，我将发布答案。我不确定，但我相信我的代码的第一个版本没有正确设置 HTML 中的视口缩放，导致非 GPU 缩放的画布，因此帧率很差。

如果其他人遇到类似问题，可能是您忘记将其添加到 HTML 的 HEAD：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

虽然还有其他设置比例的选项，但我更喜欢这个，然后在我的应用程序代码中执行任何自定义屏幕宽度缩放。

ps。我现在使用 KinectJS 在我老化的 iPad 2 上拥有健康的 40-50fps 和大量动画透明淡入淡出等等。