Jquery animation on Firefox 7.0.1 lags

问题:

Does anyone know why this very simple jquery animation works perfectly in some browsers like Chrome and seems to be bugged in Firefox 7.0.1? Here's a link to the animation. If you try it in Firefox you'll see that the animation sometimes freezes then restarts. As you can see the code is very simple, only one animation, no images, and inline CSS.

html:

<div id="content" style="position: relative;width: 500px;height: 500px;overflow: hidden;">
    <ul id="slider" style="position: absolute;top:0;left:0;">
        <li style="background-color: red;height: 500px;width: 500px;list-style-type: none;"></li>
        <li style="background-color: green;height: 500px;width: 500px;list-style-type: none;"></li>
        <li style="background-color: blue;height: 500px;width: 500px;list-style-type: none;"></li>
    </ul>
</div>

JS:

$(document).ready(function () {
    to_move=$('#slider');
    to_move.animate({
       top: "-1000px"
    }, 15000,'linear');
});

Thanks you for your help.

回答1:

What you're seeing is Firefox's garbage collector kicking in every so often.

Via Dave Mandelin's blog:

Background on what GC is if you are not familiar: As a JavaScript program runs, it creates objects, arrays, strings, and functions, which take up memory. In order to not use up all your memory and crash, the JS engine must be able to automatically discover which objects are not in use anymore (so they are now “garbage”) and free them up. This “automatic memory reclamation” subsystem is called the garbage collector, or GC.)

The reason for the pauses is that SpiderMonkey uses an old-school stop-the-world mark-and-sweep collector

Vast improvements to Firefox's GC are planned but not yet implemented - see that link for more info.

回答2:

I don't know much about the inner workings of jquery, but I assume it's using a resize event for that div. Firefox handles resize events poorly, I'm not sure there's a way to fix it. Here's some more information: http://www.quirksmode.org/dom/events/resize.html