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 ***):

Checks a HTML5 session storage log of the users progression through the game.
Depending on the stage, animates an object between two points using crSpline.
Ensures the browser window follows the object across a large canvas, via scrollLeft etc.
Finally, it loads a popup window via colorbox.
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);

Just a side note from your benchmarking page: `This benchmark tests the core JavaScript language only, not the DOM or other browser APIs` - your colorbox and animations are almost-purely DOM. — Fabrício Matté, Oct 19 '12 at 16:04

score 10 · Answer 1 · edited Oct 24 '12 at 13:26

10

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!

edited Oct 24 '12 at 13:26

Peter O.

32,158
14
82
96

answered Oct 21 '12 at 19:45

Armel Larcier

15,747
7
68
89

CSS 2D transforms are not guaranteed to be hardware accelerated. To ensure you are getting hardware acceleration, you should use translate3d(0, 0, 0), which tells the browser you are going to use the Z-axis (and will kick in the GPU). You can still use top and left and get hardware acceleration. http://www.html5rocks.com/en/tutorials/speed/html5/ – skyline3000 Oct 26 '12 at 14:11
2

True - translate3d is HW accelerated and leads to a huge performance gain, but invoking them on too many elements too often will just eat the accelerated resources. 2d transforms are usually not accelerated, however they still greatly improve performance, because changing their values does not lead to dom recalculation and re-rendering - which is the biggest performance hog with animations. – nxtwrld Oct 26 '12 at 15:08

score 5 · Accepted Answer · answered Oct 26 '12 at 21:10

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).

score 2 · Answer 3 · edited May 23 '17 at 12:09

Firstly, you should optimize your code creating a function for your animation (not tested, but should works) :

function animateMyObjet(duration,sequence,callback)
{
    $("#object").animate(
    {   crSpline: $.crSpline.buildSequence(sequence),
        {
          duration: duration,
          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() {
            callback();
        }
    }
}

Called in your code like this :

switch (sessionStorage.gameMainStage)
{
  case '1': animateMyObjet(10000,[[715, 425], [582, 524], [556, 646], [722, 688], [963, 629], [1143, 467]],                                                                                  
function() {
$.colorbox({href:"dialog-1.html", width:"737px", height:"474px", iframe: true, overlayClose: false, escKey: false, close: ""});
        break;

case '2' : ...

}

Secondly, I have discovered some weeks ago that the number of elements of the web page are impacting the IE9 performance. Try to hide all elements you don't need like element hidden due to a scrollable container.

Sometimes, the number of visible elements of the screen are impacting too animations performances. For the test, try to reduce the browser windows size and play your animation. I am pretty sure that the animation will be more smooth.

I hope these advices will help you. Don't forget to publish your final solution if you figure your problem out!

And finally, check a potential related topic about IE9 performances issue: IE9 : Always small CPU utilization on my web site

The link on the related topic to Javascript profiling in Web Developer toolbar is really useful, thanks. — Jon Hadley, Oct 22 '12 at 13:00

score 0 · Answer 4 · edited May 23 '17 at 12:24

0

you could try to check to check if IE does not try to work in different mode than IE9 browser mode and IE9 document mode i.e. quirks or compatibility mode. If it does try to force it to use default ones. Force IE compatibility mode off using tags

edited May 23 '17 at 12:24

Community

1
1

answered Oct 19 '12 at 16:08

SzymonK

98
4

score 0 · Answer 5 · answered Oct 27 '12 at 22:09

0

My thought, if you are seeing your event handlers called too often is have the event handlers just set a timeout (Say 10 ms) if no timeout is currently set and have the meat of the movement in the timeout function.

answered Oct 27 '12 at 22:09

Haqa

476
3
14

Poor JS/jQuery performance, particularly in IE9 and Firefox

5 Answers5