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

Question

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

---

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

老实说，CSS 在这方面并不是那么重要 (我把它放在一个像样的网格上)。我还从我的原始版本中删除了很多功能，实际上它们并不那么重要。

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

问题出在 Firefox 4 或 5 上。添加新轨道/线路确实慢。它像乌龟一样快。

所做的功能是克隆(使用处理程序复制)元素 trackOn，该元素已写入隐藏字段 (tracklistOff) 并添加 (insertAfter) 应用淡入淡出效果。 (这意味着网格中的新行)。

为什么在 Firefox 上有这种行为？我想在 DOM 上浏览的元素太多了。我需要摆脱这种迟钝的态度……那我该怎么办？

编辑

您可以在 this 上听到有关 Chrome 和 Firefox(5，最新版本)的区别。视频。尝试听到/看到单击鼠标和添加新行(具有效果)之间的区别。它太卡住了(当我尝试快速添加更多轨道时也是如此)。

对我来说仍然是一个问题，任何建议将不胜感激:)

Answer 1

1. 这对我来说不是很慢。在运行 Firefox 5 的计算机上，我可以在不到一秒的时间内添加许多轨道。你看到什么性能？ (“像乌龟一样快”不是一个非常量化的衡量标准。:)

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

   

   由此我们可以看出，大部分时间都花在了 mootools 库中的一些 set 函数上。由于我没有看到您的代码中包含此库，因此我假设配置文件已被 JSFiddle 污染。

3. 因此，我们创建一个 standalone test case没有不必要的 CSS 和配置文件。现在我们看到这个(多次按下 +Track 按钮):

   

   您几乎所有的时间都花在了clone() 函数上。

4. 那么你能做些什么呢？您可以尝试为模板行预先创建 HTML 字符串(在 JS 中)，而不是使用“克隆”尝试创建它:

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