我在使用以下脚本时遇到严重的视觉和性能问题。最大的问题是对象的动画变得非常不稳定，在 IE9 中几乎是严重的，但在 Firefox 中却越来越烦人。

直到最近，它的速度还是相当快的 - 但我担心复杂性正在减慢速度。奇怪的是，Sunspider benchmark 在我的 IE9 实例中比在 Firefox 中运行得更快。

脚本(这是一个更大的集合 *** 的片段):

1. 检查用户进程的 HTML5 session 存储日志 游戏。
2. 根据舞台，为两个之间的对象设置动画 使用 crSpline 点。
3. 确保浏览器窗口跟随对象 在大 Canvas 上，通过 scrollLeft 等。
4. 最后，它通过 colorbox 加载一个弹出窗口。
5. 当此框关闭时，用户进度日志会相应增加并且对象会再次移动。

我可以对我的代码进行明显的速度改进吗？有相当多的重复，我怎样才能减少它？是否有我遗漏的无限循环运行？有没有我可以用来分析 JS 慢点的软件？

***(我无法提供其他 JS 文件或 HTML，但我已将此脚本确定为问题所在)

更新: 经过相当多的测试后，似乎是步进动画功能 - 通过 scrollLeft 跟随窗口中的对象 - 导致动画不稳定。删除它会大大改善事情。

但这不是一个可行的长期解决方案。一个快速的解决方法是在完成时调用 follow 函数，但这对最终用户来说是一种不太流畅的体验，尤其是当对象移动更远的距离时。

那么，我该如何修改 step 函数以“更慢”/更高效地运行？我猜测这种抖动是由于它使用所有可用资源来跟踪对象而引起的毫秒。

(function ($) {

  sessionStorage.gameMainStage = 0 

  moveShip =  function() {

    switch (sessionStorage.gameMainStage)

{
  case '1':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[715, 425], [582, 524], [556, 646], [722, 688], [963, 629], [1143, 467]]) },{
      duration: 10000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
          },
          complete: function() {
            $.colorbox({href:"dialog-1.html", width:"737px", height:"474px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }
      }
    );
    break;

  case '2':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[1143, 467], [1343, 667], [1443, 367],  [1243, 167], [1499, 285]]) },
        {
          duration: 5000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
          },
          complete: function() {
            $.colorbox({href:"dialog-2", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }

        }
    );
    break;

  case '3':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[1499, 285], [1922, 423]]) },
        {
          duration: 5000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
          },
          complete: function() {
            $.colorbox({href:"dialog-3.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }

        }
    );
    break;  

  case '4':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[1922, 423], [2216, 578]]) },{
        duration: 5000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
            }, 

          complete: function() {
            $.colorbox({href:"game-1.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }
        }
    );
    break;

  case '5':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[2216, 578], [2769, 904]]) },{
      duration: 5000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
          }, 

          complete: function() {
            $.colorbox({href:"dialog-4.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }
      }
    );
    break;

  case '6':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[2769, 904], [3263, 903]]) },{
      duration: 5000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
          }, 

          complete: function() {
            $.colorbox({href:"dialog-5.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }
      }
    );
    break;

  case '7':
    $.colorbox({href:"game-2.html", width:"500px", height:"600px", iframe: true, overlayClose: false, escKey: false, close: ""});
  break;

  case '8':
    $.colorbox({href:"dialog-6.html", width:"737px", height:"567px", iframe: true, overlayClose: false, escKey: false, close: ""});
  break;

  case '9':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[3263, 903], [4141, 820]]) },{
      duration: 5000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
          }, 

          complete: function() {
            $.colorbox({href:"dialog-7.html", width:"737px", height:"547px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }
      }
    );
    break;

  case '10':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[4141, 820], [4568, 949], [4447, 1175]]) },{
      duration: 5000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
          }, 

          complete: function() {
            $.colorbox({href:"dialog-8.html", width:"737px", height:"434px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }
      }
    );
    break;

  case '11':
    $.colorbox({href:"dialog-9.html", width:"737px", height:"567px", iframe: true, overlayClose: false, escKey: false, close: ""});
  break;

  case '12':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[4447, 1175], [4701, 1124], [4816, 822]]) },{
      duration: 5000,
          step: function() {
            var mover = $('#object'),               
            posX = mover.position().left;
            posY = mover.position().top;

            $(window)
            .scrollLeft(posX - $(window).width() / 2)
            .scrollTop(posY - $(window).height() / 2);
          }, 

          complete: function() {
            $.colorbox({href:"dialog-10.html", width:"900px", height:"687px", iframe: true, overlayClose: false, escKey: false, close: ""});
          }
      }
    );
    break;
}

};

})(jQuery);

最佳答案

恐怕您使用的库太旧，无法期待出色的性能。

我没有发现您的代码有任何问题(除了您可以为每个 switch case 使用带有配置参数的函数，但这只是重构问题，不会显着影响性能)

CrSpline 使用 left 和 top CSS 属性。

您可能想要研究利用硬件加速的 CSS 2d 转换:

使用 -webkit/moz/ms-transform: translateX(-1000px) translateY(200px) 而不是 left: -1000px;顶部:200px;

我认为您可以很容易地朝那个方向重写 crspline 库中的一些代码。

您也可以尝试寻找更新的“样条”库。

还有一点:crSpline 似乎没有使用 requestAnimationFrame 功能。 JQuery 的 animate 方法也没有。我建议您看一下 TweenLite/TweenMax 库:http://www.greensock.com/v12/

为您的工作干杯!

关于javascript - JS/jQuery 性能差，尤其是在 IE9 和 Firefox 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12978069/