0

So currently I have an animation of a bouncing object which is playing at 20 times a second

    1000/50 = 20 times a second

The code is the following, you can assume all variables have been initialized properly

        var animation = setInterval(function () {
            currentFrame++;
            if (speedX <= 0.0) {
                clearInterval(animation);
            }
            speedX -= 0.03;
            speedY = (speedY + Math.sqrt((2 * currentFrame) / gravityPull));
            yPosition += speedY;

            if (yPosition > groundY) {
                speedY *= -1;
                yPosition = groundY;
            }
            xPosition += speedX;
            $("#box").offset({ top: yPosition, left: xPosition });

        }, 50);

This is creating a really clugish performance in IE, even though Chrome seems to be completely fine with this code running. In fact its so bad, that it slows down much of the computer.

Is there something wrong here? It seems like the computations are fairly simple... The frame rate is not very high, 20 per second is not extreme but is still fluid enough for a not so choppy animation.

Serguei Fedorov
  • 7,763
  • 9
  • 63
  • 94
  • 2
    It may not be enough to get you 20fps, but you'll save some overhead if you lose those two function calls -- $() and .offset() -- by saving a reference to the `$("#box")` element outside of your animation and manipulate the position by directly modifying `.style.top` and `.style.left` within it. – Steve Jun 08 '12 at 01:01

1 Answers1

3

New discovery: Internet Explorer sucks.

Well, at least IE8 and older. IE9 has fine performances.

The problem with timed functions triggered by setTimeout and setInterval is that the browser attempts to execute the functions when the time is due, but this actually happens only if it's idle. And since Internet Eplorer <9 is so slow, and is always "late" for something, you can understand why that animation isn't good.

The problem is that everytime you execute a "frame", IE8 takes more than 50 milliseconds to accomplish all the tasks caused by calculations and DOM changes.

MaxArt
  • 22,200
  • 10
  • 82
  • 81