为什么这个页面在Firefox上如此慢？

This is the page I mean. Try to click on the links (Add Side/Track, Remove) and you can see my own grind to add/remove some input text.

这是我的意思。尝试单击链接（添加侧/跟踪，删除），您可以看到我自己的研磨添加/删除一些输入文本。

With Chrome : no problem;
使用Chrome：没问题;
With IE (7) : no problem;
用IE（7）：没问题;
With Firefox (4) : Oh my god, the whole interface is very slow.
使用Firefox（4）：天啊，整个界面非常慢。

The Javascript/jQuery code (as you can see) is really short, and there are nothing so complex. Why this behaviour?

Javascript / jQuery代码（如你所见）真的很短，没有什么比这更复杂了。为什么会这样？

2 个解决方案

#1

Profiling indicates the clones are really slow. Have you tried manually creating the elements with a fixed DOM string (instead of using .clone()) and using delegates for the event handling? That'd probably improve overall performance a lot, in any browser.

分析表明克隆非常慢。您是否尝试使用固定的DOM字符串手动创建元素（而不是使用.clone（））并使用委托进行事件处理？在任何浏览器中，这可能会大大提高整体性能。

Edit: and by manually, I mean something like:

编辑：手动，我的意思是：

var newElem = $('<div class="trackOn">...</div>');

Then for the events:

那么对于事件：

tracklistOnElem.delegate('.trackBotton .addSide', 'click', function() { addSide(this); return false; });
tracklistOnElem.delegate('.trackBotton .addTrack', 'click', function() { addTrack(this); return false; });

etc.

等等

Edit #2: Reading the docs always pays off, here too: http://api.jquery.com/clone/ says that in jQuery 1.5.0, the default for copying events and data was incorrectly set to true. It's back to false again in 1.5.1 and friends, so try using jQuery 1.6.0 or 1.5.2. That will probably also help. You can also modify the clone() calls to manually specify false as the first and only parameter, to avoid this happening again.

编辑＃2：阅读文档总是有回报，这里也是：http：//api.jquery.com/clone/说在jQuery 1.5.0中，复制事件和数据的默认设置被错误地设置为true。它在1.5.1和朋友中又回到了假，所以尝试使用jQuery 1.6.0或1.5.2。这可能也会有所帮助。您还可以修改clone（）调用以手动指定false作为第一个也是唯一的参数，以避免再次发生这种情况。

#2

I tried the YSlow add-on for the Firebug add-on. One thing that jumped out at me was:

我为Firebug插件尝试了YSlow插件。跳出来的一件事是：

Grade F on Reduce the number of DOM elements

等级F on减少DOM元素的数量

There are 3203 DOM elements on the page

页面上有3203个DOM元素

A complex page means more bytes to download, and it also means slower DOM access in JavaScript. Reduce the number of DOM elements on the page to improve performance.

复杂页面意味着要下载更多字节，这也意味着JavaScript中的DOM访问速度更慢。减少页面上DOM元素的数量以提高性能。

Read More: http://developer.yahoo.com/performance/rules.html#min_dom

阅读更多：http：//developer.yahoo.com/performance/rules.html#min_dom

Perhaps building the DOM elements in javascript after page load would help.

也许在页面加载后在javascript中构建DOM元素会有所帮助。

#1