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

Question

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

1. 使用Chrome：没问题;
2. 使用IE（7）：没问题;
3. 使用Firefox（4）：天啊，整个界面非常慢。

Javascript / jQuery代码（如您所见）非常简短，没有什么比这更复杂的了。 为什么会出现这种情况？

Answer 1

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

  

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

     

页面上有3203个DOM元素

     

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

     

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

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

Answer 2

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

编辑：并且通过手动，我的意思是：

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

然后是事件：

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

等

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