javascript - 在移动浏览器中流畅运行时，Ionic App变得生涩

我编写了一个Ionic应用程序，其中在DIV中放置了九张图像。这是我的CSS文件中的相关代码段：

.mydiv {
    position: relative;
    overflow: hidden;
}
.mydiv > img {
    position: absolute;
    box-shadow: 6px 6px 8px #aaaaaa;
}

我正在使用$ionicGesture.on('drag', function(e) {})随手指移动来移动这些图像。那是我controller.js的相关部分：

jQuery('.mydiv > img').each(function(i, myImg) {
    jQuery(myImg).css('left', initLeft + e.gesture.touches[0].pageX - initX);
    jQuery(myImg).css('top', initTop + e.gesture.touches[0].pageY - initY);
}

因此，基本上，每次drag事件发生时，我都通过更改图像的'left'和'top'属性来移动图像。

问题是，虽然该解决方案在浏览器中效果很好，但在iPhone 5上作为Ionic应用程序时却非常落后。当我将Ionic'www'文件夹的内容放在Web服务器上并用我的Web访问该应用程序时iPhone的网络浏览器的运动极为流畅。因此，显然，这不是性能问题，但Ionic所做的事情使应用程序变得口吃。在Mac上使用Chrome分析器，我了解到几乎所有时间都是由内部Ionic功能而不是客户端代码使用。这似乎是另一个暗示，这是某种离子问题。

为什么在打包为Ionic应用程序的情况下，在同一设备上的移动浏览器中完美运行的我的应用程序变得像地狱般混乱？

附加信息：

我拖动的那些图像使用jQuery(myImg).width()缩放。现在，我用预先缩放的图像文件替换了它们，并摆脱了box-shadow样式。现在，滞后现象有所减轻，但比移动浏览器还差。我的iPhone上的移动Safari是否可能使用GPU来进行Javascript引起的样式更改，而对于Cordova应用程序则不使用GPU？

最佳答案

看起来您有动画问题。 Here是Ionic团队的一篇文章，解释了如何处理此问题。


  发生的是，当您尝试为的左属性设置动画时
  这些项目，则网络视图将不得不返回并尝试重新计算
  该商品的位置。很多CSS属性都会发生这种情况。
  
  值得庆幸的是，我们还有其他方式为这些项目设置动画。
  
  让我们更改左属性以进行变换并设置要使用的值
  翻译3d。 Translate3d是一个特殊的CSS值，实际上
  将动画移至设备的GPU。这称为硬件
  加速动画。

@-webkit-keyframes slideIn {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@-webkit-keyframes slideInSmooth {
  0% {
    -webkit-transform: translate3d(-100%,0,0);
  }
  100% {
    -webkit-transform: translate3d(0,0,0);
  }
}


.slide-in{
   -webkit-animation: slideInSmooth ease-in 1;
  animation: slideInSmooth ease-in 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
}