为什么这个页面在 Firefox 上这么慢？ [关闭]

Question

This 是我的意思的页面。尝试点击链接（添加边/曲目，删除），您可以看到我自己添加/删除一些输入文本。

1. 使用 Chrome：没问题；
2. 使用 IE (7)：没问题；
3. 用火狐（4）：天啊，整个界面很慢。

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

Answer 1

我为 Firebug 插件尝试了 YSlow 插件。我突然想到的一件事是：

F 级关于减少 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 作为第一个也是唯一的参数，以避免再次发生这种情况。