jQuery делегирует производительность по событию click в больших списках - замедляется, если вы динамически добавляете больше элементов?

Question

У меня есть визуальный список таких элементов:

http://jsfiddle.net/viatropos/XCe3T/1/

В реальном приложении я загружаю всего 200 элементов.Но проблема в том, что событию click требуется почти одна секунда для вызова обработчика, даже всего с 200 элементами.Обратный вызов события mouseover выполняется немедленно, независимо от того, сколько элементов в списке.

Мой вопрос: разве метод делегата не должен быть таким же быстрым, независимо от того, сколько элементов на странице?Все, что я делаю, это:

$("body").delegate("a", "click", function(event) { console.log($(event.target).get(0)); return false; }

Если вы перейдете к приведенному выше примеру jsfiddle и веб-инспектору и нажмете ссылку в отображаемом результате, он добавит еще 200 элементов.Обратите внимание, что чем больше элементов вы добавляете, тем медленнее они становятся.Странно то, что если вы начинаете с 6000 элементов, делегирование / клик выполняется намного быстрее, чем если бы вы начинали с 2000 и добавляли 200 за раз, пока не доберетесь до 6000.

Что вы думаете, как делатьУлучшить производительность метода delegate в jQuery для события click?Может ли CSS вызывать замедление этого процесса (может быть, слишком много стилей или неоптимизированный макет)?

Answer 1

Исходя из моего опыта, лучше (с точки зрения производительности) повторно инициализировать (отменить привязку, а затем снова связать обработчики событий), чем использовать .live или .delegate.Таким образом, вы должны достичь нужной вам производительности.Практически я бы определил порог, где делегат становится медленным, удалил все привязки и перепривязал eventHandlers к существующему набору элементов.