EDIT by Phrogz: This appears to be a problem with the framerate of jQuery animation when this particular plex 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 :)

EDIT by Phrogz: This appears to be a problem with the framerate of jQuery animation when this particular plex 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 :)

• javascript
• jquery
• html
• css
• firefox

• I ran it locally with Firefox 5 and Firebug and I'm only seeing it take 3-5 milliseconds. Can you post how you are seeing it's slow? – brheal Commented Jul 21, 2011 at 15:19
• I'll try to make a video...if I can :) – markzzz Commented Jul 21, 2011 at 19:48
• Added the video right now! Check it :) – markzzz Commented Jul 21, 2011 at 20:12

3 Answers 3

1. This is not very slow for me. On my puter 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);
   

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

I just tested your fiddle on the following browsers and they all worked well: FireFox 5, Opera, Google Chrome, Safari & IE9.

There were no speed issues but each browser handled the fade slightly differently however everything else seemed to work fine. Not sure what the problem is here. It could be your puter speed but as you're on this site I presume it's decent.