我刚刚重新实现了音乐应用程序的一个组件，我正在使用KineticJS而不是我的原型GUI完成所有DOM元素和一些JQuery动画。起初我很高兴看到Chrome中的帧率提高了10-15％，但随后在iPad 2上进行了测试，我得到的估计大约是6fps，而DOM版本大约是30fps。
我一定是做错了。我希望。
组件为1000x300，有2层。一个是静态背景，另一个是〜150个形状，大多数大约20-30px大小，一些运行画布的长度。动画使用Kinetic.Tween同时为不透明度和宽度设置动画。大多数形状只是圆形，体积小。什么都没有缓存，但这似乎是如此之少，如此简单的形状，我不会期望这样的迟缓（我估计大约6 fps是我所看到的）。我是为单个笔记创建新的Tween实例，并且可以改为使用池，因为总对象的数量是恒定的，但是如果单独导致这样的减速，我会感到惊讶。直觉上我怀疑它推动像素是某种程度上的问题？
该应用程序正在使用WebAudio和JQuery UI来处理简单的小部件，例如按钮，但是至少有30 fps的DOM实现具有相同的音频，其他所有内容都相同。
使用Tweens，渲染循环的默认行为是什么？我认为文档中没有办法指定所需的帧速率。 Kinect.Animation看起来它提供了更精细的颗粒控制，但在我的情况下，这将需要太多的状态，因为动画都只是冲动事件，消失超过0.5-1.2秒。由于某种原因，不透明度是否非常昂贵？我的静态背景图层是否因未被缓存为图像而导致任何问题？
抱歉没有可显示的代码。我可以创建一个jsfiddle，但我希望在上面的描述中有一些明显的东西，我应该做的不同。
哦，我没有抬头看动画片;它们都是从初始时间开始保存在数组中的。再一次，不会认为这将是问题。
答案 0 :(得分：7)
由于没有人敢对我这个非常重要的问题发表评论，我会发一个答案。我不确定，但我相信我的代码的第一个版本没有在HTML中正确设置视口缩放，导致非GPU缩放画布，因此帧速率很差。
如果其他人遇到类似问题，可能是您忘记将其添加到HTML的HEAD中：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
虽然还有其他设置比例的选项，我更喜欢这个，然后在我的应用程序代码中进行任何自定义屏幕宽度缩放。
PS。我现在有一个健康的40-50fps，有很多动画透明淡化等等，在我老化的iPad 2上使用KinectJS。