Question

由Phrogz编辑：当应用这个特殊的复杂CSS时，这似乎是jQuery动画帧率的问题。有关问题的示例，请参阅底部的视频。

我认为很难复制并粘贴整个代码。所以我为此创建了一个fiddle。

~~老实说，CSS在这个~~上并不那么重要（我把它推到了一个不错的网格上）。我还删除了原始版本中的许多功能，实际上它们并不那么重要。

唯一有效的方法是点击按钮+ Tracks（调用addTrack（）），在网格中添加新的曲目/线。在Chrome，IE和Firefox上进行测试＆lt; 4版。没有太大问题。它真的很快且流畅。

问题出在Firefox 4或5上。添加新的曲目/行真的是慢。它像海龟一样快。

该函数所做的是克隆（使用处理程序复制）元素trackOn，它已经写入隐藏字段（tracklistOff）并添加它（insertAfter）应用淡入淡出效果。（这意味着网格中有一个新行）。

为什么在Firefox上会出现这种情况？我想，在DOM上浏览的元素太多了。我需要摆脱这种缓慢的态度......所以我该怎么办？

修改

您可以在this视频中了解Chrome和Firefox（5，上一版本）的不同之处。尝试听到/看到点击鼠标和添加新行（带效果）之间的区别。它太冻结了（当我尝试添加更多曲目时）。

对我来说仍然是一个问题，任何建议都会受到赞赏：）

Answer 1

这对我来说不是很慢。在运行Firefox 5的计算机上，我可以在不到一秒的时间内添加许多曲目。你看到了什么表现？（“快像乌龟”不是一个非常量化的测量。：）
使用适用于Chrome / Safari / IE的开发者工具或Firebug for Firefox时，如果您遇到JavaScript速度问题，配置文件。这是我在JSFiddle上运行探查器并单击+Track按钮两次时看到的内容：

从中我们可以看到大部分时间花在set库的某些mootools函数上。由于我没有看到您的代码中包含此库，我假设该配置文件被JSFiddle污染。
因此，我们创建了一个standalone test case，没有不必要的CSS和配置文件。现在我们看到了这一点（对于+Track按钮的几次按下）：

几乎所有的时间都用在clone()函数中。
那么你能做些什么呢？您可以尝试为模板行预先创建HTML字符串（在JS中），而不是使用“clone”尝试使用以下命令创建：
```
$(templateString).hide().insertAfter(...).fadeIn(600);
```

Answer 2

如果你只得到最后一个元素，那会没关系吗？类似的东西：

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

或者你可以addClass(last)到最后一个元素只获得一个

Answer 3

我刚刚在以下浏览器上测试了你的小提琴并且它们都运行良好：FireFox 5，Opera，Google Chrome，Safari＆amp; IE9。

没有速度问题，但每个浏览器处理淡入淡出的情况略有不同，但其他一切似乎都运行良好。不知道这里有什么问题。它可能是你的计算机速度，但正如你在这个网站上我认为它是体面的。