为什么这个jQuery动画在Firefox 4/5上如此慢？

Question

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

---

我认为很难在这里复制和粘贴整个代码.所以我为此创造了一个小提琴.

说实话,CSS在这方面并不是那么重要(我推测它有一个像样的网格).我还删除了原始版本中的许多功能,实际上它们并不那么重要.

唯一有效的方法是单击按钮+ Tracks(调用addTrack()),在网格中添加新的轨道/线.在Chrome,IE和Firefox <4版本上测试过.没有太大问题.它非常迅速和流畅.

问题出在Firefox 4或5 上.添加新的音轨/线路真的很慢.它就像乌龟一样快.

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

为什么在Firefox上有这种行为？我想,在DOM上浏览的元素太多了.我需要摆脱这种缓慢的态度......所以我该怎么办？

编辑

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

对我来说仍然是一个问题,任何建议将是欣赏:)

Answer 1

1. 这对我来说不是很慢.在运行Firefox 5的计算机上,我可以在不到一秒的时间内添加许多曲目.你看到了什么表现？("快像乌龟"不是一个非常量化的测量.:)

2. 当您遇到JavaScript速度问题时,请使用适用于Chrome/Safari/IE或Firebug for Firefox的开发人员工具进行配置.这是我在JSFiddle上运行探查器并单击+Track按钮两次时看到的内容:

   

   由此可以看出,大部分时间都花在set了mootools库中的某些功能上.由于我没有在代码中看到这个库,我假设该配置文件被JSFiddle污染了.

3. 因此,我们创建了一个独立的测试用例,没有不必要的CSS和配置文件.现在我们看到这个(按下几个+Track按钮):

   

   几乎所有的时间都花在了这个clone()功能上.

4. 所以你对此能做些什么？您可以尝试为模板行预先创建HTML字符串(在JS中),而不是使用"clone"尝试使用以下命令创建:

   $(templateString).hide().insertAfter(...).fadeIn(600);