Poor JS/jQuery performance, particularly in IE9 and Firefox

Question

I'm having serious visual & performance issues with the script below. The biggest problem is that the animation of the object is becoming really jerky, almost cripplingly so in IE9, but increasingly annoying in Firefox.

It has been pretty fast until recently - but I'm concerned the complexity is slowing things down. Oddly the Sunspider benchmark runs faster in my IE9 instance, than in Firefox.

The script (which is a snippet of a larger collection ***):

1. Checks a HTML5 session storage log of the users progression through the game.
2. Depending on the stage, animates an object between two points using crSpline.
3. Ensures the browser window follows the object across a large canvas, via scrollLeft etc.
4. Finally, it loads a popup window via colorbox.
5. When this box is closed, the user progression log is incremented accordingly and the object moves again.

Are there aby obvious speed improvments I could make to my code? There's a fair bit of repition, how can I reduce that? Are there any infinite loops running that I'm missing? Is there software I can use to profile slow points of the JS?

*** (I can't provide the other JS files or HTML, but I have identified this script as the problem)

---

UPDATE: After a fair bit more testing, it appears that the step animate function - which follows the object in the window via scrollLeft - is causing the jerky animation. Removing it improves things considerably.

This isn't a viable long term solution however. A quick fix is to call the follow function on complete, but this is a much less smooth experience for the end user, especially when the object moves longer distances.

So, how would I modify the step function to run a lot 'slower'/more efficiently? I'm guessing the jerkiness is caused by it using all the available resources to follow the object every millisecond.

(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

I'm afraid the library you are using is too old to expect great performances.

I don't see anything wrong in your code (except that you could have used a function with a config argument for each switch case but that's just a matter of refactoring that won't affect performance significantly)

CrSpline uses the left and top CSS properties.

You might want to look into CSS 2d transforms that take advantage of hardware acceleration:

Use -webkit/moz/ms-transform: translateX(-1000px) translateY(200px) instead of left: -1000px; top: 200px;

I think you could quite easily rewrite some code in the crspline library towards that direction.

You could also try to look for a more up-to-date "splines" library.

Another point: crSpline doesn't seem to use the requestAnimationFrame feature. JQuery's animate method doesn't either. I'd advice you take a look at the TweenLite/TweenMax library: http://www.greensock.com/v12/

Cheers to your work!

Answer 2

I encountered this problem with a Single Page Application that hooked to window.resize and window.scroll. It seemed to be much slower on IE than other browsers.

The first thing I've noticed, that in IE (version 8 to be specific), a callback attached to window.scroll or .resize seemed to fire so many times more than in Chrome or FF while resizing the window (or scrolling). So any callback attached is called multiple times more than Chrome adding to its relative cost.

We managed to solve our problem by minimizing what's being done inside these callbacks to the minimum, and the main gain we had was by getting rid of the jQuery selectors. So in your case, you have for example var mover = $('#object') in the callback function, every time your event fires, IE will try to find and get object and wrap it in jQuery, simply do that once outside of your callback and then use the cached object. In our case, that improved performance by magnitudes order and it seemed like a good thing to do even if no performance issues were encountered (it was an operation that was repeated unnecessarily).

So in case 8 for example, have something like:

 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: Additionally, I am not sure of the semantics of your application, but you might need to add your own logic to track posX and posY as they could always be referencing the orginal cached object, but in all cases, do the steps I mentioned to make sure that the cost of selectors is what's causing the problem (as it was in my case).