JS/jQuery性能不佳,特别是在IE9和Firefox中

Question

我在下面的脚本中遇到了严重的视觉和性能问题.最大的问题是对象的动画变得非常生涩,在IE9中几乎是瘫痪,但在Firefox中越来越烦人.

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

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

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

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

Answer 1

我担心你使用的图书馆太旧了,不能期待很棒的表演.

我没有在你的代码中看到任何错误(除了你可以为每个交换机案例使用带有config参数的函数,但这只是一个不会显着影响性能的重构问题)

CrSpline使用左侧和顶部CSS属性.

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

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

我想你可以很容易地在crspline库中重写一些代码来朝这个方向发展.

您还可以尝试寻找更新的"样条"库.

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

为你的工作干杯!

Answer 2

我遇到了一个连接到window.resize和window.scroll的单页面应用程序的问题.IE浏览器似乎比其他浏览器慢得多.

我注意到的第一件事是,在IE(特定版本8)中,附加到window.scroll或.resize的回调在调整窗口大小(或滚动)时似乎比Chrome或FF多了很多倍.因此,附加的任何回调被称为比Chrome增加相对成本多倍的回调.

我们设法通过将这些回调中的内容最小化到最小化来解决我们的问题,并且我们获得的主要收益是摆脱jQuery选择器.所以在你的情况下,你有回调函数中的var mover = $('#object'),每当你的事件触发时,IE会尝试查找并获取对象并将其包装在jQuery中,只需在你的回调,然后使用缓存的对象.在我们的例子中,通过大小顺序改善了性能,即使没有遇到性能问题也是一件好事(这是一个不必要的重复操作).

所以例如在案例8中,有类似的东西:

 case '10':{
    //caching myObject once and then use it afterwards
    var myObject = $("#object"),
        $window = $(window);

    myObject.animate(
      {
      crSpline: $.crSpline.buildSequence([[4141, 820], [4568, 949], [4447, 1175]]) },
      {
      duration: 5000,
          step: function() {
            var mover = myObject, //no need to refetch the 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: ""});
          }
      }
    );
}

ps:另外,我不确定您的应用程序的语义,但您可能需要添加自己的逻辑来跟踪posX和posY,因为它们总是可以引用原始缓存对象,但在所有情况下,请执行我提到的步骤确保选择器的成本是造成问题的原因(就像我的情况一样).