直到最近它一直很快 – 但我担心复杂性正在减慢速度.奇怪的是,在我的IE9实例中,Sunspider benchmark比在Firefox中运行得更快.

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

>检查用户进程的HTML5会话存储日志
游戏.
>根据阶段,在两个之间设置动画
使用crSpline分.
>确保浏览器窗口跟随对象
穿过大画布,通过scrollLeft等.
>最后,它通过colorbox加载一个弹出窗口.
>当此框关闭时,用户进度日志会相应增加,对象再次移动.

我可以对我的代码进行明显的速度提升吗？有一点点的回复,我怎么能减少呢？是否有任何无限循环运行,我错过了？有没有我可以使用的软件来描述JS的慢点？

***(我无法提供其他JS文件或HTML,但我已将此脚本识别为问题)

更新：
经过相当多的测试后,似乎步骤动画功能 – 通过scrollLeft跟踪窗口中的对象 – 导致生涩的动画.删除它会大大改善事情.

然而,这不是一个可行的长期解决方案.快速修复是完全调用跟随功能,但这对最终用户来说是一种不那么流畅的体验,特别是当对象移动距离较远时.

那么,我如何修改步长函数以更慢’/更有效地运行？我猜测它的急动是由它使用所有可用资源来跟踪每毫秒的对象造成的.

(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,complete: function() {
            $.colorBox({href:"dialog-2",height:"547px",close: ""});
          }
 
        }
    );
    break;
 
  case '3':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[1499,285],[1922,423]]) },complete: function() {
            $.colorBox({href:"dialog-3.html",close: ""});
          }
 
        }
    );
    break;  
 
  case '4':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[1922,423],[2216,578]]) },{
        duration: 5000,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",close: ""});
          }
        }
    );
    break;
 
  case '5':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[2216,578],[2769,904]]) },{
      duration: 5000,complete: function() {
            $.colorBox({href:"dialog-4.html",close: ""});
          }
      }
    );
    break;
 
  case '6':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[2769,904],[3263,903]]) },complete: function() {
            $.colorBox({href:"dialog-5.html",close: ""});
          }
      }
    );
    break;
 
  case '7':
    $.colorBox({href:"game-2.html",width:"500px",height:"600px",close: ""});
  break;
 
  case '8':
    $.colorBox({href:"dialog-6.html",height:"567px",close: ""});
  break;
 
  case '9':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[3263,903],[4141,820]]) },complete: function() {
            $.colorBox({href:"dialog-7.html",close: ""});
          }
      }
    );
    break;
 
  case '10':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[4141,820],[4568,949],[4447,1175]]) },complete: function() {
            $.colorBox({href:"dialog-8.html",height:"434px",close: ""});
          }
      }
    );
    break;
 
  case '11':
    $.colorBox({href:"dialog-9.html",close: ""});
  break;
 
  case '12':
    $("#object").animate(
      { crSpline: $.crSpline.buildSequence([[4447,1175],[4701,1124],[4816,822]]) },complete: function() {
            $.colorBox({href:"dialog-10.html",width:"900px",height:"687px",close: ""});
          }
      }
    );
    break;
}
 
};
 
})(jQuery);