Почему эта анимация jQuery такая медленная в Firefox 4/5?

Question

EDIT от Phrogz: Похоже, что это проблема с частотой кадров анимации jQuery, когда применяется этот конкретный сложный CSS. Смотрите видео внизу для примера проблемы.

---

Я думаю, что здесь сложно скопировать и вставить весь код. Для этого я создал скрипку .

Если честно, CSS не так важен в этом (я поставил его, чтобы иметь приличную сетку). Я также удалил многие функции из своей исходной версии, на самом деле они не так важны.

Единственное, что работает, - это нажатие на кнопки + Tracks (которые вызывают addTrack ()), которые добавляют новую дорожку / линию в сетке. Протестировано на Chrome, IE и Firefox версии <4. Там не так много проблем. Это действительно быстро и плавно. </p>

Проблема в Firefox 4 или 5. Это действительно медленно , чтобы добавить новую дорожку / линию. Это быстро, как черепаха.

Функция выполняет клонирование (копирование с помощью обработчика) элемента trackOn, который уже записан в скрытом поле (tracklistOff), и добавление его (insertAfter) с применением эффекта затухания. (это означает новую строку в сетке).

Почему это поведение в Firefox? Я полагаю, слишком много элементов для просмотра на DOM. Мне нужно избавиться от этого медленного отношения ... так что я могу сделать?

EDIT

Вы можете услышать разницу о Chrome и Firefox (5, последняя версия) на этом видео. Попробуйте услышать / увидеть разницу между щелчком мыши и добавлением новой строки (с эффектом). Это слишком заморожено (также, когда я пытаюсь добавить больше треков быстро).

Все еще проблема для меня, любое предложение будет оценено :)

Answer 1

1. Это не очень медленно для меня.На моем компьютере под управлением Firefox 5 я могу добавить множество треков менее чем за секунду.Какое представление вы видите?(«Быстро, как черепаха» не очень количественное измерение.:)

2. Если у вас проблемы со скоростью JavaScript, профилируйте ее , используя инструменты разработчикаChrome / Safari / IE или Firebug для Firefox.Вот что я вижу, когда запускаю профилировщик на вашем JSFiddle и дважды нажимаю кнопку +Track:

   

   Из этого видно, что большая часть времени проводится внекоторая функция set из библиотеки mootools.Поскольку я не вижу эту библиотеку включенной в ваш код, я предполагаю, что профиль испорчен JSFiddle.

3. Итак, мы создаем автономный контрольный пример без ненужного CSS и профиля этого.Теперь мы видим это (для нескольких нажатий кнопки +Track):

   

   Почти все ваше время тратится на функцию clone().

4. Так что вы можете с этим поделать?Вы можете попробовать предварительно создать строку HTML (в JS) для строки шаблона, и вместо использования «клон» попробуйте создать ее с помощью:

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

Answer 2

Я только что проверил вашу скрипку в следующих браузерах, и все они работали хорошо: FireFox 5, Opera, Google Chrome, Safari и IE9.

Не было проблем со скоростью, но каждый браузер обрабатывал затухание немного по-своему.все остальное, казалось, работало нормально.Не уверен, что проблема здесь.Это может быть скорость вашего компьютера, но, поскольку вы находитесь на этом сайте, я предполагаю, что он приличный.

Answer 3

было бы хорошо, если бы вы получили только последний элемент? что-то вроде:

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

или вы можете addClass(last) до последнего элемента, чтобы получить только один