Why is this jQuery animation so SLOW on Firefox 4/5?

Question

EDIT by Phrogz: This appears to be a problem with the framerate of jQuery animation when this particular complex CSS is applied. See the video at the bottom for an example of the problem.

---

I think is hard to copy and paste the whole code here. So I've create a fiddle for this.

To be honest, CSS is not so important on this (I putted it for have a decent grid). I also removed many functions from my original version, in fact they aren't so important.

The only one that works is by clicking on the buttons + Tracks (which call addTrack()) that adds a new track/line in the grid. Tested on Chrome, IE, and Firefox < 4 version. There isn't much problem. It's really rapid and fluid.

The problem is on Firefox 4 or 5. It's really slow to add the new track/line. It's fast like a turtle.

What the function done is to clone (copy with handler) an element trackOn, which is already written in a hidden field (tracklistOff) and add it (insertAfter) applying a fade effect. (thats means a new line in the grid).

Why this behaviour on Firefox? Too many elements to browse on the DOM I suppose. I need to get rid about this slow attitude... so what can I do?

EDIT

You can hear the difference about Chrome and Firefox (5, last version) on this video. Try to hear/see the difference between clicking on mouse and add new line (with the effect). It's too frozen (also when I try to add more tracks quicly).

Still a problem for me, any suggestion will be appreciate :)

Answer 1

1. This is not very slow for me. On my computer running Firefox 5 I can add many tracks in less than a second. What performance are you seeing? ("Fast like a turtle" is not a very quantitative measurement. :)

2. When you have trouble with JavaScript speed, profile it, using the Developer tools for Chrome/Safari/IE or Firebug for Firefox. Here's what I see when I run the profiler on your JSFiddle and click on the +Track button twice:

   

   From this we can see that most of the time is spent in some set function from a mootools library. Since I don't see this library included in your code, I'm assuming the profile is tainted by JSFiddle.

3. So, we create a standalone test case without the unnecessary CSS and profile that. Now we see this (for several presses of the +Track button):

   

   Almost all of your time is spent in the clone() function.

4. So what can you do about it? You could try pre-creating the HTML string (in JS) for a template row, and instead of using 'clone' try creating that with:

   $(templateString).hide().insertAfter(...).fadeIn(600);
   

Answer 2

would it be ok if you get just the last element? something like:

  $('.tracklistOff div:last-of-type')
        .clone()
        .hide()
        .insertAfter(($(param).parents('.trackOn')))
        .fadeIn(600);

or you could addClass(last) to the last element to get only one