javascript - CSS 和 Javascript 优化(速度问题)

Question

所以我正在尝试使用 Angular 在 css 和 javascript 中制作一个滚轮导航系统。它工作得很好，但我想知道是否有更好的方法来优化它以减少负载，它在新设备上运行良好但在旧设备上运行速度很慢。目前正在拖动(使用 hammer js，所以每秒发生 60 次)我正在运行这段代码。

        var pageX = e.gesture.center.pageX;
        var pageY = e.gesture.center.pageY;
        currentAngle = getAngle(pageX, pageY) - updatedAngle + originalAngle;
        absoluteAngle = getAngle(pageX, pageY);
        circle.style.transform = circle.style.webkitTransform  = 'rotateZ(' + currentAngle + 'deg)';
        for (var i = 0; i < circles.length; i++) {
          circles[i].style.transform = circles[i].style.webkitTransform = 'rotateZ(' + -currentAngle + 'deg)';
        }

其中updatedAngle和originalAngle是start时设置的变量，getAngle是这个函数

    var getAngle = function(x, y){
      var deltaX = x - center.x,
          deltaY = y - center.y,
          angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
      if(angle < 0) {
        angle = angle + 360;
      }
      return angle;
    };

通常有 12-15 个部分或(圆圈)，所以我可以看到这是如何变慢的，一个运行约 15 次的 for 循环，在一个每秒发生 60 次的事件中。第一个旋转是移动对象的父 div 的移动，循环调整它们的旋转使它们直立。我应该尝试跳帧吗？并减少事件的发生？有没有办法可以批处理 css 更改？有什么比 rotateZ 更好的吗？ (我尝试了 rotate() 并且它慢了大约 10%)。任何想法都会有所帮助

Answer 1

我正在尝试自由式编码微优化答案。还没有测试过，但我希望你能得到本质。

在第一个函数中，可以删除一些变量，因为它们是重复的。多个变量声明可能会使其在旧版浏览器中变慢。

var absoluteAngle = getAngle(e.gesture.center.pageX, e.gesture.center.pageY);
currentAngle = angle - updatedAngle + originalAngle;
circle.style.transform = circle.style.webkitTransform  = 'rotateZ(' + currentAngle + 'deg)';
for (var i = 0; i < circles.length; i++) {
    circles[i].style.transform = circles[i].style.webkitTransform = 'rotateZ(' + -currentAngle + 'deg)';
}

在这个函数中，可以做的优化不多。但同样在这里，您可以删除变量并节省一些滴答声。

var getAngle = function(x, y){
    var angle = Math.atan2(y - center.y, x - center.x) * 180 / Math.PI;
    if(angle < 0) {
        angle = angle + 360;
    }

    return angle;
};

不多，但没有 plunker 或其他东西有点难以优化。